Build a Date Calculator that Adds Days to Current Date in Javascript Using jQuery Full Project For Begineers

Build a Date Calculator that Adds Days to Current Date in Javascript Using jQuery Full Project For Begineers

 

Welcome folks today in this blog post we will be building a date calculator that adds days to current date in javascript using jquery. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

 

<body>
    <div class='wrapper'>
        <div class='one'>
            <form name='inputForm' action=''>
                <h1 class='font stylesForPara' style='text-align:center;font-size:1.5em'>Date Calculator</h1><br/>
                <p class='stylesForPara resultFont' style='text-align:center;'>Choose number of days to jump:
                    <input id='inputPara' type='text' size='10' name='dayJumper'></input>
                </p>
            </form>
        </div>
        <div class='buttonsStuff two'>
            <button class='buttonsStuff font bgChange' id='currentTime'>Current Time</button>
        </div>
        <div class='buttonsStuff three'>
            <button type='button ' class='buttonsStuff font bgChange' id='calcTime'>Calculate Time</button>
        </div>
        <div class='four'>
            <p class='stylesForPara font'>Calculated Time:</p>
            <p class='stylesForPara resultFont' id='calcTimeDisp'></p>
        </div>
        <div class='five'>
            <p class='stylesForPara font'>Current Time:</p>
            <p class='stylesForPara resultFont' id='currentTimeDisp'></p>
        </div>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

 

 

And now you need to create a style.css file and copy paste the following code

See also  jsPDF Html2Canvas Tutorial to Align Images in Center Position inside PDF Document in Browser Using Javascript Full Project For Beginners

 

style.css

 

@-webkit-keyframes bgChange {
    0% {
        background: #ef2121;
    }

    50% {
        background: #f4ff35;
    }

    100% {
        background: #3cfc2a;
    }
}

.bgChange {
    -webkit-animation: bgChange 2s 2s alternate infinite;
    transition: all 2s ease;
}

body {
    margin: auto;
    padding: 12px;
}

.buttonsStuff {
    height: 75px;
    width: 85%;
    text-align: center;
    justify-content: center;
}

.font {
    font-family: "Lucida Console", "Lucida Sans Typewriter", monaco,
        "Bitstream Vera Sans Mono";
    font-size: 1.1em;
    font-weight: bold;
}

.resultFont {
    font-family: "Lucida Console", "Lucida Sans Typewriter", monaco,
        "Bitstream Vera Sans Mono";
    font-size: 1em;
}

.stylesForPara {
    text-align: left;
    margin: 20px;
}

/* begin grid settings */

@supports (display: grid) {
    .wrapper {
        display: grid;
        grid-template-columns: repeat(2, 250px);
        grid-gap: 3px;
        grid-auto-rows: repeat(4, 200px);
        width: 500px;
        height: 600px;
        justify-content: center;
        margin: auto;
        text-align: center;
        border-style: solid;
        border-radius: 3px;
        border-color: green;
    }
}

@supports not (display: grid) {
    .internetEdge {
        display: -ms-grid;
        -ms-grid-template-columns: repeat(2, 250px);
        -ms-grid-gap: 3px;
        -ms-grid-auto-rows: repeat(4, 200px);
        -ms-display: grid;
        width: 330px;
        justify-content: center;
    }
}

.one {
    grid-column: 1 / 3;
    grid-row: 1;
    -ms-grid-column: 1 / 3;
    -ms-grid-row: 1;
}

.two {
    grid-column: 1;
    grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    align-self: center;
    justify-self: center;
}

.three {
    grid-column: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    align-self: center;
    justify-self: center;
}

.four {
    grid-column: 1 / 3;
    grid-row: 3;
    -ms-grid-column: 1 / 3;
    -ms-grid-row: 3;
}

.five {
    grid-column: 1 / 3;
    grid-row: 4;
    -ms-grid-column: 1 / 3;
    -ms-grid-row: 4;
}
/* end grid settings */

 

See also  Build a QRCode.js Plain Text Dynamic QRCode Generator in Browser Using HTML5 & Javascript Full Project For Beginners

 

And now you need to create a script.js file and copy paste the following code

 

script.js

 

$(document).ready(function() {
var date, inputVal, seconds, milli, mergeDate, todaysDate, finalDate;

$("#currentTime").click(function() {
    document.getElementById("currentTimeDisp").innerHTML = Date();
});

$("#calcTime").click(function() {
    inputVal = inputForm.inputPara.value;
    seconds = inputVal * 86400;
    milli = seconds * 1000;
    todaysDate = Date.now();
    mergeDate = todaysDate + milli;
    finalDate = new Date(mergeDate);
    document.getElementById("calcTimeDisp").innerHTML = finalDate;
});

$(document).keypress(function(event) {
    if(event.keyCode == 13) {
            event.preventDefault();
        inputVal = inputForm.inputPara.value;
            seconds = inputVal * 86400;
            milli = seconds * 1000;
            todaysDate = Date.now();
            mergeDate = todaysDate + milli;
            finalDate = new Date(mergeDate);
            document.getElementById("calcTimeDisp").innerHTML = finalDate;
    }
});
    
});

 

 

And now if you open index.html file inside the browser you will see the below screenshot

 

Leave a Reply