WT ASS5

ASSIGNMENT 5

5.  Develop dynamic web page to demonstrate Positioning Elements, Moving Elements, Element Visibility, changing colours and Fonts, Dynamic Content, Stacking Elements, Locating the Mouse Cursor, reacting to a Mouse Click.


A.  Design a dynamic web page that contains two radio button labelled foreground colour and background colour and a heading change colour. Place menu which contains minimum ten colours. Menu must be labelled with choose colour. Radiobottons onclick event must trigger the event handler which must apply the chosen colour to option chosen through the radio button. Default foreground colour of heading is green and background is white. While applying the background color radio button visibility must be hidden and at the time of applying foreground color radio button must be visible.

Index.html
<!DOCTYPE html>
<html>
<head>
<title> ASSIGNMENT 5 A </title>
<script type="text/javascript" src="a.js"></script>
</head>
<body id="bd" style="background-color: white;"> <!-- To set default Background color as white-->
<h2 id="h" style="color: green;">CHANGE COLOR</h2>  <!-- To set default Foreground color as Green-->
<form id="fr">
<input type="radio" id="b" name="r1" value="back" style="visibility: visible;"/>
<!-- To set Visibility property-->
<label id="l1" style="visibility: visible;">Background Color</label><br/>
<input type="radio" id="f" name="r1" value="fore" style="visibility: visible;"/>
<label id="l2" style="visibility: visible">Foreground Color</label><br/>
<h4> Choose Color</h4><br/><br/>
<select id="s" onchange="change();">    <!-- To create Menu-->
<option>--choose color--</option>
<option value="purple">Purple</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="violet">Violet</option>
<option value="yellow">yellow</option>
<option value="orange">Orange</option>
<option value="indigo">Indigo</option> </select><br/><br/>
<input type="button" id="r" value="REPEAT" onclick="reappear();"/><br/>

</form>
</body>
</html>

function change()
{


a.js

s=document.getElementById("s"); // To fetch value clicked at menu v=s.value;
f=document.getElementById("fr"); h=document.getElementById("h").style; if(f.r1[0].checked)
{
document.getElementById("bd").style.backgroundColor=v; document.getElementById("b").style.visibility="hidden";  // To hide Element document.getElementById("f").style.visibility="hidden"; document.getElementById("l1").style.visibility="hidden"; document.getElementById("l2").style.visibility="hidden";
}
else if(f.r1[1].checked)
{
h.color=v;
}
}
function reappear() // To again set initial initial value
{
document.getElementById("b").style.visibility="visible"; document.getElementById("f").style.visibility="visible"; document.getElementById("l1").style.visibility="visible"; document.getElementById("l2").style.visibility="visible";
}

………………………………………………..OUTPUT………………………………………………….


B.Design a dynamic web page to fill the customer information Name and Email. Also the user must provide the userid and password details required to create an account. Provide Helpbox to assist the user in filling the form. Onbulr event of textboxes must position helpbox nearer to the textbox and must contain help message related to the information to be filled in the box. Helpbox is represented through the text area and initial content is plz look into this box to fill the form. Web page must contain submit and reset button. Onclick event of submit button trigger the event handler which must validates the entered name, email and password are in required format or not. In case any one is not in given format alert the user with a message your details are not accepted otherwise display the accepted details.
Index.html
<html>
    <head>
        <script type="text/javascript" src="5b.js"></script>
    </head>
    <body>
     <form align="center" style="font-family: Arial; padding: 30px;font-size:1.8em;background-color:blue;
           margin: 30px">
            <pre>Name       :<input type="text" id="name" onfocus="help_box(1);"
onblur="help_box(0);"></pre>
            <pre>E-mail     :<input type="text" id="mail" onfocus="help_box(2);"
onblur="help_box(0);"></pre>
            <pre>User-id    :<input type="text" id="uid" onfocus="help_box(3);"
             onblur="help_box(0);"></pre>
            <pre>Password   :<input type="text" id="pass" onfocus="help_box(4);"
             onblur="help_box(0);"></pre>
        <textarea rows="1" cols="60" id="box" style="position:absolute; top:90px;left:1165px;">
          Please look into this box to fill the form</textarea>
        <input type="submit" value="SUBMIT" onclick="validate();"/>
        <input type="reset" value="RESET" onclick="del();"/>
        </form>
   </body>
