Find Leap Years In A Given Range using JavaScript
Hello, today we’re going to learn how to use HTML, CSS & JavaScript to create a Find Leap Years in a Given Range. By following these instructions, you can simply make this Find Leap Years in a Given Range in HTML, CSS & JavaScript. Simply by adhering to the procedures mentioned below, you will be able to develop this amazing Find Leap Years in a Given Range.
Project Description
Step 1
The HTML (Hypertext Markup Language) will help us to create the structure for the list with some necessary attributes and elements to make Find Leap Years In A Given Range Project.
Step 2
Then we will use CSS (Cascading Stylesheet) which will help us to style or design the project with suitable padding and alignment in the Find Leap Years In A Given Range Project.
Step 3
At last we will use JS (JavaScript) which will add a logic to make the Find Leap Years In A Given Range functioning from the user end.
I hope you have got an idea about the project.
HTML Code for Find Leap Years In A Given Range
<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>First we’ll start with creating the structure of the Find Leap Years In A Given Range project for that as you can see the above code we have used all the necessary elements & attributes to setup the structure. Let us know code the CSS part to add styling and aligned the tags.
CSS Code for Find Leap Years In A Given Range
Portfolio Website using HTML and CSS (Source Code)
* {
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;
}Second comes the CSS code, which is mentioned above in that we have styled for the structure we have padded as well as aligned the Find Leap Years In A Given Range project so that it is properly situated and doesn’t get messy with suitable CSS elements. Now we have created the structure using HTML and styled the webpage using CSS its time to add the functionality using JavaScript in this project.
JavaScript Code for Find Leap Years In A Given Range
//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>`;
}
});Last stage of the project the JavaScript in which we have added the logical and coded as per the requirement with some conditions. In this script we have define condition for some scenario like when the year is valid or invalid. Let us see the Final Output of the project Find Leap Years In A Given Range using HTML, CSS & JavaScript (Source Code).
Output
Live Preview of Find Leap Years In A Given Range using JavaScript
See the Pen
Leap Years by Harsh Sawant (@harshh9)
on CodePen.
We have successfully created our Find Leap Years In A Given Range using HTML, CSS & JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
If you find out this Blog helpful, then make sure to search codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Code Idea – codingartist
Written By – Harsh Sawant
Code By – @harshh9
