Hello everyone. Welcome to yet another exciting tutorial from Coding artist. In today’s tutorial, we will learn how to find out all the leap years within a given range. To build this project, we need HTML, CSS and Javascript.
Let us take a look at how this project works. The project consists of two number input fields. It also includes a ‘Get Leap Years’ Button. The user enters the start year into the first input field and the end year into the second one. Then the user clicks on the ‘Get Leap Years’ Button. When the user clicks on this button, we display the number of leap years between the start year and the end year. We also list all the leap years in this given range.
This is a beginner-friendly javascript project. If you are looking for more advanced or complex tutorials, you can check out this playlist here. It consists of about 70+ javascript projects with difficulties ranging from easy to complex.
Video Tutorial:
If you prefer watching a video tutorial rather than reading this blog post, you can check out this video down below. Also, subscribe to my youtube channel, where I post new tricks, tips and tutorials regularly.
Project Folder Structure:
Now before we start coding, let us create the project folder structure. We name the project folder – ‘Leap Years Between A Range’. Inside this folder, we have three files. These files are index.html, style.css and script.js. They are the HTML document, the stylesheet and the script file.
HTML:
We start with the HTML section. Firstly copy the code below and paste it into your HTML document. This creates the structure and layout necessary for our project.
CSS:
Hello everyone. Welcome to yet another exciting tutorial from Coding artist. In today’s tutorial, we will learn how to find out all the leap years within a given range. To build this project, we need HTML, CSS and Javascript.
Let us take a look at how this project works. The project consists of two number input fields. It also includes a ‘Get Leap Years’ Button. The user enters the start year into the first input field and the end year into the second one. Then the user clicks on the ‘Get Leap Years’ Button. When the user clicks on this button, we display the number of leap years between the start year and the end year. We also list all the leap years in this given range.
This is a beginner-friendly javascript project. If you are looking for more advanced or complex tutorials, you can check out this playlist here. It consists of about 70+ javascript projects with difficulties ranging from easy to complex.
Video Tutorial:
If you prefer watching a video tutorial rather than reading this blog post, you can check out this video down below. Also, subscribe to my youtube channel, where I post new tricks, tips and tutorials regularly.
Project Folder Structure:
Now before we start coding, let us create the project folder structure. We name the project folder – ‘Leap Years Between A Range’. Inside this folder, we have three files. These files are index.html, style.css and script.js. They are the HTML document, the stylesheet and the script file.
HTML:
We start with the HTML section. Firstly copy the code below and paste it into your HTML document. This creates the structure and layout necessary for our project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Leap Years Between A Range</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="input-wrapper">
<label for="start-year">Start Year:</label>
<input type="number" value="1900" id="start-year" />
</div>
<div class="input-wrapper">
<label for="end-year">End Year:</label>
<input type="number" value="2022" id="end-year" />
</div>
</div>
<button id="get-leap-years">Get Leap Years</button>
<div id="result"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style these elements using CSS. To do this, copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f5c431;
}
.container {
background-color: #ffffff;
width: 90vw;
max-width: 37.5em;
position: absolute;
padding: 3em 1.8em;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border-radius: 8px;
box-shadow: 0 1em 2em rgba(112, 90, 23, 0.3);
}
.row {
width: 100%;
display: flex;
justify-content: space-between;
gap: 1.8em;
}
.input-wrapper {
width: 100%;
}
label {
font-weight: 600;
color: #000533;
}
input {
display: block;
width: 100%;
font-size: 1.3em;
color: #363a5f;
margin-top: 0.5em;
padding: 0.25em 0.5em;
border: none;
outline: none;
border-bottom: 2px solid #000533;
}
input:focus {
border-bottom-color: #f5c431;
}
button {
font-size: 1.25em;
margin: 1.25em 0 1.75em 0;
width: 100%;
background-color: #f5c431;
color: #000533;
border: none;
padding: 0.6em 0;
border-radius: 1.25em;
}
#result span {
display: block;
line-height: 2;
text-align: justify;
color: #363a5f;
margin-top: 1em;
}
#result b {
font-size: 1.2em;
display: block;
line-height: 1.4em;
font-weight: 600;
color: #000533;
text-align: center;
}
Javascript:
Finally, we add functionality to this project. We use javascript to implement the logic. Now copy the code below and paste it into your script file.
//Initial References
let result = document.getElementById("result");
let btn = document.getElementById("get-leap-years");
//Get Leap years when the button is clicked
btn.addEventListener("click", () => {
//Get values from the input fields
//Number() converts string value to number
let startYear = Number(document.getElementById("start-year").value);
let endYear = Number(document.getElementById("end-year").value);
//If both start and end year are invalid
if (
(startYear < 1582 || startYear > 2999) &&
(endYear < 1582 || endYear > 2999)
) {
result.innerHTML = `<b>The start year and end year should be greater than 1581 and less than 3000.</b>`;
}
//If start year is greater than end year
else if (startYear > endYear) {
result.innerHTML = `<b>End year should be greater than the start year.</b>`;
}
//If start year is invalid
else if (startYear < 1582 || startYear > 2999) {
result.innerHTML = `<b>The start year should be greater than 1581 and less than 3000.</b>`;
}
//If end year is invalid
else if (endYear < 1582 || endYear > 2999) {
result.innerHTML = `<b>The end year should be greater than 1581 and less than 3000.</b>`;
}
//If both start and end years are valid
else {
//Empty array to store the leap years
let leapYears = [];
for (let i = startYear; i <= endYear; i++) {
//Determine if a year is a leap year
//If true push it into leapYears[]
if ((i % 4 == 0 && i % 100 != 0) || i % 400 == 0) {
leapYears.push(i);
}
}
//Display leap years in result div
//toString() returns a string with comma seperated values
//Use combo of split() and join() to replace ',' with ', '
result.innerHTML = `<b>There are ${
leapYears.length
} leap years between ${startYear} & ${endYear}.</b><span>${leapYears
.toString()
.split(",")
.join(", ")}</span>`;
}
});
Our project is now ready. If you have any issues while creating this code, you can download the source code by clicking on the download button below. Also, if you have any queries, suggestions or feedback, you can comment here down below.
Happy Coding!
