Skip to content

Commit 190d4e8

Browse files
shloka-guptashloka-gupta
authored
Merge pull request #118 from siddhi-244/siddhi
Added Age calculator!!
2 parents 1b6c4cd + 89647d6 commit 190d4e8

File tree

4 files changed

+215
-0
lines changed

4 files changed

+215
-0
lines changed

‎age-calculator/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
### Age Calculator
2+
3+
Age Calculator website where you can input your birth date and get the Age
4+
in days,months and years.
5+
6+
### Use of the Project:
7+
A person's age can be calculated in days,months and years. It can be used
8+
in offices,malls etc.
9+
10+
### Used Technologies
11+
* HTML5
12+
* CSS3
13+
* JavaScript
14+
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Start Calculating!!
29+
---
30+
31+
## Screenshots
32+
![age-calci](https://user-images.githubusercontent.com/69195262/124578604-fa787f80-de6b-11eb-9c74-b1dcf3cc0b4f.png)
33+

‎age-calculator/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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"> </span>
16+
<p>YEARS</p>
17+
</div>
18+
<div>
19+
<span id="months"> </span>
20+
<p>MONTHS</p>
21+
</div>
22+
<div>
23+
<span id="days"> </span>
24+
<p>DAYS</p>
25+
</div>
26+
</div>
27+
</div>
28+
<script type="text/javascript" src="script.js"></script>
29+
</body>
30+
</html>

‎age-calculator/script.js

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

‎age-calculator/style.css

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
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+
}

0 commit comments

Comments
 (0)