Date Calculator Javascript | Date Calculator Html Css Javascript - Codewithrandom

Date Calculator Javascript | Date Calculator Html Css Javascript - Codewithrandom

Date Calculator Javascript | Date Calculator Html Css Javascript - Codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Date Calculator Javascript. We use HTML, Css, and javascript for this Date Calculator Javascript. I hope you enjoy our blog so let's start with a basic HTML structure for the Date Calculator Javascript.

HTML Code

 <header>  
  <h1>Date Calculator</h1>  
  <p>How many days are there between two dates?</p>  
  <p>(Change a date to automatically calculate the difference)</p>  
 </header>  
 <div>  
 <form>  
  <label>Start Date: </label>  
  <input type="date" name="start_date">  
  <label>End Date: </label>  
  <input type="date" name="end_date">  
 </form>  
  <p>  
   Time elapsed:   
   <span class="date_span"></span>  
  </p>  
 </div>  
There is all the HTML code for the Date Calculator Javascript. Now, you can see an output with Date Calculator Javascript then we write javascript for Date Calculator Javascript.
output
Date Calculator Javascript | Date Calculator Html Css Javascript - Codewithrandom

CSS code

 h1 {  
  font-family: 'Arial', 'Verdana', sans-serif;  
  font-size: 2.5em;  
  font-weight: bold;  
  text-align: center;  
 }  
 header > p {  
  font-family: 'Arial', 'Verdana', sans-serif;  
  text-align: center;  
   font-size: 1.5rem;  
  font-weight: bold;  
 }  
 div {  
  text-align: center;  
  border: 0.1em solid #000;  
 }  
 p{  
   font-size: 1.4rem;  
  font-weight: bold;  
 }  
 body{  
  background: #000;  
   color: #ffff;  
 }  
Css Updated output

Date Calculator Javascript | Date Calculator Html Css Javascript - Codewithrandom

Javascript code

 let span = document.querySelector(".date_span");  
 let dateInputs = document.querySelectorAll('input');  
 dateInputs[1].valueAsDate = new Date();  
 function calculateElapse() {  
  if (!isNaN(dateInputs[0].valueAsNumber) && !isNaN(dateInputs[1].valueAsDate)) { // I don't think this is necessary, but it's robust.  
   span.textContent = "" + ((dateInputs[1].valueAsDate - dateInputs[0].valueAsDate) / (24 * 60 * 60 * 1000)) + " day(s)";  
  }  
 }  
 dateInputs.forEach(elements => elements.addEventListener('change', calculateElapse));  
Final output
Date Calculator Javascript | Date Calculator Html Css Javascript - Codewithrandom


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Date Calculator Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Date Calculator Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Code by - Syahrizal

1 Comments

  1. Getting Error As
    Uncaught TypeError: Cannot set properties of undefined (setting 'valueAsDate')

    ReplyDelete

Post a Comment

Previous Post Next Post