Date Calculator Using Html,Css and JavaScript (Source Code)
Code by | Syahrizal |
Project Download | Link Available Below |
Language used | HTML, CSS, and JavaScript |
External link / Dependencies | No |
Responsive | Yes |
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
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
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
Ā
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!
Getting Error As
Uncaught TypeError: Cannot set properties of undefined (setting 'valueAsDate')