Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. Also, subscribe to my youtube channel, where I post new tips tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us look at the project folder structure. We create a project folder called – ‘Compare Dates’. Within this folder, we have two files – The first is index.html, and the second is style.css. I am including the script in the <body> element.
HTML:
We begin with the HTML code. The HTML code consists of elements that build the layout of our project. In our case, we need two date inputs with unique ids, a button and a p element.
Now copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Compare Dates</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="dates">
<input type="date" id="date-1" />
<input type="date" id="date-2" />
</div>
<button id="check">Check</button>
<p id="result">Input some value to get started</p>
</div>
<!-- Script -->
<script>
let result = document.getElementById("result");
let btn = document.getElementById("check");
btn.addEventListener("click", () => {
let date1 = document.getElementById("date-1").value;
let date2 = document.getElementById("date-2").value;
//If any date input is empty
if (date1.length == 0 || date2.length == 0) {
result.innerHTML = "<span>please enter valid dates</span>";
}
//Else
else {
if (date1 > date2) {
result.innerHTML = "Date 1 is <b>greater</b> than Date 2";
} else if (date1 < date2) {
result.innerHTML = "Date 1 is <b>smaller</b> than Date 2";
} else if (date1 == date2) {
result.innerHTML = "Date 1 is <b>equal</b> to Date 2";
}
}
});
</script>
</body>
</html>
CSS:
Next, we make use of CSS to style our project. You can skip the CSS code as it has nothing to do with the functionality. I have only used CSS only to make the output look more presentable.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #1b64f5;
}
.container {
background-color: #ffffff;
width: 31.25em;
padding: 6.25em 2.8em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border-radius: 0.62em;
}
.dates {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
input[type="date"] {
font-size: 1em;
border: 1px solid black;
}
p {
font-size: 1.12em;
color: #38395e;
text-align: center;
text-transform: capitalize;
background-color: #dae6fd;
padding: 0.8em 0;
}
button {
display: block;
position: relative;
width: 7.5em;
background-color: #1b64f5;
font-size: 1.1em;
color: #ffffff;
margin: 2.2em auto 1.2em auto;
border: none;
outline: none;
padding: 0.8em 0;
border-radius: 0.3em;
}
span {
color: #f93e3b;
}
Javascript:
In javascript, we begin by creating initial references for result and btn. after this, we add a click event listener button.
First, we check if neither of the input is empty. If the inputs are not empty, we compare the value of dates using the comparison operators.
Next, we make use of CSS to style our project. You can skip the CSS code as it has nothing to do with the functionality. I have only used CSS only to make the output look more presentable.
That’s it for this tutorial. If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also if you have any queries, suggestions or feedback you can comment below.
Happy Coding!
