Skip to content

Commit e2f3d3f

Browse files
gantavyamalviyagantavyamalviya
authored
Merge pull request #9 from siddhi-244/Siddhi-244
Added age calculator in javascript
2 parents 756036c + ff35f9e commit e2f3d3f

4 files changed

Lines changed: 231 additions & 0 deletions

File tree

‎Age Calculator/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
## Age Calculator
2+
This website is used to calculate age of a person !
3+
## Tech Stack
4+
- Html
5+
- CSS
6+
- JavaScript

‎Age Calculator/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
</head>
7+
<body>
8+
<div class="container">
9+
<div class="input">
10+
<input type="date" id="date">
11+
<button onclick="ageCalc()">Calculate</button>
12+
</div>
13+
<div class="output">
14+
<div>
15+
<span id="years">
16+
17+
</span>
18+
<p>YEARS</p>
19+
</div>
20+
<div>
21+
<span id="months">
22+
23+
</span>
24+
<p>MONTHS</p>
25+
</div>
26+
<div>
27+
<span id="days">
28+
29+
</span>
30+
<p>DAYS</p>
31+
32+
33+
34+
</div>
35+
36+
</div>
37+
<div class="wish" id="wish" >
38+
Happy birthday to you !!!
39+
</div>
40+
</div>
41+
<script type="text/javascript" src="script.js"></script>
42+
</body>
43+
</html>

‎Age Calculator/script.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
const months=[31,28,31,30,31,30,31,31,30,31,30,31];
2+
3+
function ageCalc(){
4+
let today=new Date();
5+
let inputDate= new Date(document.getElementById("date").value);
6+
let birthMonth,birthDate,birthYear;
7+
let birthDetails={
8+
date:inputDate.getDate(),
9+
month:inputDate.getMonth()+1,
10+
year:inputDate.getFullYear()
11+
}
12+
let currentYear=today.getFullYear();
13+
let currentMonth=today.getMonth()+1;
14+
let currentDay=today.getDate();
15+
16+
17+
leapChecker(currentYear);
18+
19+
20+
if(birthDetails.year>currentYear || (birthDetails.month > currentMonth && birthDetails.year == currentYear) ||
21+
(birthDetails.date > currentDay && birthDetails.month == currentMonth && birthDetails.year == currentYear)){
22+
alert("Enter Valid Date");
23+
24+
}
25+
birthYear=currentYear-birthDetails.year;
26+
if(currentMonth>=birthDetails.month){
27+
birthMonth=currentMonth-birthDetails.month;
28+
}
29+
else{
30+
birthYear--;
31+
birthMonth=12+currentMonth-birthDetails.month;
32+
}
33+
if(currentDay>=birthDetails.date){
34+
birthDate=currentDay-birthDetails.date;
35+
36+
}
37+
else{
38+
birthMonth--;
39+
let days=months[currentMonth-2];
40+
birthDate=days+currentDay- birthDetails.date;
41+
if(birthMonth<0){
42+
birthMonth=11;
43+
birthYear--;
44+
}
45+
46+
}
47+
48+
display(birthDate,birthMonth,birthYear);
49+
checkBirthday(birthDetails.date,birthDetails.month,birthDetails.year,currentDay,currentMonth,currentYear);
50+
51+
}
52+
function display(bdate,bmonth,byear){
53+
document.getElementById("years").textContent=byear;
54+
document.getElementById("months").textContent=bmonth;
55+
document.getElementById("days").textContent=bdate;
56+
57+
58+
}
59+
60+
function leapChecker(year){
61+
if(year%4==0 || (year%100==0 && year%400==0)){
62+
months[1]=29;
63+
}
64+
else{
65+
months[1]=28;
66+
}
67+
68+
69+
70+
71+
72+
}
73+
function checkBirthday(bdate,bmonth,byear,currentDay,currentMonth,currentYear){
74+
if(bdate==currentDay && bmonth===currentMonth && byear<currentYear){
75+
let msg=document.getElementById("wish");
76+
msg.className="bday";
77+
78+
}
79+
80+
}

‎Age Calculator/style.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
*,
2+
*:before,
3+
*:after{
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
8+
}
9+
body{
10+
background-color: #ee6cff;
11+
}
12+
.container{
13+
width: 40%;
14+
min-width: 450px;
15+
16+
position: absolute;
17+
transform: translate(-50%,-50%);
18+
left: 50%;
19+
top: 50%;
20+
padding : 50px 30px;
21+
22+
}
23+
.container *{
24+
font-family: sans-serif;
25+
border:none;
26+
outline: none;
27+
}
28+
.input{
29+
background-color: #080808;
30+
padding: 30px 25px;
31+
border-radius: 8px;
32+
box-shadow: 0 15px 20px rgba(0,0,0,0.3);
33+
margin-bottom: 50px;
34+
35+
36+
}
37+
input,button{
38+
height: 50px;
39+
background-color: #ffffff;
40+
color:#080808;
41+
font-weight: 500px;
42+
border-radius: 5px ;
43+
44+
}
45+
46+
input{
47+
width:60%;
48+
padding: 0 20px;
49+
font-size: 14px;
50+
}
51+
button{
52+
width: 30%;
53+
float: right;
54+
}
55+
.output{
56+
width: 100%;
57+
display: flex;
58+
justify-content: space-between;
59+
60+
}
61+
62+
.output div{
63+
height: 100px;
64+
width: 100px;
65+
background-color: #080808;
66+
border-radius: 5px;
67+
color:#fff;
68+
display: grid;
69+
text-align:center;
70+
align-items: center;
71+
padding: 20px 0;
72+
box-shadow: 0 15px 20px rgba(0,0,0,0.3);
73+
}
74+
span{
75+
font-size: 30px;
76+
font-weight: 500;
77+
}
78+
p{
79+
font-size: 14px;
80+
color: #707070;
81+
font-weight: 400;
82+
}
83+
.wish{
84+
visibility: hidden;
85+
86+
}
87+
.bday{
88+
visibility: visible;
89+
height: 60px;
90+
width: 300px;
91+
position: absolute;
92+
top:340px;
93+
left: 120px;
94+
font-weight: 600;
95+
font-size: 20px;
96+
background-color: #cdff87;
97+
border-radius: 15px;
98+
border:3px solid black;
99+
overflow: hidden;
100+
text-align: center;
101+
102+
}

0 commit comments

Comments
 (0)