<!--Basic structure of calculator--> <div class="container">  <!--Added a heading-->    <div class="heading">Days Between Two Dates</div> <!--Two input spaces-->    <div class="inp-wrapper"> <!--Place to input 1st date-->         <div class="date-wrapper">           <label for="date-1">Start Date</label>           <input type="date" id="date-1" />         </div> <!--Place to input 2nd date -->         <div class="date-wrapper">           <label for="date-2">End Date</label>           <input type="date" id="date-2" />         </div>    </div> <!-- Submit button -->    <button id="submit">Submit</button> <!-- Display -->    <div id="output">Select the dates to get started</div>     </div> 

/*Basic design of webpage*/ * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Rubik", sans-serif; } body { height: 100vh; background: rgb(94, 169, 233); } /*Basic design of calculator*/ .container { width: 70vw; max-width: 37.5em; background-color: #f6f9fa; padding: 3em 1em; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } /*Design the headings*/ .heading{ background: rgb(18, 128, 207); color: white; margin: -48px -16px 50px -16px; font-size: 23px; padding: 5px; text-align: center; } /*Design a place to input*/ .inp-wrapper { display: flex; justify-content: space-around; gap: 1.2em; } label { color: #0f1e32; display: block; font-weight: 600; } input[type="date"] { font-size: 16px; padding: 1em; color: #242831; border: 2px solid rgb(7, 108, 147); outline: none; border-radius: 0.2em; margin-top: 0.6em; } ::-webkit-calendar-picker-indicator { background-color: #7eceee; padding: 0.2em; cursor: pointer; border-radius: 0.1em; } /*Design the Calculate button*/ button { display: block; background-color: #1a78db; color: #ffffff; font-size: 18px; margin: 2.2em auto 2em auto; border: none; padding: 0.7em 2em; border-radius: 0.3em; font-weight: 500; } /*Display viewing results*/ #output { background-color: rgba(255, 255, 255, 0.15); text-align: center; padding: 1em; margin: 0px 30px 0px 30px; color: #0a49c7; font-size: 1.2em; letter-spacing: 0.05em; box-shadow: 0 0 20px rgba(0,139,253,0.45); } #output span { color: #18f08b; font-size: 1.4em; font-weight: 600; } /*The following code has been used to make it responsive*/ @media screen and (max-width: 550px) { .container {   padding: 4em 2em; } .inp-wrapper {   flex-direction: column; } .date-wrapper {   display: flex;   align-items: center;   flex-direction: column; } } 

   //The 'Submit Button' and 'Display' ids are set to constant     let submit = document.getElementById("submit");     let output = document.getElementById("output");      submit.addEventListener("click", () => {       //Create a Date object from input value       let date1 = new Date(document.getElementById("date-1").value);       let date2 = new Date(document.getElementById("date-2").value);        //Check if the input dates are valid       //If valid calculate the difference       if (date1.getTime() && date2.getTime()) {         //Calculate difference in time using getTime function         //getTime calculates number of years since January 1,1970         let timeDifference = date2.getTime() - date1.getTime();          //Since this value is in milliseconds we need to convert it into days         //We want the difference to be a non-negative number. Hence we use Math.abs()         let dayDifference = Math.abs(timeDifference / (1000 * 3600 * 24)); //InnerHTML is a property of the HTML DOM.         output.innerHTML = `Difference between the two dates is <span>${dayDifference}</span> days`;       }        //Else display that the input is valid       else {         output.innerHTML = "Please select a valid date";       }     });