Scribd
Upload
37 views

8 CSS Microproject

The document is an HTML page with JavaScript that calculates a person's age based on their date of birth entered. It contains input fields for the user to enter their date, month and year of birth. It also includes CSS styling to design the page layout and elements. When the submit button is clicked, the JavaScript code calculates the age in years, months and days between the date of birth and current date, and displays the result on the page.

Uploaded by

Scary Nightmare
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views

8 CSS Microproject

The document is an HTML page with JavaScript that calculates a person's age based on their date of birth entered. It contains input fields for the user to enter their date, month and year of birth. It also includes CSS styling to design the page layout and elements. When the submit button is clicked, the JavaScript code calculates the age in years, months and days between the date of birth and current date, and displays the result on the page.

Uploaded by

Scary Nightmare
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

<!

-- Age Calculator Using Javascript, css and html

Group No. 8

Group Members: 11. Mayuri Deo

16. Shrutika Vetal

18. Akshada Patil

67. Divya Patil

-->

<!DOCTYPE html>

<html>

<head>

<title> Age Calculator</title>

<style media="screen">

body{

font-family: Arial, Helvetica, sans-serif;

background-color: plum;

font-size: 15px;

line-height: 1.5;

padding: 0;

margin: 0;

*{

box-sizing: border-box;

}
.container{

width:520px;

height: auto;

margin: 100px auto;

background-color: floralwhite;

border-radius: 5px;

.base{

width: 100%;

margin: 0;

overflow: hidden;

display: block;

float: none;

.block{

width: 135px;

padding: 5px 20px;

margin-left: 20px;

display: inline-block;

float: left;

.base h4{
font-size: 26px;

text-align: center;

font-family: sans-serif;

font-weight: normal;

margin-top: 0px;

box-shadow: 0px 4px purple;

background: palevioletred;

font-size: 34px;

color: Purple ;

.title{

font-size: 20px;

text-align: left;

font-family: sans-serif;

font-weight: normal;

line-height: 0.5;

letter-spacing: 0.5px;

word-spacing: 2.7px;

color: darkviolet;

input[type=text] {

width: 140px;

margin: auto;

outline: none;
min-height: 50px;

border: 2px solid Orchid ;

padding: 12px;

background-color: MistyRose;

border-radius: 2px;

color: DarkViolet;

font-size: 17px;

input[type=text]:focus{

background-color: Thistle ;

border: 2px solid darkorchid;

outline: none;

input[type=button]{

width: 150px;

margin-left: 35%;

margin-top: 40px;

outline: none;

border: none;

border-radius: 3px;

background-color: DarkOrchid;

color: MistyRose;

padding: 14px 16px;

text-align: center;
font-size: 20px;

input[type=button]:hover{

background-color: DarkMagenta;

cursor: pointer;

#age{

display: block;

margin: 10px;

margin-top: 35px;

padding: 10px;

padding-bottom: 20px;

overflow: hidden;

font-family: verdana;

font-size: 23px;

font-weight: normal;

line-height: 1.5;

word-spacing: 2.7px;

color: Purple ;

</style>

</head>

<body>

<div class="container">
<form>

<div class="base">

<div class="enter">

<center><img src="Age.jpg" alt="Image"></center>

<h4><b><i>Age Calculator</i></b></h4>

</div>

<div class="block">

<p class="title">Date</p>

<input type="text" name="date" id="date" placeholder="dd" required="required" minlength="1"


maxlength="2" />

</div>

<div class="block">

<p class="title">Month</p>

<input type="text" name="month" id="month" placeholder="mm" required="required"


minlength="1" maxlength="2" />

</div>

<div class="block">

<p class="title">Year</p>

<input type="text" name="year" id="year" placeholder="yyyy" required="required" minlength="4"


maxlength="4" />

</div>

</div>

<div class="base">

<div class="enter">

<input type="button" name="submit" value="SUBMIT" onclick="age()" />

</div>

</div>
<div id="age"></div>

</form>

</div>

<script type="text/javascript">

function age() {

var d1 = document.getElementById('date').value;

var m1 = document.getElementById('month').value;

var y1 = document.getElementById('year').value;

var date = new Date();

var d2 = date.getDate();

var m2 = 1 + date.getMonth();

var y2 = date.getFullYear();

var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

if(d1 > d2){

d2 = d2 + month[m2 - 1];

m2 = m2 - 1;

if(m1 > m2){

m2 = m2 + 12;

y2 = y2 - 1;

var d = d2 - d1;
var m = m2 - m1;

var y = y2 - y1;

if ( (y > 0) && (m > 0) && (d > 0) )

var dob = y + " years, " + m + " months, and " + d + " days old.";

else if ( (y == 0) && (m == 0) && (d > 0) )

dob = "Only " + d + " days old!";

//when current month and date is same as birth date and month

else if ( (y > 0) && (m == 0) && (d == 0) )

dob = y + " years old. Happy Birthday!!";

else if ( (y > 0) && (m > 0) && (d == 0) )

dob = y + " years and " + m + " months old.";

else if ( (y == 0) && (m > 0) && (d > 0) )

dob = m + " months and " + d + " days old.";

else if ( (y > 0) && (m == 0) && (d > 0) )

dob = y + " years, and" + d + " days old.";

else if ( (m == 0) && (m > 0) && (m == 0) )

dob = m + " months old.";

//when current date is same as dob(date of birth)

else dob = "Welcome to Earth! <br> It's first day on Earth!";

//display the calculated age

return document.getElementById("age").innerHTML = dob;


}

</script>

<body>

<html>

You might also like