Date Calculator Source Code

403

Are you looking to calculate the number of days between two important dates? Perhaps you need to plan an event, track project timelines, or simply satisfy your curiosity. Look no further! In this comprehensive guide, we’ll show you how to use a Date Calculator effectively and explore the many ways it can simplify your life.

[WP-Coder id=”2″]

 

HTML Code

[sourcecode language=”plain”]</h3>
<h3><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="dateCalculator">
<label for="startDate">Start Date:</label>
<input type="date" id="startDate" required>
<label for="endDate">End Date:</label>
<input type="date" id="endDate" required>
<button id="calculateBtn">Calculate Days</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html></h3>
<h3>[/sourcecode]

 

 

CSS Code

  • [sourcecode language=”plain”]</pre>
    /* CSS styles for the Date Calculator */
    #dateCalculator {
    text-align: center;
    margin: 50px;
    }

    label {
    font-size: 18px;
    }

    input {
    padding: 5px;
    font-size: 16px;
    margin: 10px;
    }

    button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    }

    button:hover {
    background-color: #0056b3;
    }

    #result {
    font-size: 20px;
    margin-top: 20px;
    text-align: center;
    }

    .result-line {
    font-size: 18px;
    margin-bottom: 10px;
    }

    .result-line:first-child {
    margin-top: 0;
    }

    &nbsp;
    <pre>
    [/sourcecode]

 

Java Script (JS)  Code

  • [code lang=”js”]</pre>
    // JavaScript code for the Date Calculator
    document.getElementById("calculateBtn").addEventListener("click", calculateDays);

    function calculateDays() {
    var startDate = new Date(document.getElementById("startDate").value);
    var endDate = new Date(document.getElementById("endDate").value);

    if (isNaN(startDate) || isNaN(endDate)) {
    document.getElementById("result").innerHTML = "Please select valid dates.";
    } else {
    var timeDifference = endDate – startDate;
    var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));

    document.getElementById("result").innerHTML =
    "<div class='result-line'>" +
    "Days Between Dates: " + daysDifference + " days</div>";
    }
    }
    <pre>
    [/code]

 

RELATED ARTICLESMORE FROM AUTHOR