Lab Assignment-3

COURSE: ADVANCES IN WEB TECHNOLOGIES
LAB ASSIGNMENT-3
1. Design a web page to perform Arithmetic operation
CODE:
<!DOCTYPE HTML>
<head>
<style>
body{
background-color:lavender;
font-family:Cambria;
font-size:20px;
text-align:center;
border:2px solid black;
}
h3{
color:green;
text-decoration:underline;
}
</style>
<script language="javascript" type="text/javascript">
function multiply(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a*b;
document.my_cal.total.value=c;
}
function addition(){
c=a+b;
}
function subtraction(){
c=a-b;
}
function division(){
c=a/b;
}
function modulus(){
c=a%b;
}
</script>
<title>Arithmetic operation</title>
</head>
<body>
<h3>19MID0132 Math calculator</h3>
<form name="my_cal">
Number 1: <input type="text" name="first">
<br>

Number 2: <input type="text" name="second">
<br>
<input type="button" value="ADD" onclick="javascript:addition();">
<input type="button" value="SUB" onclick="javascript:subtraction();">
<input type="button" value="MUL" onclick="javascript:multiply();">
<input type="button" value="DIV" onclick="javascript:division();">
<input type="button" value="MOD" onclick="javascript:modulus();">
<br>
Get Result: <input type="text" name="total">
</form>
</body>
</html>
SCREENSHOT:
Addition
Subtraction:
Multiplication
Division
Modulo operation
2. Design a web page to read DOB and display age
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Age Calculator</title>
<script>
function ageCalculator() {
var userinput = document.getElementById("DOB").value;
var dob = new Date(userinput);
if(userinput==null || userinput=='') {
document.getElementById("message").innerHTML = "**Choose a date
please!";
return false;
} else {
//calculate month difference from current date in time

var month_diff = Date.now() - dob.getTime();
//convert the calculated difference in date format

var age_dt = new Date(month_diff);
//extract year from date

var year = age_dt.getUTCFullYear();
//now calculate the age of the user

var age = Math.abs(year - 1970);
//display the calculated age

return document.getElementById("result").innerHTML =
"Age is: " + age + " years. ";
}
}
</script>
<style>
*{
box-sizing:border-box;
}
body{
background-color:Wheat;
}
</style>
</head>
<body>
<center>
<h2 > Calculate Age from Date of Birth <br> <br> </h2>


<b> Enter Date of Birth: <input type=date id = DOB> </b>
<span id = "message" style="color:red"> </span> <br><br>


<button type="submit" onclick = "ageCalculator()"> Calculate age </button>
<br><br>
<h3 style="color:32A80F" id="result" align="center"></h3>
</center>
</body>
</html>
SCREENSHOT:
3. Design a web page to change color based on user input

CODE:
<!DOCTYPE html>
<html>
<head>
<title>Color change</title>
<script>
function changeColor(){
document.body.style.backgroundColor =
document.getElementById('picker').value;
btn.addEventListener("click",changeColor);
}
</script>
<style>
body{
text-align:center;
}
p{
font-family:Georgia;
text-size:10px;
}
</style>
</head>
<body>
<p>Select a color</p><input type="color" id="picker"><br>
<input type="button" name="submit" id="Color" value="Click here"
onclick="changeColor()">
</body>
</html>
OUTPUT:
Selecting color:
Background color changed:

4. Design a webpage to display the shapes based on user input using any
mouse event
CODE:
<html>
<style>
body
{
background-color: coral;
}
</style>
<body>
<button id="circle"> Circle </button><br><br>

<button id="rectangle">Rectangle </button>
<br>
<div id="shapes">
<svg width='500' height='100'> <circle cx='50' cy='50' r='50'
style='stroke: none; fill: #FF8181;'/></svg>
</div>
<script type="text/javascript">
var cir=document.getElementById("circle");
var rec=document.getElementById("rectangle");
cir.addEventListener("mouseover",()=>{
document.getElementById("shapes").innerHTML = "<svg
width='500' height='100'><circle cx='50' cy='50' r='50' style='stroke:
none; fill: #CE00FF;'/></svg>";
});
cir.addEventListener("mouseout",()=>{
document.getElementById("shapes").innerHTML="<svg
width='100' height='100'><circle cx='50' cy='50' r='40' style='stroke:
none; fill:#FF8181;'/></svg>";
});
rec.addEventListener("mouseover",()=>{
width='400' height='110'><rect width='300' height='100' style='stroke:
none; fill:#CE00FF;'/></svg>";
});
rec.addEventListener("mouseout",()=>{
width='400' height='110'><rect width='300' height='100' style='stroke:
none; fill:#FF8181;'/></svg>";
});
</script>
</body>
</html>
SCREENSHOT:
5. Design a web page to show multiple mouse event handler on single
function
CODE:
<!DOCTYPE html>
<html>
<head>
<title>JS Mouse Events - Button Demo</title>
<style>
body{
background-color:lightblue;
text-align:center;
font-size:30px;
}
</style>
</head>
<body>
<button id="btn">Click me with any mouse button: left, right, middle,
...</button>
<p id="message"></p>
<script>
let btn = document.querySelector('#btn'); // disable context menu when
right-mouse clicked
btn.addEventListener('contextmenu', (e) => {
e.preventDefault();
}); // show the mouse event message
btn.addEventListener('mouseup', (e) => {
let msg = document.querySelector('#message');
switch (e.button) {
case 0:
msg.textContent = 'Left mouse button clicked.';
break;
case 1:
msg.textContent = 'Middle mouse button clicked.';
break;
case 2:
msg.textContent = 'Right mouse button clicked.';
break;
default:
msg.textContent = `Unknown mouse button code: ${event.button}`;
}
});
</script>
</body>
</html>
SCREENSHOT:

Lab Assignment-3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab Assignment-3

Uploaded by

Copyright:

Available Formats

COURSE: ADVANCES IN WEB TECHNOLOGIES

//calculate month difference from current date in time

//convert the calculated difference in date format

//extract year from date

//now calculate the age of the user

//display the calculated age

3. Design a web page to change color based on user input

Background color changed:

<button id="circle"> Circle </button><br><br>

You might also like