Scribd
Upload
27 views36 pages

3,4,5 - & - 5 - Op - Merged (1) Fjeurtyur83u3uuequhw

The document outlines a series of experiments aimed at creating web pages using HTML and CSS. It includes a registration page with various input fields, a catalogue page displaying book details, a cart page summarizing selected books, and additional experiments focusing on CSS styling and link behaviors. Each section provides code snippets and design objectives for the respective web pages.

Uploaded by

Nikhil Mishra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
27 views36 pages

3,4,5 - & - 5 - Op - Merged (1) Fjeurtyur83u3uuequhw

The document outlines a series of experiments aimed at creating web pages using HTML and CSS. It includes a registration page with various input fields, a catalogue page displaying book details, a cart page summarizing selected books, and additional experiments focusing on CSS styling and link behaviors. Each section provides code snippets and design objectives for the respective web pages.

Uploaded by

Nikhil Mishra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

EXPERIMENT #3 AIM:

REGISTRATION PAGE:
Create a registration form with the following fields
1)Name (Text field)
2)Password (password field)
3) E-mail (text field)
4) Phone Number (text field)
5) Sex (radio button)
6) Date of birth (3 select boxes)
7) Languages known (checkboxes–English, Telugu, Hindi, Tamil) 8)
Address (text area)

CODE:
REGISTRATION:->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initialscale=1.0">
<title>Document</title>
</head>
<body bgcolor="orange">

<table border="3" cellspacing="15px" cellspadding="7px">


<form action="submit.html">
<tr>
<td>
<label for="NAME">name</label></td>
<td>
<input type="text" placeholder="name" ></td>
</tr>

<tr>
<td>
<label for="password"> Password</label></td>
<td>
<input type="password" placeholder="password " name="password"
id=""></td>
</tr>

<tr>
<td>
<label for="email">e-mail</label></td>
<td>
<input type="text" name="email" id=""></td>
</tr>

<tr>
<td>
<label for="number">Number</label></td>
<td>
<input type="number" name="Number" id="" ></td>
</tr>

<tr>
<td>
<label>Gender:</label></td>
<td>
<label for="male">male</label>

<input type="radio" name="gender">

<label for="female">female</label>

<input type="radio" name="gender">


</td>
</tr>
<tr>
<td>
<label for="dob">Date of Birth</label></td>
<td>
<input type="date" placeholder="dd-mm-yyyy" name="dob"
id=""></td>
</tr>
<tr>
<td>
<label for="language">Language known </td>
<td>
<label for="hindi">Hindi</label>
<input type="checkbox" name="hindi" id="">
<label for="english">English</label>
<input type="checkbox" name="english" id="">
<label for="tamil">Tamil</label>
<input type="checkbox" name="tamil" id="">
<label for="telgu">Telgu</label>
<input type="checkbox" name="telgu" id="">
</label>
</td>
</tr>
<tr>
<td>
<label for="address">Address:</label></td>
<td>
<textarea name="address" placeholder="address required" rows="3"
></textarea></td>

</tr>
<tr>
<td>
<button>
Register
</button>
</td>
<td>
<button>
Clear
</button>
</td>

</tr>
</form>
</table>

</body>
</html>

OUTPUT:
EXPERIMENT #4
AIM: The catalogue page should contain the details of all the books available in the website
in a table. The details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.