</html>
b.js
var a=["Please refer this box to fill the form","Firstname,lastname,Middle-initial.", "username(digit,lowercase)@com","User@(3digit)","length-
6,lowercase,Uppercase,special char[@$!_],digit"]; function help(k)
{
p=document.getElementById("ta").style; document.getElementById("ta").value=a[k]; if(k===0)
{
p.top="10px"; p.left="450px";
}
else
{
p.top="30px"; p.left="300px";
}
}
// [A-Z][a-z]+[,][A-Z][a-z]+[,][A-Z]
function validate()
{
nv=document.getElementById("n").value.search(/[A-Z][a-z]+[,][A-Z][a-z]+[,][A- Z]$/);
console.log(nv);
ev=document.getElementById("e").value.search(/^[a-z][0-9a-z]*@gmail\.com/); uv=document.getElementById("u").value.search(/User@\d{3}/);
if(nv!==-1&&ev!==-1&&uv!==-1)
{
alert("Valid data");
}
else
{
alert("Invalid data and cannot be uploaded");
}
}

var a=["Please refer this box to fill the form","Firstname,lastname,Middle-initial", "username(digit,lowercase)@(domain)com","Name(3digit)","length-
6,uppercase,lowercase,special character like[@$!_],digit"]; function help_box(k)
{
new_style=document.getElementById("box").style; document.getElementById("box").value=a[k]; if(k===0)
{
new_style.top="80px";

new_style.left="500px";
}
if(k==1)
{
new_style.top="80px"; new_style.left="400px";
}
if(k==2)
{
new_style.top="110px"; new_style.left="400px";
}
if(k==3)
{
new_style.top="140px"; new_style.left="400px";
}
if(k==4)
{
new_style.top="170px"; new_style.left="400px";
}


}

function validate()
{
nv=document.getElementById("name").value.search(/[A-Z][a-z]+[,][A-Z][a- z]+[,][A-Z]$/);
ev=document.getElementById("mail").value.search(/^[a-z0-9]*@[a- z]{4,6}\.com/);
uv=document.getElementById("uid").value.search(/[A-Z][a-z]+\d{3}/); if(nv!==-1&&ev!==-1&&uv!==-1)
{
if(document.getElementById("pass").value.search(/[A-Za-z0-9@$!_]{6}/)!==-1) alert("Valid data");
}
else
{
alert("Invalid data and cannot be uploaded");
}
}

function del()
{
w1= document.getElementById("name").value=" ";

w2=document.getElementById("mail").value=" "; w3= document.getElementById("uid").value=" "; w4= document.getElementById("pass").value=" ";
}
………………………………………………..OUTPUT………………………………………………….


C.Design dynamic web page which must contain four short paragraphs of text about your four favourite places. Each paragraph initially must have different font and border properties. These four paragraphs must be stacked on top of each other, with only enough of each showing so that mouse cursor can always be placed over some part of them. Onmouseover event for these paragraphs must trigger the event handler to bring the triggered paragraph on top and its font and border properties must be changed to the old top paragraph properties and old top paragraph properties must be changed to the current top one.

Index.html
<html>
    <head>
        <script>
 var ot="p3";
                function change(nt)
                {
                    dot=document.getElementById(ot).style;
                    dnt=document.getElementById(nt).style;
                    dot.zIndex="0";
                    dnt.zIndex="10";
                    otcolor=dot.backgroundColor;
                    ntcolor=dnt.backgroundColor;
                    dnt.backgroundColor=otcolor;
                    dot.backgroundColor=ntcolor;
                    ot=nt;

                }
        </script>
    </head>
    <body>
        <p id="p1" style="position: absolute; top: 20px; left: 0px; font-style: italic;background-color:
           lightsteelblue; color:violate; z-index: 0px; border-style: dashed;border-color: greenyellow;
           border-width: thick;" onclick="change('p1');">Try, try, try and try again. Feed your mind ideas of success, not failure.Remember, the only way you can fail is if you give up. Every time you fail, you come one step closer to success.You are not scared; you are courageous. You are not weak; you are powerful. You are not ordinary, you are remarkable.Do not back down, do not give up.</p>
        <p id="p2" style="position: absolute; top: 60px; left: 75px; font-weight:bold; color:indigo;
           background-color: pink; z-index: 0px; border-style: solid;border-color: blue; border-width: thick;
           " onclick="change('p2');">When you look back on your life, don't have regrets. Believe in yourself,believe in your future, you will find your way.There is a fire burning inside you that is very powerful; it is waiting to burn bright. You are meant to do great things.Following your dreams can be both terrifying and exciting. Courage is facing fear. Fear of failure holds most people back. You are not most people. </p>
        <p id="p3" style="position: absolute; top: 100px; left: 150px; font-style: oblique;
           background-color: palevioletred; color:blue; z-index: 0px; border-style: double;
           border-color: orange; border-width: thick;" onclick="change('p3');">Bijapur is a historical city in Karnataka. The city is famous for its ancient monuments, mosques, mausoleums, palaces,fortifications and other structures. Situated at a distance of about 530 km to the northwest of Bangalore, Bijapur attracts scores of tourists who flock to have a glimpse of the historical, cultural and architectural beauty of the city.</p>
        <p id="p4" style="position: absolute; top: 140px; left: 225px; color:green; z-index: 0px;
           background-color: lightsalmon; border-style: dotted;border-color: black; border-width: thick;
           " onclick="change('p4');">Bijapur is an ancient city that was founded in the 10th-11th century by Kalyani Chalukyas, the then rulers of South India. During that period it was known as Vijayapura which means the ‘City of Victory.’ Later it came under the rule of the Yadavas and then the Bahmani Sultanate of Gulbarga. It was the capital of the Adil Shahi kings from 1489 to 1686.</p>
        </body>
</html>


………………………………………………..OUTPUT………………………………….


D.Design dynamic web page to display your image. Continuously move the image along with mouse cursor position.


Index.html
<html>
<head>
<title> ASSIGNMENT 5 D </title>
<script type="text/javascript" src="d.js"></script>
</head>
<body onmouseover="move(event);"> <!-- Bringing mouse cursor to link event -->
<img src="becimg.jfif" alt="Hi" id="i" style="position: absolute; top: 10px; left:10px;" width="105" height="100"/>
</body>
</html>

d.js
function move(e)
{
document.getElementById("i").style.top=e.clientY+"px"; document.getElementById("i").style.left=e.clientX+"px";
}

………………………………………………..OUTPUT………………………………………………….