Skip to content

Commit 66bf998

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1855 from Rafiul-Omar2022/Rafiul-Omar
bringing calculator and heading block at center of the page
2 parents a1d540b + feffc59 commit 66bf998

2 files changed

Lines changed: 50 additions & 54 deletions

File tree

‎Projects/Age Calculator/index.html‎

Lines changed: 46 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -8,68 +8,61 @@
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-
16-
<input type="date" id="date">
17-
<button onclick="calculateAge()">Calculate</button>
18-
</div>
19-
<p id="result"></p>
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>
2017
</div>
21-
18+
<p id="result"></p>
2219
</div>
20+
</div>
21+
<script>
22+
let userInput = document.getElementById("date")
23+
userInput.max = new Date().toISOString().split("T")[0];
2324

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 `;
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();
6431

32+
let today = new Date();
6533

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

38+
let d3, m3, y3;
6739

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;
6850
}
69-
function getDaysInMonth(year,month){
70-
return new Date(year,month,0).getDate();
51+
else {
52+
m3--;
53+
d3 = getDaysInMonth(y1, m1) + d2 - d1;
7154
}
55+
if (m3 < 0) {
56+
m3 = 11;
57+
y3--;
58+
}
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+
}
7265

73-
</script>
66+
</script>
7467
</body>
7568
</html>

‎Projects/Age Calculator/style.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,22 @@
55
box-sizing: border-box;
66
}
77
.container{
8+
display: flex;
9+
justify-content: center;
810
width: 100%;
911
min-height: 100vh;
1012
background: linear-gradient(90deg, rgba(9,9,121,1) 8%, rgba(0,241,255,1) 100%, rgba(0,212,255,1) 100%);
1113
color: #fff;
12-
padding: 10px;
1314
}
1415
.calculator{
1516
width: 100%;
1617
max-width: 600px;
1718
margin-left: 10%;
1819
margin-top: 10%;
20+
margin-right: 10%;
1921
}
2022
.calculator h1{
23+
text-align: center;
2124
font-size: 60px;
2225
color: #ffff76;
2326
}

0 commit comments

Comments
 (0)