CODE -
CATALOUGUE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial
scale=1.0">
<title>Document</title>
</head>
<body>
<table border="2" style="width: 100%; height: 100%; background-
color: aqua;">
<tr>
<th>BOOK</th>
<th>AUTHOR</th>
<th>PRICE</th>
<th>CART</th>
</tr>
<tr>
<td align="center" width="100px"><img src="https://
media.gettyimages.com/id/1329614638/vector/brochure-design-
covermodern-layout-annual-report-poster-flyer-in-a4.jpg?
s=612x612&w=gi&k=20&c=monb_XX3R-
J68ck3ImC6ugcwAYK19kJ6DKgtQvWG-uo=" alt="" height="160px"
width="300px"></td>
<td><table border="1" align="center" width="100%">
<tr>
<th>Book</th>
<th>KISHAN</th>
</tr>
<tr>
<th>Author</th>
<th>Krishna</th>
</tr>
<tr>
<th>Publisher</th>
<th>Manish</th>
</tr>
</table></td>
<td align="center">
5000
</td>
<td align="center">
<button style="border-radius: 15px; background-color: rgb(239,
225, 225);border: 11px solid black;">add to cart</button>
</td>
</tr>
<tr>
<td align="center" width="100px"><img src="https://
media.gettyimages.com/id/1329614638/vector/brochure-design-
covermodern-layout-annual-report-poster-flyer-in-a4.jpg?
s=612x612&w=gi&k=20&c=monb_XX3R-
J68ck3ImC6ugcwAYK19kJ6DKgtQvWG-uo=" alt="" height="160px"
width="300px"></td>
<td><table border="1" align="center" width="100%">
<tr>
<th>Book</th>
<th>LIJACKO</th>
</tr>
<tr>
<th>Author</th>
<th>A.r. rahman</th>
</tr>
<tr>
<th>Publisher</th>
<th>KR.thakur</th>
</tr>
</table></td>
<td align="center">
3000
</td>
<td align="center">
<button style="border-radius: 15px; background-color: rgb(239,
210, 210);border: 11px solid black;">add to cart</button>
</td>
</tr>
<tr>
<td align="center" width="100px"><img src="https://
media.gettyimages.com/id/1329614638/vector/brochure-design-
covermodern-layout-annual-report-poster-flyer-in-a4.jpg?
s=612x612&w=gi&k=20&c=monb_XX3R-
J68ck3ImC6ugcwAYK19kJ6DKgtQvWG-uo=" alt="" height="160px"
width="300px"></td>
<td><table border="1" align="center" width="100%">
<tr>
<th>Book</th>
<th>LOREM</th>
</tr>
<tr>
<th>Author</th>
<th>MAXTERN</th>
</tr>
<tr>
<th>Publisher</th>
<th>Webto</th>
</tr>
</table></td>
<td align="center">
1000
</td>
<td align="center">
<button style="border-radius: 15px; background-color: rgb(232,
215, 215);border: 11px solid rgb(14, 12, 12);">Add to cart</button>
</td>
</tr>
</table>
</body>
</html>

OUTPUT:
EXPERIMENT #5

AIM:
CART PAGE: The cart page contains the details about the books which are added to the cart.
The cart page should look like this:

OUTPUT

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initialscale=1.0">
<title>Document</title>
<style>
.blink{
animation: blinker 1.5s linear infinite;
color: red;
font-size: 1.3em;
}
@keyframes blinker{
50%{
opacity: 0;
}
}
</style>
</head>
<body style="background-image: url(https://image-static.collegedunia.com/
public/college_data/images/appImage/12665_ABESEC_New.jpg?
h=260&w=360&mode=crop);backdrop-filter:blur(2px);background-repeat:
no-repeat;background-size: cover;">
<table border="2" style=" height: 400px;width:100%;font-size:
xlarge;">
<tr>
<th>Boks Name</th>
<th>Prices</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<th>java2</th>
<th>$35</th>
<th>2</th>
<th>$70</th>
</tr>
<tr>
<th>python</th>
<th>$35</th>
<th>2</th>
<th>$70</th>
</tr>
<tr align="center">
<td colspan="3"><b>Total Amount</b></td>
<th class="blink">$76</th>
</tr>
</table>
</body> </html>
OUTPUT:
EXPERIMENT-6
AIM: Design a web page using CSS (Cascading Style Sheets) which includes the
following:
1) Use different font, styles:
In the style definition you define how each selector should work (font, color etc.). Then, in
the body of your pages, you refer to these selectors to activate the styles.
2) Set a background image for both the page and single elements on the page.

CODE:

