Skip to content

Added age calculator in javascript #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gantavyamalviya merged 2 commits into from
Oct 1, 2022
Merged

Added age calculator in javascript #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bbd00de
Create README.md
siddhi-244 Oct 1, 2022
ff35f9e
Added source code !
siddhi-244 Oct 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions Age Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
## Age Calculator
This website is used to calculate age of a person !
## Tech Stack
- Html
- CSS
- JavaScript
43 changes: 43 additions & 0 deletions Age Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="input">
<input type="date" id="date">
<button onclick="ageCalc()">Calculate</button>
</div>
<div class="output">
<div>
<span id="years">

</span>
<p>YEARS</p>
</div>
<div>
<span id="months">

</span>
<p>MONTHS</p>
</div>
<div>
<span id="days">

</span>
<p>DAYS</p>



</div>

</div>
<div class="wish" id="wish" >
Happy birthday to you !!!
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
80 changes: 80 additions & 0 deletions Age Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
const months=[31,28,31,30,31,30,31,31,30,31,30,31];

function ageCalc(){
let today=new Date();
let inputDate= new Date(document.getElementById("date").value);
let birthMonth,birthDate,birthYear;
let birthDetails={
date:inputDate.getDate(),
month:inputDate.getMonth()+1,
year:inputDate.getFullYear()
}
let currentYear=today.getFullYear();
let currentMonth=today.getMonth()+1;
let currentDay=today.getDate();


leapChecker(currentYear);


if(birthDetails.year>currentYear || (birthDetails.month > currentMonth && birthDetails.year == currentYear) ||
(birthDetails.date > currentDay && birthDetails.month == currentMonth && birthDetails.year == currentYear)){
alert("Enter Valid Date");

}
birthYear=currentYear-birthDetails.year;
if(currentMonth>=birthDetails.month){
birthMonth=currentMonth-birthDetails.month;
}
else{
birthYear--;
birthMonth=12+currentMonth-birthDetails.month;
}
if(currentDay>=birthDetails.date){
birthDate=currentDay-birthDetails.date;

}
else{
birthMonth--;
let days=months[currentMonth-2];
birthDate=days+currentDay- birthDetails.date;
if(birthMonth<0){
birthMonth=11;
birthYear--;
}

}

display(birthDate,birthMonth,birthYear);
checkBirthday(birthDetails.date,birthDetails.month,birthDetails.year,currentDay,currentMonth,currentYear);

}
function display(bdate,bmonth,byear){
document.getElementById("years").textContent=byear;
document.getElementById("months").textContent=bmonth;
document.getElementById("days").textContent=bdate;


}

function leapChecker(year){
if(year%4==0 || (year%100==0 && year%400==0)){
months[1]=29;
}
else{
months[1]=28;
}





}
function checkBirthday(bdate,bmonth,byear,currentDay,currentMonth,currentYear){
if(bdate==currentDay && bmonth===currentMonth && byear<currentYear){
let msg=document.getElementById("wish");
msg.className="bday";

}

}
102 changes: 102 additions & 0 deletions Age Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;

}
body{
background-color: #ee6cff;
}
.container{
width: 40%;
min-width: 450px;

position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
padding : 50px 30px;

}
.container *{
font-family: sans-serif;
border:none;
outline: none;
}
.input{
background-color: #080808;
padding: 30px 25px;
border-radius: 8px;
box-shadow: 0 15px 20px rgba(0,0,0,0.3);
margin-bottom: 50px;


}
input,button{
height: 50px;
background-color: #ffffff;
color:#080808;
font-weight: 500px;
border-radius: 5px ;

}

input{
width:60%;
padding: 0 20px;
font-size: 14px;
}
button{
width: 30%;
float: right;
}
.output{
width: 100%;
display: flex;
justify-content: space-between;

}

.output div{
height: 100px;
width: 100px;
background-color: #080808;
border-radius: 5px;
color:#fff;
display: grid;
text-align:center;
align-items: center;
padding: 20px 0;
box-shadow: 0 15px 20px rgba(0,0,0,0.3);
}
span{
font-size: 30px;
font-weight: 500;
}
p{
font-size: 14px;
color: #707070;
font-weight: 400;
}
.wish{
visibility: hidden;

}
.bday{
visibility: visible;
height: 60px;
width: 300px;
position: absolute;
top:340px;
left: 120px;
font-weight: 600;
font-size: 20px;
background-color: #cdff87;
border-radius: 15px;
border:3px solid black;
overflow: hidden;
text-align: center;

}