HomeJavascriptCompare Dates In Javascript

Compare Dates In Javascript

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to compare dates from the date input. For this, we use HTML and Javascript.
 
This a beginner-friendly javascript project. , If you are looking for more projects to improve your javascript skills, you can check out this playlist here. This playlist consists of 100+ javascript projects. The difficulty level of this project varies from easy to quite complex.
 
Therefore it makes the playlist suitable for all kinds of javascript learners including javascript beginners and javascript intermediates.
 

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!

Previous articleMCQ – 17/10/22
Next articleMCQ – 19/10/22
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

fifteen − 12 =

Most Popular