Skip to content

Commit 4e694d9

Browse files
Yasir761Yasir761
committed
Made Novelty Calculator in pure HTML, CSS, Vanilla JavaScript
1 parent 0c21f22 commit 4e694d9

File tree

3 files changed

+161
-0
lines changed

3 files changed

+161
-0
lines changed

‎Novelty_Age_Calculator/Script.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
function calculateAge() {
2+
const birthdateInput = document.getElementById('birthdate');
3+
const ageInYearsElement = document.getElementById('age-in-years');
4+
const noveltyUnitsList = document.getElementById('novelty-units');
5+
6+
const birthdate = new Date(birthdateInput.value);
7+
const today = new Date();
8+
9+
const ageInMilliseconds = today - birthdate;
10+
const ageInSeconds = ageInMilliseconds / 1000;
11+
const ageInYears = ageInSeconds / (365 * 24 * 60 * 60);
12+
13+
ageInYearsElement.textContent = `Your age in years: ${ageInYears.toFixed(2)}`;
14+
15+
const planetaryYears = {
16+
'Mercury': ageInYears / 0.2408467,
17+
'Venus': ageInYears / 0.61519726,
18+
'Mars': ageInYears / 1.8808158,
19+
'Jupiter': ageInYears / 11.862615,
20+
'Saturn': ageInYears / 29.447498,
21+
'Uranus': ageInYears / 84.016846,
22+
'Neptune': ageInYears / 164.79132
23+
};
24+
25+
const fruitYears = {
26+
'Apple': ageInYears / 80,
27+
'Banana': ageInYears / 25,
28+
'Carrot': ageInYears / 2,
29+
'Grape': ageInYears / 60,
30+
'Watermelon': ageInYears / 90
31+
};
32+
33+
noveltyUnitsList.innerHTML = '';
34+
35+
for (const planet in planetaryYears) {
36+
const listItem = document.createElement('li');
37+
listItem.textContent = `${planet}: ${planetaryYears[planet].toFixed(2)} years`;
38+
noveltyUnitsList.appendChild(listItem);
39+
}
40+
41+
for (const fruit in fruitYears) {
42+
const listItem = document.createElement('li');
43+
listItem.textContent = `${fruit}: ${fruitYears[fruit].toFixed(2)} years`;
44+
noveltyUnitsList.appendChild(listItem);
45+
}
46+
}

‎Novelty_Age_Calculator/Style.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/* Reset some default styles */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
background-color: #f2f2f2;
11+
margin: 0;
12+
padding: 0;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
min-height: 100vh;
17+
}
18+
19+
.container {
20+
background-color: #ffffff;
21+
border-radius: 10px;
22+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
23+
max-width: 400px;
24+
width: 90%;
25+
text-align: center;
26+
padding: 20px;
27+
}
28+
29+
h1 {
30+
font-size: 28px;
31+
color: #333;
32+
margin-bottom: 20px;
33+
}
34+
35+
.label {
36+
font-size: 18px;
37+
color: #333;
38+
display: block;
39+
text-align: left;
40+
margin-top: 15px;
41+
}
42+
43+
.input-field {
44+
width: 100%;
45+
padding: 10px;
46+
margin-top: 8px;
47+
margin-bottom: 20px;
48+
border: 1px solid #ccc;
49+
border-radius: 5px;
50+
font-size: 16px;
51+
}
52+
53+
.button {
54+
background-color: #007bff;
55+
color: #fff;
56+
border: none;
57+
padding: 10px 20px;
58+
border-radius: 5px;
59+
font-size: 18px;
60+
cursor: pointer;
61+
}
62+
63+
.results {
64+
margin-top: 30px;
65+
}
66+
67+
.results h2 {
68+
font-size: 24px;
69+
margin-bottom: 10px;
70+
}
71+
72+
.results ul {
73+
list-style-type: none;
74+
padding: 0;
75+
}
76+
77+
.results li {
78+
font-size: 16px;
79+
margin: 5px 0;
80+
color: #333;
81+
}
82+
83+
/* Responsive design */
84+
85+
@media screen and (max-width: 768px) {
86+
.container {
87+
padding: 15px;
88+
}
89+
}

‎Novelty_Age_Calculator/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">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Age Calculator</title>
7+
<link rel="stylesheet" href="Style.css"> <!-- Include the CSS file -->
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Age Calculator</h1>
12+
<div class="input-container">
13+
<label for="birthdate" class="label">Enter your birthdate:</label>
14+
<input type="date" id="birthdate" class="input-field">
15+
<button onclick="calculateAge()" class="button">Calculate</button>
16+
</div>
17+
<div class="results">
18+
<h2>Your age:</h2>
19+
<p id="age-in-years" class="result"></p>
20+
<h2>Your age in novelty units:</h2>
21+
<ul id="novelty-units" class="result"></ul>
22+
</div>
23+
</div>
24+
<script src="Script.js"></script> <!-- Include the JavaScript file -->
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)