Scribd
Upload
3 views2 pages

3

Uploaded by

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

3

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Age Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Age Calculator</h1>
<form id="ageForm">
<label for="dob">Enter your Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<button type="submit">Calculate Age</button>
</form>
<div id="result" class="result">
<h3>Your Age: <span id="ageResult"></span></h3>
</div>
</div>
<script src="age-calculator.js"></script>
</body>
</html>

background-color: white;
border-radius: 8px;
padding: 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}

h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}

label {
font-size: 16px;
margin-bottom: 10px;
display: block;
color: #555;
}

input[type="date"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}

button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
border: none;
border-radius: 4px;
color: white;
font-size: 16px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

.result {
margin-top: 20px;
text-align: center;
display: none;
}

.result h3 {
font-size: 18px;
color: #333;
}

#ageResult {
font-size: 24px;
font-weight: bold;
color: #4CAF50;
}

You might also like