Skip to content

Commit f4293e0

Browse files
TusharKesarwaniTusharKesarwani
authored
Revert "bringing calculator and heading block at center of the page"
1 parent 7d93462 commit f4293e0

2 files changed

Lines changed: 54 additions & 50 deletions

File tree

‎Projects/Age Calculator/index.html‎

Lines changed: 53 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -8,61 +8,68 @@
88
<link rel="stylesheet" href="style.css">
99
</head>
1010
<body>
11-
<div class="container">
12-
<div class="calculator">
13-
<h1>Age Calculator</h1>
14-
<div class="input-box">
15-
<input type="date" id="date">
16-
<button onclick="calculateAge()">Calculate</button>
11+
<div class="container">
12+
<div class="calculator">
13+
<h1>Age Calculator</h1>
14+
<div class="input-box">
15+
16+
<input type="date" id="date">
17+
<button onclick="calculateAge()">Calculate</button>
18+
</div>
19+
<p id="result"></p>
1720
</div>
18-
<p id="result"></p>
21+
1922
</div>
20-
</div>
21-
<script>
22-
let userInput = document.getElementById("date")
23-
userInput.max = new Date().toISOString().split("T")[0];
2423

25-
let result = document.getElementById("result");
26-
function calculateAge() {
27-
let birthDate = new Date(userInput.value);
28-
let d1 = birthDate.getDate();
29-
let m1 = birthDate.getMonth() + 1;
30-
let y1 = birthDate.getFullYear();
24+
<script>
25+
let userInput=document.getElementById("date")
26+
userInput.max=new Date().toISOString().split("T")[0];
27+
28+
let result=document.getElementById("result");
29+
30+
function calculateAge(){
31+
let birthDate=new Date(userInput.value);
32+
let d1=birthDate.getDate();
33+
let m1=birthDate.getMonth()+1;
34+
let y1=birthDate.getFullYear();
35+
36+
let today=new Date();
37+
38+
let d2=today.getDate();
39+
let m2=today.getMonth()+1;
40+
let y2=today.getFullYear();
41+
42+
let d3,m3,y3;
43+
44+
y3=y2-y1;
45+
if(m2>=m1){
46+
m3=m2-m1;
47+
}
48+
else{
49+
y3--;
50+
m3=12+m2-m1;
51+
}
52+
if(d2>=d1){
53+
d3=d2-d1;
54+
}
55+
else{
56+
m3--;
57+
d3=getDaysInMonth(y1,m1)+d2-d1;
58+
}
59+
if(m3<0){
60+
m3=11;
61+
y3--;
62+
}
63+
result.innerHTML=`You are <span>${y3}</span> years, <span>${m3}</span> months and <span>${d3}</span> days old `;
3164

32-
let today = new Date();
3365

34-
let d2 = today.getDate();
35-
let m2 = today.getMonth() + 1;
36-
let y2 = today.getFullYear();
3766

38-
let d3, m3, y3;
3967

40-
y3 = y2 - y1;
41-
if (m2 >= m1) {
42-
m3 = m2 - m1;
43-
}
44-
else {
45-
y3--;
46-
m3 = 12 + m2 - m1;
47-
}
48-
if (d2 >= d1) {
49-
d3 = d2 - d1;
50-
}
51-
else {
52-
m3--;
53-
d3 = getDaysInMonth(y1, m1) + d2 - d1;
5468
}
55-
if (m3 < 0) {
56-
m3 = 11;
57-
y3--;
69+
function getDaysInMonth(year,month){
70+
return new Date(year,month,0).getDate();
5871
}
59-
result.innerHTML = `You are <span>${y3}</span> years, <span>${m3}</span> months and <span>${d3}</span> days old `;
60-
61-
}
62-
function getDaysInMonth(year, month) {
63-
return new Date(year, month, 0).getDate();
64-
}
6572

66-
</script>
73+
</script>
6774
</body>
6875
</html>

‎Projects/Age Calculator/style.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@
55
box-sizing: border-box;
66
}
77
.container{
8-
display: flex;
9-
justify-content: center;
108
width: 100%;
119
min-height: 100vh;
1210
background: linear-gradient(90deg, rgba(9,9,121,1) 8%, rgba(0,241,255,1) 100%, rgba(0,212,255,1) 100%);
1311
color: #fff;
12+
padding: 10px;
1413
}
1514
.calculator{
1615
text-align: center;
@@ -21,10 +20,8 @@
2120
max-width: 600px;
2221
margin-left: 10%;
2322
margin-top: 10%;
24-
margin-right: 10%;
2523
}
2624
.calculator h1{
27-
text-align: center;
2825
font-size: 60px;
2926
color: #ffff76;
3027
}

0 commit comments

Comments
 (0)