Calculate Date differences using JavaScript

Calculating the difference between two dates can be a useful task in many different situations, such as determining the length of a lease or the number of days until a deadline or our daily lives, whether it's for personal or professional purposes. In this blog post, we'll show you how to create a simple date difference calculator using HTML, CSS, and JavaScript. First, watch the following video tutorial and then collect the source code, it will help you to understand the code. We have many videos about front-end development on our YouTube channel. If you find these videos useful, then you can subscribe to our channel.

I hope you have watched the whole tutorial and got some idea about the project. We have used JavaScript to make this widget because it is a widely used programming language that is supported by all modern web browsers, making it an ideal choice for creating interactive web-based applications. It also has a rich set of built-in functions and libraries that make it easy to perform complex tasks such as calculating date differences.

Step 1: Set up the HTML

First, we'll set up the basic structure of our date difference calculator using HTML. We'll create a form with two input fields for the start and end dates, and a button to trigger the calculation. Next, we'll add a place to display the result of the calculation. We'll use a div element with an id of "result" for this purpose.

Step 2: Add some CSS

Next, we'll add some basic styling to our date difference calculator using CSS. We'll add a little bit of padding to the form elements and center the form on the page. We have used the CSS display flex property to center the snippet and added the CSS box-shadow property to give it a stylish look. We have made the input field 100% width and a particular height. Later We have done some styling for the div that was used for the result of the calculation.

Step 3: Write the JavaScript

Now we have to add the JavaScript which will activate our widget. At first, we'll add an event listener to the form that will trigger the calculation when the button is clicked. To do this, we'll first need to get the values of the start and end dates from the form. Then, we'll create a new Date object for each of the dates and use the getTime() method to get the number. Next, we'll subtract the start date from the end date to get the difference in milliseconds. We'll then convert this value to the number of days by dividing it by the number of milliseconds in a day (86400000). To show the result, we'll make a paragraph element and set its text content to the number of days.

You May Also Like:

Calculate Date differences using JavaScript [ Source Code ]:

The first thing to do is create HTML and CSS files. You can add a separate js file but in this project, we have added the javascript code at the bottom of the HTML file. When creating the files, link them correctly. You can save the code and test it on your browser.

ADD HTML AND JAVASCRIPT:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Difference Calculator app using HTML css and Javascript</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
      <form>
        <label>Start Date:</label>
        <input type="date" id="firstDate">
        <br>
        <label>End Date:</label>
        <input type="date" id="secondDate">
        <br>
        <button type="button" onclick="X()">Find Difference</button>
      </form>
      
      <div id="dayCount"></div>
    </div>
    
    
      <script>
        function X() {
          
          const firstDate = document.getElementById('firstDate').value;
          const secondDate = document.getElementById('secondDate').value;
      
          
          const startTimestamp = new Date(firstDate).getTime();
          const endTimestamp = new Date(secondDate).getTime();
      
          
          const difference = endTimestamp - startTimestamp;
      
          
          const differenceInDays = Math.round(difference / (1000 * 60 * 60 * 24));
      
          
          const dayCountElement = document.getElementById('dayCount');
          dayCountElement.innerHTML = `The difference between the dates is ${differenceInDays} days.`;
        }
      </script>
      
      
</body>
</html>

ADD CSS:

body {
    background: #a957cb;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
  }
  .wrapper {
      background: #fff;
      width: 400px;
      height: 400px;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      box-shadow: 0 15px 25px rgba(0,0,0,0.3);
  }
  form input {
    width: 100%;
    height: 40px;
  }
  form {
    width: 300px;
    height: 300px;
  }
  form label {
    font-family: 'Bebas Neue', cursive;
    font-size: 30px;
    margin: 15px 0;
    display: inline-block;
  }
  button {
    background: blueviolet;
    border: none;
    display: inline-block;
    padding: 10px 35px;
    color: #fff;
    margin-top: 25px;
    border-radius: 5px;
  }
  #dayCount {
      margin-top: 15px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: 12px;
  }

We hope you enjoyed the code! If you did, we'd appreciate it if you told your friends about it. We're glad you dropped by, and hope you find something you like.

DOWNLOAD CODE

Calculate Date differences using JavaScript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Calculate Date differences using JavaScript

Calculate Date differences using JavaScript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form