Skip to content

Commit 0f51fc4

Browse files
tajulafreentajulafreen
committedJul 20, 2024
solve linter errors
1 parent b296466 commit 0f51fc4

File tree

3 files changed

+90
-87
lines changed

3 files changed

+90
-87
lines changed
 

‎Source-Code/AgeCalculator/index.html

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Age Calculator</title>
7-
<link rel="stylesheet" href="style.css">
8-
</head>
9-
<body>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
1010
<div class="center">
11-
<div class="container">
11+
<div class="container">
1212
<p id="currDate"></p>
1313
<p>Enter the DOB in format: (MM/DD/YYYY)</p>
14-
<input type="text" placeholder="Enter your D.O.B" id="DOB">
14+
<input type="text" placeholder="Enter your D.O.B" id="DOB" />
1515
<button id="CalcAge">Calculate Age</button>
16-
</div>
17-
<div id="displayAge">
16+
</div>
17+
<div id="displayAge">
1818
<p id="age"></p>
19+
</div>
1920
</div>
20-
</div>
2121
<script src="script.js"></script>
22-
</body>
22+
</body>
2323
</html>

‎Source-Code/AgeCalculator/script.js

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
document.addEventListener("DOMContentLoaded", () => {
2-
const currDate = document.getElementById("currDate");
3-
const dateOfBirth = document.querySelector("#DOB");
4-
const calcAgeButton = document.getElementById("CalcAge");
5-
const displayAge = document.getElementById("displayAge");
6-
const ageText = document.getElementById("age");
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const currDate = document.getElementById('currDate');
3+
const dateOfBirth = document.querySelector('#DOB');
4+
const calcAgeButton = document.getElementById('CalcAge');
5+
const displayAge = document.getElementById('displayAge');
6+
const ageText = document.getElementById('age');
77
const today = new Date();
88

9-
currDate.innerText = `Today's Date is: ${today.toLocaleDateString("en-US")}`;
9+
currDate.innerText = `Today's Date is: ${today.toLocaleDateString('en-US')}`;
1010

11-
calcAgeButton.addEventListener("click", () => {
11+
calcAgeButton.addEventListener('click', () => {
1212
const birthDate = new Date(dateOfBirth.value);
1313
let age = today.getFullYear() - birthDate.getFullYear();
1414
const monthDifference = today.getMonth() - birthDate.getMonth();
1515

1616
if (
17-
monthDifference < 0 ||
18-
(monthDifference === 0 && today.getDate() < birthDate.getDate())
17+
monthDifference < 0
18+
|| (monthDifference === 0 && today.getDate() < birthDate.getDate())
1919
) {
20-
age--;
20+
age -= 1;
2121
}
2222

23-
displayAge.style.visibility = "visible";
23+
displayAge.style.visibility = 'visible';
2424
ageText.innerText = `You are ${age} years old.`;
2525
});
2626
});

‎Source-Code/AgeCalculator/style.css

+66-63
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,82 @@
1-
*{
2-
margin:0;
3-
padding:0;
4-
box-sizing:border-box;
5-
font-family:cursive;
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: cursive;
66
}
7-
.center{
8-
display:flex;
9-
justify-content:center;
10-
align-items:center;
11-
height:100vh;
7+
8+
.center {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
1213
}
13-
.container{
14-
display:flex;
15-
width:600px;
16-
/* margin:auto;
14+
15+
.container {
16+
display: flex;
17+
width: 600px;
18+
19+
/* margin:auto;
1720
margin-top:10%;
1821
margin-bottom:10%; */
19-
align-items:center;
20-
justify-content:center;
21-
flex-direction:column;
22-
background-color:rgb(169, 216, 80);
23-
box-shadow:8px 8px black;
24-
color:white;
25-
padding:5% 0%;
22+
align-items: center;
23+
justify-content: center;
24+
flex-direction: column;
25+
background-color: rgb(169, 216, 80);
26+
box-shadow: 8px 8px black;
27+
color: white;
28+
padding: 5% 0%;
2629
}
2730

28-
#currDate{
29-
font-size:30px;
30-
margin:20px;
31-
font-weight:bold;
31+
#currDate {
32+
font-size: 30px;
33+
margin: 20px;
34+
font-weight: bold;
3235
}
3336

34-
input{
35-
font-size:20px;
36-
padding:15px;
37-
margin:20px;
38-
text-align:center;
39-
border-radius:20px;
40-
border:1px solid yellow;
41-
cursor:pointer;
37+
input {
38+
font-size: 20px;
39+
padding: 15px;
40+
margin: 20px;
41+
text-align: center;
42+
border-radius: 20px;
43+
border: 1px solid yellow;
44+
cursor: pointer;
4245
}
4346

44-
button{
45-
font-size:20px;
46-
padding:10px 20px;
47-
border-radius:10px;
48-
border:none;
49-
background-color:yellow;
50-
color:black;
51-
margin:20px;
52-
text-transform: uppercase;
53-
font-weight:bold;
54-
cursor:pointer;
47+
button {
48+
font-size: 20px;
49+
padding: 10px 20px;
50+
border-radius: 10px;
51+
border: none;
52+
background-color: yellow;
53+
color: black;
54+
margin: 20px;
55+
text-transform: uppercase;
56+
font-weight: bold;
57+
cursor: pointer;
5558
}
5659

57-
button:hover{
58-
background-color:white;
59-
color:rgb(169, 216, 80);
60+
button:hover {
61+
background-color: white;
62+
color: rgb(169, 216, 80);
6063
}
6164

62-
#displayAge{
63-
display:flex;
64-
align-items:center;
65-
justify-content:center;
66-
width:620px;
67-
height:490px;
68-
background-color:rgb(91, 228, 141);
69-
border-radius:30px;
70-
position:absolute;
71-
visibility: hidden;
65+
#displayAge {
66+
display: flex;
67+
align-items: center;
68+
justify-content: center;
69+
width: 620px;
70+
height: 490px;
71+
background-color: rgb(91, 228, 141);
72+
border-radius: 30px;
73+
position: absolute;
74+
visibility: hidden;
7275
}
7376

74-
#age{
75-
color:white;
76-
font-size:50px;
77-
margin:20px;
78-
font-weight:bold;
79-
}
77+
#age {
78+
color: white;
79+
font-size: 50px;
80+
margin: 20px;
81+
font-weight: bold;
82+
}

0 commit comments

Comments
 (0)
Please sign in to comment.