Age Calculator Using JavaScript

By -

 Code is given below.

1.HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Age Calculator</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="style.css">

<script src="age.js"></script>
</head>
<body>
<div class="shadow-lg mb-5 bg-body rounded">
<div class="sec">
<header>
<h1>Age Calculator</h1>
</header>
<input type="text" id="birth_year" placeholder="Enter your birth year" required><br>
<button onclick="getAge()">SUBMIT</button>
<p id="result"></p>
</div>
</div>
</body>
</html>


2.CSS

        body
 {
 margin: 0;
 padding: 0;
 background: #D0D3D4;

}
 h1
 {
 color: #5DADE2;
 font-size:35px;
 font-family: 'Zen Tokyo Zoo', cursive;
 padding: 8px 0px;
 }
 input
 {
 background: none;
 outline: none;
 border: none;
 padding: 5px;
 margin: 10px;
 border-bottom: 1px solid #111;
 }
 .shadow-lg
 {
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 position: absolute;
 width:470px;
 text-align: center;
 padding: 5px;
 }
 button
 {
 border-radius:25px;
 background: #5DADE2;
 padding: 3px 45px;
 outline: none;
 border:none ;
 margin: 10px 0;
 }
 button:hover
 {
 background: #3498DB;
 color: #fff;
 }
 p
 {
 font-size: 20px;
 color: #E59866;
 padding: 10px 0 5px 0;
}



3.JavaScript

        let d=new Date();
 let present_year=d.getFullYear();
 let birth_year=document.getElementById("birth_year");
 function getAge()
 {
if(isNaN(birth_year.value) )
 {
 if(confirm('Year must be integer !!!'))
 {
 window.location.reload();
 }
}
 else if (birth_year.value=='')
 {
 if(confirm('It must be filled out !!!'))
 {
 window.location.reload();
 }
 }
 else if(birth_year.value==0)
 {
 if(confirm('0 cannot be year !!!'))
 {
 window.location.reload();
 }
}
 else if (birth_year.value>present_year)
 {
 if(confirm('Year cannot be greater than present year ('+present_year+')'))
 {
 window.location.reload();
 }
 }
 else
 {
 let present_age=present_year - birth_year.value;
 document.getElementById("result").innerHTML="Your Present Age is : "+present_age+" years.";
 }
}


OUTPUT

Fig. Before giving input


Fig. After giving input

                  

    Thank You

Comments

Post a Comment