Date Calculator Using Html,Css and JavaScript

Date Calculator Using Html,Css and JavaScript (Source Code)

Date Calculator Using Html,Css and JavaScript (Source Code)

Date Calculator Using Html,Css and JavaScript
Ā 
 
Hello Coder! Welcome to the Codewithrandom blog. In this blog, we learn how we create a Date Calculator Using Html, Css, and JavaScript. In this project, we Calculate 2 Dates and give you the difference in date gap as a result of the Date Calculator.I hope you enjoy our blog so let’s start with a basic HTML structure for theĀ Date Calculator Javascript.50+ HTML, CSS & JavaScript Projects With Source Code
Code bySyahrizal
Project DownloadLink Available Below
Language usedHTML, CSS, and JavaScript
External link / DependenciesNo
ResponsiveYes
Date Calculator Table

Live Preview Of Date Calculator UsingĀ  JavaScript

HTML Code For Date Calculator

<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. In this html code, we create a basic structure for a date calculator with 2 inputs with labels and add some span classes.
Output
Date Calculator Using Html,Css and JavaScript

CSS Code For Date Calculator

 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;
}
This is Css code for styling html elements like div, paragraph, body, and span class.Html + Css Output
Ā 
Date Calculator Using Html,Css and JavaScript

JavaScript Code For Date Calculator

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 OfĀ Date Calculator Using JavaScript

Date Calculator Using Html,Css and JavaScript
 
Ā 
Now that we have completed our JavaScript section, Here is our updated output Of the Date Calculator.Ā You can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.Thank you!Written by – Code With Random/AnkiĀ  Code by –Ā Syahrizal

Which code editor do you use for this Calculator coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

No! this is a responsive project

Do you use any external links to create this project?

Yes!



This Post Has One Comment

  1. Anonymous

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

Leave a Reply