Practical-6

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-image: url(registration.jpg);
background-size: cover;
background-repeat: no-repeat;
backdrop-filter: blur(2px);
}
h1{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: black;
}
.content-box{
background-image: url(logo.jpeg);
background-size: cover;
padding: 10px;
background-repeat: no-repeat;
margin: auto;
width: 50%;
border-radius: 20px;
}
h2{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: white;
}
p{
font-family: Arial, Helvetica, sans-serif;
color: white;
text-align: justify;
padding: 10px;
}
.button{
background-color: black;
color: white;
padding: 10px 20px;
text-align:after;
text-decoration: underline;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 10px;
}
.button:hover{
background-color:aqua;
aling-item: centre;
}
</style>
</head>
<body>
<h1>Welcome to ABES Engineering College</h1>
<div class="content-box" align="center">
<h2>Department of Computer Science</h2>
<p>The Department of Computer Science and Engineering at ABES Engineering College
Ghaziabad was established in the year 2000. The department runs four year full time B.Tech program
and two year full time M.Tech program in Computer Science and Engineering with total intake of
1080 students in B.Tech and 12 students in M.Tech. The B.Tech program is accredited by National
Board of Accreditation (NBA). The department has well qualified, experienced and dynamic faculty
members.</p>
<a href="https://abes.ac.in/computer-science-engineering.php">
<button class="button">Click here for more Information</button></a>
</div>
</body>
</html>
OUTPUT:
EXPERIMENT-7
AIM: 1) Control the repetition of the image with the background-repeat property.
2) Define styles for links as
A:link
A:visited
A:active
A:hover
CODE:
Practical-7A
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.repeat{
background-image: url('codecheflogo.jpg');
background-repeat: repeat;
height: 200px;
width: 400px;
border: 2px solid black;
}
.repeat-x{
background-image: url(codecheflogo.jpg);
background-repeat: repeat-x;
height: 200px;
width: 400px;
border: 2px solid black;
}
.repeat-y{
background-image: url(codecheflogo.jpg);
background-repeat: repeat-y;
height: 200px;
width: 400px;
border: 2px solid black;
}
.no-repeat{
background-image: url(codecheflogo.jpg);
background-repeat: no-repeat;
height: 200px;
width: 400px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1 align="center">CSS Background Repeat Examples</h1>
<h2>Repeat</h2><div class="repeat"></div>
<h2>Repeat-X</h2><div class="repeat-x"></div>
<h2>Repeat-Y</h2><div class="repeat-y"></div>
<h2>No-Repeat</h2><div class="no-repeat"></div>
</body></html>

OUTPUT:
Practical-7B
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* changes color */
a.one:link{color:blue;}
a.one:visited{color:blueviolet;}
a.one:hover{color:brown;}
a.one:active{color:chocolate;}

/* changes font size */


a.two:link{color:blue;}
a.two:visited{color:blueviolet;}
a.two:hover{font-size: 150%;}
a.two:active{color:chocolate; background-color: aquamarine;}

/* change background color */


a.three:link{color:blue;}
a.three:visited{color:blueviolet;}
a.three:hover{background: #66ff66;}
a.three:active{color:chocolate;}

/*changes font style*/


a.four:link{color:blue;}
a.four:visited{color:blueviolet;}
a.four:hover{font-family: 'Courier New', Courier, monospace;}
a.four:active{color:chocolate;}

/* changes text decoration*/


a.five:link{color:blue; text-decoration: none;}
a.five:visited{color: blueviolet; text-decoration: none;}
a.five:hover{text-decoration: underline;}
a.five:active{color:chocolate;}

</style>
</head>
<body>
<h1 align:"centre">Checkout these links for coding preparation</h1>
<h2><ul><li><a class="one" href="https://www.w3schools.com/"
target="_blank">W3schools.com</a></li>
<li><a class="two" href="https://www.codecademy.com/" target="_blank">Codeacademy</a></li>
<li><a class="three" href="https://developer.mozilla.org/en-US/" target="_blank">MDN Web
Docks</a></li>
<li><a class="four" href="https://www.coursera.org/" target="_blank">Coursera</a></li>
<li><a class="five" href="https://www.guvi.in/" target="_blank">GUVI</a></li></ul></h2>
</body>
</html>

OUTPUT:
EXPERIMENT-8

AIM: Js VALIDATION: Write JavaScript to validate the following fields of the above
registration page.
1. Name (Name should contain alphabets and the length should not be less than 6
characters).
2. Password (Password should not be less than 6 characters length).

CODE:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> JS Registration Form</title>
</head>
<body>

<form onsubmit="return validateForm()">


<table bgcolor="green" border="10px" align="center">
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" id="name" name="name" required></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password" required></td>
</tr>
<tr>
<td colspan="2"align="center">
<button type="submit">Register</button>
</tr>
</form>

<script src="validation8.js"></script>
</body>
</html>
JAVASCRIPT:

function validateForm() {
const name = document.getElementById("name").value;
const password = document.getElementById("password").value;
if (!/^[A-Za-z]+$/.test(name) || name.length < 6) {
alert("Name must contain only alphabets and be at least 6 characters long.");
return false;
}
if (password.length < 6) {
alert("Password must be at least 6 characters long.");
return false;
}

alert("Validation successful!");
return true;
}

OUTPUT:
EXPERIMENT-9
AIM:Write JavaScript to validate the following fields of the above registration page.
1. Name (Name should contain alphabets and the length should not be less than 6
characters).
2. Password (Password should not be less than 6 characters length)
3.E-mailid (should not contain any invalid and must follow the standard
pattern([email protected])
4. Phone Number (Phone number should contain 10 digits only).

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body>
<form onsubmit="return validateForm()">
<table bgcolor="yellow" border="20px" align="center">
<tr>
<td>
<label for="email">Email:</label>
</td>
<td><input type="email" id="email" name="email" required></td>
<tr>
<td><label for="phoneNumber">Phone Number:</label></td>
<td><input type="text" id="phoneNumber" name="phoneNumber" required></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">Submit</button>
</td>
</tr>
</form>
<script>
function validateForm() {
const email = document.getElementById("email").value;
const phoneNumber = document.getElementById("phoneNumber").value;
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
alert("Invalid email format. It should follow the pattern: [email protected].");
return false;
}
const phonePattern = /^[0-9]{10}$/;
if (!phonePattern.test(phoneNumber)) {
alert("Phone number must contain exactly 10 digits.");
return false;
}
alert("Validation successful!");
return true;
}
</script>
</body></html>

Output:
EXPERIMENT-#10

AIM: Consider a small topic of your choice on which you can develop static
Webpages and try to implement all topics of html, CSS and Js within the topic.
Choose any one topic.
1. Your Own Portfolio
2. To-Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire

CODE:
MY Portforlio:
<!DOCTYPE html> css" integrity="sha512-
<html lang="en"> 5Hs3dF2AEPkpNAR7UiO
Hba+lRSJNeM2ECkwxUI
<head> xC1Q/FLycGTbNapWXB
<meta charset="UTF- 4tP889k5T5Ju8fs4b1P5z/i
8"> B4nMfSQ=="
crossorigin="anonymous"
<meta
referrerpolicy="no-
name="viewport"
referrer" />
content="width=device-
width, initial-scale=1.0"> <style>
<title>My *{
Portfolio</title> margin: 0;
<link rel="stylesheet" padding: 0;
href="https://cdnjs.cloudfl
are.com/ajax/libs/font- box-sizing: border-
awesome/6.7.1/css/all.min. box;
font-family: font-size: 1.5em;
'Georgia', serif; margin: 0.5em 0;
} }
body { header a {
line-height: 1.6; color: #ffd700;
color: #333; text-decoration:
background-color: none;
#f5f5f5; font-weight: bold;
font-size: 16px; font-size: 1.1em;
} }
header { header a:hover {
background: linear- color: #fffacd;
gradient(135deg, #556b2f,
#8b4513); }

color: white; nav {

text-align: center; background:


#2f4f4f;
padding: 2em 0;
text-align: center;
}
padding: 1em 0;
header h1 {
}
font-size: 3em;
.nav-links {
margin-bottom:
0.5em; list-style: none;

} display: flex;

header h2 { justify-content:
center;
gap: 2em; padding: 2em;
} }
.nav-links li a { section h2 {
color: #f5f5f5; font-size: 2em;
text-decoration: color: #333;
none; margin-bottom:
font-size: 1.2em; 1em;
font-weight: bold; text-align: center;
padding: 0.5em border-bottom: 2px
1em; solid #8b4513;
} display: inline-
.nav-links li a:hover { block;

background: padding-bottom:
#4682b4; 0.5em;

color: #fff; }

} #about p {

.container { text-align: justify;

width: 80%; margin: 1em 0;

max-width: 1100px; font-size: 1.1em;

margin: 2em auto; color: #555;

background: #fff; line-height: 1.8;

border-radius: 8px; }

box-shadow: 0 4px .skills-list {


6px rgba(0, 0, 0, 0.1); display: flex;
flex-wrap: wrap; background:
gap: 1em; #f9fafb;

justify-content: }
center; .project h3 {
list-style: none; color: #8b4513;
padding: 0; font-size: 1.8em;
} margin-bottom:
.skills-list li { 0.5em;

background: }
#8b4513; .project a {
color: #fff; color: #4682b4;
padding: 0.5em text-decoration:
1em; none;
border-radius: 5px; font-weight: bold;
font-size: 1.1em; }
font-weight: bold; .project a:hover {
} text-decoration:
.project { underline;

margin-bottom: color: #5f9ea0;


2em; }
padding: 1.5em; #contact p {
border: 1px solid text-align: center;
#ddd; font-size: 1.2em;
border-radius: 8px; margin: 1em 0;
color: #555; padding: 2em 0;
} margin-top: 2em;
#contact a { }
color: #8b4513;
text-decoration: footer p {
none; font-size: 2em;
font-weight: bold; font-weight: bold;
} color: #ffd700;
#contact a:hover { text-shadow: 2px 2px
color: #4682b4; 4px rgba(0, 0, 0, 0.5);
} margin: 0;
<footer> }
<div class="container"> </style>
<p>Thanks for </head>
visiting...</p> <body>
</div> <header>
</footer> <div
class="box1"><img
<style> src="WhatsApp Image
2024-03-05 at
footer { 16.52.31_dd0379c7.jpg"
background: #2f4f4f; height="150"
width="120"></div>
color: #f5f5f5;
<h1>Manas
text-align: center;
Omar</h1>
<h2>Web Developer | <li><a
Graphic Designer | href="#projects">Projects
Competitive </a></li>
Programmer</h2> <li><a
<a href="#contact">Contact
href="https://www.linkedi </a></li>
n.com/in/kshitiz-srivastav- </ul>
a87028333/"
target="_blank"><i </nav>
class="fa-brands fa- <section id="about"
linkedin"></i> class="container">
LinkedIn</a>
<h2>About Me</h2>
<a
<p>Hello! I’m a
href="https://github.com/
passionate graphic
Kshitiz-2027"
designer with experience
target="_blank"><i
in creating clean,
class="fa-brands fa-
responsive designs. I
github"></i> GitHub</a>
specialize in building UI
</header> for websites and social
<nav> media posts for different
organizations.</p>
<ul class="nav-
links"> <p>I’m a quick
learner who thrives in
<li><a collaborative
href="#about">About</a> environments but is also
</li> comfortable working
<li><a independently. Whether
href="#skills">Skills</a>< it's building any design, a
/li> portfolio for a client, or a
custom web design, I’m <h3>Project 1:
dedicated to delivering Spam Free Zone</h3>
top-notch solutions.</p> <p>A responsive e-
<p>When I’m not commerce site to showcase
creating anything, I enjoy my skills and user-
listening to new and responsive approach. <a
creative ideas.</p> href="#">View
</section> Project</a></p>

<section id="skills" </div>


class="container"> <div class="project">
<h2>Skills</h2> <h3>Project 2:
<ul class="skills- Content Writing
list"> Page</h3>

<li>HTML</li> <p>To create a


source for mindful
<li>CSS</li> creators to write their
<li>Python</li> content. <a
href="webD7.html">View
<li>Figma</li>
Project</a></p>
<li>Canva</li>
</div>
</ul>
</section>
</section>
<section id="contact"
<section id="projects" class="container">
class="container">
<h2>Contact
<h2>Projects</h2> Details</h2>
<div class="project"> <p>Feel free to reach
out to me via email at <a
href="manasomar90@gm
ail.com">manasomar90@
gmail.com</a></p>
</section>
<footer>
<div
class="container">
<p>Thanks for
visiting...</p>
</div>
</footer>
</body>
</html>
Experiment-#11
AIM: Design a simple Calculator using HTML, CSS and JavaScript.
CODE:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button{
background-color: chartreuse;
font-variant-caps: all-petite-caps;
width:100px;
height:100px;
align-items: center;
border-radius: 30%;

}
input{
width:200px;
text-align: right;
height:100px;
background-color: yellow;
}
table{
size: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<center>
<caption><h3>Simple Calculator</h3></caption>
<div>
<table border="1" align="center">
<tr>
<td colspan="2"><input type="text" id="clear"></td>
<td><button onclick="backspace()" id="clear">DEL</button></td>
<td> <button onclick="ac()" id="clear">AC</button></td>
</tr>
<tr>
<td><button onclick="show(1)" id="clear">1</button></td>
<td><button onclick="show(2)" id="clear">2</button></td>
<td><button onclick="show(3)" id="clear">3</button></td>
<td><button onclick="show('+')" id="clear">+</button></td>
</tr>
<tr>
<td><button onclick="show(4)" id="clear">4</button></td>
<td><button onclick="show(5)" id="clear">5</button></td>
<td><button onclick="show(6)" id="clear">6</button></td>
<td><button onclick="show('-')" id="clear">-</button></td>
</tr>
<tr>
<td><button onclick="show(7)" id="clear">7</button></td>
<td><button onclick="show(8)" id="clear">8</button></td>
<td><button onclick="show(9)" id="clear">9</button></td>
<td><button onclick="show('')" id="clear">*</button></td>
</tr>
<tr>
<td><button onclick="show(0)" id="clear">0</button></td>
<td><button onclick="show('%')" id="clear">%</button></td>
<td><button onclick="show('/')" id="clear">/</button></td>
<td><button onclick="cal()" id="clear">=</button></td>
</tr>
</table>
</div>
</center>
<script src="cal.js"></script>
</body>
</html>

JS:
function ac(){
document.getElementById("clear").value="";
}
function backspace(){
const display = document.getElementById("clear");
display.value = display.value.slice(0,-1);
}
function show(input){
document.getElementById("clear").value+=input;
}

function cal(){
document.getElementById("clear").value=eval(document.getElementById("clear").value);
document.getElementById("clear").value=output;
}
OUTPUT:
Experiment-#12
AIM: Design a Age Calculator using HTML, CSS and JavaScript.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button{
background-color: yellowgreen;
text-decoration: solid;
text-align: center;
}
div{
height: 200px;
width: 500px;
border: 3px solid black;
border-radius: 10px;
background-color: aqua;
}
button:hover{
background-color: yellow;
}
</style>
</head>
<body>
<center>
<div>
<h1>AGE CALCULATOR</h1><br>
<input type="date" id="date"><br><br>
<input type="button" class="btn" value="Calculate Age" onclick="calculateAge()">
<p id="result"></p>
</div>
</center>
<script>
function calculateAge() {
const date= document.getElementById("date").value;
const result= document.getElementById("result");
if (!date) {
result.textContent = "Please Select a Valid Date";
result.style.color = "red";
return;
}
const dateObj= new Date(date);
const today = new Date();

let years=today.getFullYear() - dateObj.getFullYear();


let months=today.getMonth() - dateObj.getMonth();
let days = today.getDate() - dateObj.getDate();

if(days < 0)
{
months--;
days += new Date(today.getFullYear(),today.getMonth(),0).getDate();
}
if(months < 0)
{
years--;

You might also like