Skip to content

Commit a3cef43

Browse files
Nivedita-coderNivedita-coder
authored
Merge pull request Nivedita-coder#11 from AnamarijaJ/main
add Age in Days Calculator
2 parents 7a291d7 + 8845161 commit a3cef43

3 files changed

Lines changed: 76 additions & 0 deletions

File tree

‎Age in Days/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Your Age in Days</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;1,400&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
13+
<h1><strong>Your Age in Days</strong></h1>
14+
<h3>Let's calculate how many days you are old</h3> <br><br>
15+
16+
<label for="bday">Your date of birth: </label>
17+
<input type="date" id="bday"> <br><br><br>
18+
19+
<input type="button" class="button" value="Calculate" onclick="calculate();"> <br><br><br>
20+
21+
<input type="text" id="result"> <br><br>
22+
23+
<script src="script.js" charset="utf-8"></script>
24+
</body>
25+
26+
</html>

‎Age in Days/script.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
function calculate() {
2+
3+
const bday = Date.parse(document.getElementById("bday").value);
4+
const today = Date.now();
5+
const calc = Math.floor((today - bday) / (24 * 3600 * 1000));
6+
const result = document.getElementById("result");
7+
8+
9+
result.style.display = "block";
10+
result.value = "You are " + calc + " days old!";
11+
12+
}

‎Age in Days/style.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
body {
2+
text-align: center;
3+
background-color: #F0F4EF;
4+
margin-top: 10%;
5+
font-family: 'Open Sans', sans-serif;
6+
}
7+
8+
h1 {
9+
color: #344966;
10+
font-size: 55px;
11+
}
12+
13+
.button {
14+
background-color: #344966;
15+
color: #F0F4EF;
16+
height: 50px;
17+
width: 100px;
18+
border-radius: 10%;
19+
font-family: 'Open Sans', sans-serif;
20+
font-size: 1.03em;
21+
}
22+
23+
.button:hover {
24+
transform: scale(1.05) perspective(1px);
25+
}
26+
27+
#bday {
28+
background-color: #DEE9F7;
29+
}
30+
31+
#result {
32+
margin: 0 auto;
33+
display: none;
34+
border: none;
35+
background-color: #DEE9F7;
36+
color: #0D1821;
37+
font-size: 30px;
38+
}

0 commit comments

Comments
 (0)