How to calculate the number of days between two dates using HTML,CSS and javascript?







How to calculate the number of days between two dates using HTML, CSS, and javascript?

Welcome to today’s tutorial. Today we are going to create a webpage that will calculate the no. For this, we are going to use HTML, CSS and Javascript.

 You need basic ES6 knowledge for this javascript project. This tutorial is well suited for javascript intermediates. Let us get started with the project.


Calculating the number of days between two dates in JavaScript required to use date object for any kind of calculation.

 For that, first, get the internal millisecond value of the date using the in-built JavaScript getTime() function. As soon as both the dates get converted, proceed further by subtracting the later one from the earlier one which in turn returns the difference in milliseconds.

 Later, the final result can be calculated by dividing the difference (which is in milliseconds) of both the dates by the number of milliseconds in one day. 


LIVE SERVER:- 

Before moving forward to the code first of all we will see the live sever of the code so you can see how it is working on clicking the button.

See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.

 

HTML:-

HTML is the basic layout of the website. I have used to income tax that is given ID input one and input 2 respectively and input type is Date.


 <!DOCTYPE html>  
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="main">
<div class="input">
<div class="div">Enter the first date</div>
<input type="date" id="input1"></div>
<div class="input">
<div class="div">Enter the second date</div>
<input type="date" id="input2"></div>
<button id="btn" onClick="ans()">Click</button>
</div>
<div class="answer"></div>
</body>
</html>

CSS:-

CSS stands for cascading Style sheet. It is used for styling the basic layout / HTML file of any web page. Here in this project we are using some basic CSS properties. First you should try to learn it. Then you can apply it easily with the help of this blog.
I have used here flexbox .
Flex box is used to align the items hoziontally in same line.
This property is applied to the container.
 body{  
height:100vh;
width:100vw;
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
background:pink;
}
div{
padding:5px;
}
#btn{
align-self: center;
width:80px;
}
#main{
border:3px solid blue;
display: flex;
flex-direction:column;
}

JavaScript:-

Javscript is used for make the website work(manipulate the webpage content and also the functioning of the website).

We have used the DOM Manipulation in javascript for that part you have to clear your concept of DOM.
new is used as constructor that is used in oops(object-oriented programming) .
We have used new Date that will return the time in milliseconds from the date January 1, 1970 00:00:00.

So as it gives the output in milliseconds so I have divided it by 1000*60*60*24 to convert  it into days.

  var btn=document.getElementById("btn")  
var input1=document.getElementById("input1")
var input2=document.getElementById("input2")
var answer=document.querySelector(".answer")
function ans(){
var Date1= new Date(input1.value)
var Date2= new Date(input2.value)
answer.innerHTML=`Difference between the 2 dates is ${(Date1-Date2)/(1000*60*60*24)} days.`
}

I hope hoped loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.

If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

You can follow me on Instagram.

Written by @Himanshu Singh.
Share on:

Leave a Comment