Skip to content

Commit ef3b226

Browse files
Avdhesh-VarshneyAvdhesh-Varshney
committed
Leap Years In Range 😎
1 parent 22e531e commit ef3b226

7 files changed

Lines changed: 248 additions & 0 deletions

File tree

‎Projects/Leap_Years_In_A_Range/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# **LEAP YEARS IN A GIVEN RANGE**
2+
---
3+
4+
5+
## **Description 📃**
6+
- This project made by using HTML, CSS and JS
7+
- In this project, enter the start data and the last date in the input field
8+
- After pressing the enter or pressing the button, Leap years calculation is triggered by the javascript
9+
- After calculation, Showing the result to the user.
10+
11+
<br>
12+
13+
14+
## **Tech Stack 🎮**
15+
- HTML
16+
- CSS
17+
- JS
18+
19+
<br>
20+
21+
22+
## **Screenshot 📸**
23+
24+
![Leap_Years](https://github.com/TusharKesarwani/Front-End-Projects/assets/114330097/8e5cf34c-c1ad-4998-bbcd-4f5780b7d901)
25+
26+
<br>
27+
28+
29+
## **Author**
30+
31+
[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
32+
33+

‎Projects/Leap_Years_In_A_Range/favicon.ico‎

15 KB
Binary file not shown.

‎Projects/Leap_Years_In_A_Range/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
8+
<!-- Logo of the website -->
9+
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
10+
11+
<!-- Title -->
12+
<title>Leap Years In A Range</title>
13+
14+
<!-- Google Fonts -->
15+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
16+
17+
<!-- Stylesheet -->
18+
<link rel="stylesheet" href="style.css" />
19+
</head>
20+
21+
<body>
22+
<!-- Main container of the webpage -->
23+
<div class="container">
24+
<div class="row">
25+
<!-- Taking input of the starting year -->
26+
<div class="input-wrapper">
27+
<label for="start-year">Start Year:</label>
28+
29+
<input type="number" value="1900" id="start-year" />
30+
</div>
31+
32+
<!-- Taking input of the last year -->
33+
<div class="input-wrapper">
34+
<label for="end-year">End Year:</label>
35+
36+
<input type="number" value="2022" id="end-year" />
37+
</div>
38+
39+
</div>
40+
41+
<!-- But will trigger to calculate the leap year in the given range -->
42+
<button id="get-leap-years">Get Leap Years</button>
43+
44+
<div id="result"></div>
45+
46+
</div>
47+
48+
<!-- Script -->
49+
<script src="script.js"></script>
50+
</body>
51+
52+
</html>

‎Projects/Leap_Years_In_A_Range/script.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// Initial References
2+
let result = document.getElementById("result");
3+
let btn = document.getElementById("get-leap-years");
4+
5+
// Function calculate the leap year and send response to the user
6+
function leapYearCalc() {
7+
// Get values from the input fields
8+
// Number() converts string value to number
9+
let startYear = Number(document.getElementById("start-year").value);
10+
let endYear = Number(document.getElementById("end-year").value);
11+
12+
// If both start and end year are invalid
13+
if (
14+
(startYear < 1582 || startYear > 2999) &&
15+
(endYear < 1582 || endYear > 2999)
16+
) {
17+
result.innerHTML = `<b style="color: red;">The start year and end year should be greater than 1581 and less than 3000.</b>`;
18+
}
19+
20+
// If start year is greater than end year
21+
else if (startYear > endYear) {
22+
result.innerHTML = `<b style="color: red;">End year should be greater than the start year.</b>`;
23+
}
24+
25+
// If start year is invalid
26+
else if (startYear < 1582 || startYear > 2999) {
27+
result.innerHTML = `<b style="color: red;">The start year should be greater than 1581 and less than 3000.</b>`;
28+
}
29+
30+
// If end year is invalid
31+
else if (endYear < 1582 || endYear > 2999) {
32+
result.innerHTML = `<b style="color: red;">The end year should be greater than 1581 and less than 3000.</b>`;
33+
}
34+
35+
// If both start and end years are valid
36+
else {
37+
// Empty array to store the leap years
38+
let leapYears = [];
39+
for (let i = startYear; i <= endYear; i++) {
40+
// Determine if a year is a leap year
41+
// If true push it into leapYears[]
42+
43+
if ((i % 4 == 0 && i % 100 != 0) || i % 400 == 0) {
44+
leapYears.push(i);
45+
}
46+
}
47+
// Display leap years in result div
48+
// toString() returns a string with comma seperated values
49+
// Use combo of split() and join() to replace ',' with ', '
50+
result.innerHTML = `<b style="color: #f5c431;">There are ${leapYears.length
51+
} leap years between ${startYear} & ${endYear}.</b><span>${leapYears
52+
.toString()
53+
.split(",")
54+
.join(", ")}</span>`;
55+
}
56+
}
57+
58+
// Get Leap years when the button is clicked
59+
btn.addEventListener('click', leapYearCalc);
60+
61+
// Get leap years when enter button is pressed
62+
document.addEventListener('keyup', (event) => {
63+
if (event.key === 'Enter') {
64+
leapYearCalc();
65+
}
66+
});

‎Projects/Leap_Years_In_A_Range/style.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/* Default settings */
2+
* {
3+
padding: 0;
4+
margin: 0;
5+
box-sizing: border-box;
6+
font-family: "Poppins", sans-serif;
7+
text-decoration: none;
8+
}
9+
10+
body {
11+
background-color: #7e5eff;
12+
}
13+
14+
/* Fixing the styling of the container */
15+
.container {
16+
background-color: #ffffff;
17+
width: 90vw;
18+
max-width: 37.5em;
19+
position: absolute;
20+
padding: 3em 1.8em;
21+
transform: translate(-50%, -50%);
22+
left: 50%;
23+
top: 50%;
24+
border-radius: 8px;
25+
box-shadow: 0 1em 2em rgba(112, 90, 23, 0.3);
26+
}
27+
28+
.row {
29+
width: 100%;
30+
display: flex;
31+
justify-content: space-between;
32+
gap: 1.8em;
33+
}
34+
35+
/* Styling the input box */
36+
.input-wrapper {
37+
width: 100%;
38+
}
39+
40+
label {
41+
font-weight: 600;
42+
color: #000533;
43+
}
44+
45+
input {
46+
display: block;
47+
width: 100%;
48+
font-size: 1.3em;
49+
color: #363a5f;
50+
margin-top: 0.5em;
51+
padding: 0.25em 0.5em;
52+
border: none;
53+
outline: none;
54+
border-bottom: 2px solid #000533;
55+
}
56+
57+
input:focus {
58+
border-bottom-color: #7e5eff;
59+
}
60+
61+
/* Styling the button */
62+
button {
63+
font-size: 1.25em;
64+
margin: 1.25em 0 1.75em 0;
65+
width: 100%;
66+
background-color: #7e5eff;
67+
color: #000533;
68+
border: none;
69+
padding: 0.6em 0;
70+
border-radius: 1.25em;
71+
}
72+
73+
/* Styling the showing of the result */
74+
#result span {
75+
display: block;
76+
line-height: 2;
77+
text-align: justify;
78+
color: #363a5f;
79+
margin-top: 1em;
80+
}
81+
82+
#result b {
83+
font-size: 1.2em;
84+
display: block;
85+
line-height: 1.4em;
86+
font-weight: 600;
87+
color: #000533;
88+
text-align: center;
89+
}

‎img/projects/Leap_Years_In_A_Range.png‎

64.1 KB
Loading

‎projects.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -974,6 +974,14 @@ const projects = [
974974
"description":"This website can convert the morse code into the text and text into the morse code. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.",
975975
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Morse%20Code%20Convertor",
976976
"project-link":"Projects/Morse%20Code%20Convertor/index.html"
977+
},
978+
{
979+
"title":"Leap Years In A Range",
980+
"tags":["HTML","CSS","JavaScript"],
981+
"img":"img/projects/Leap_Years_In_A_Range.png",
982+
"description":"This website can find the number of leap years in between the ranges and enlist all the leap years between the range of years. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.",
983+
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Leap_Years_In_A_Range",
984+
"project-link":"Projects/Leap_Years_In_A_Range/index.html"
977985
}
978986

979987
]

0 commit comments

Comments
 (0)