JSFiddle - React, Tailwind, and code Playground

by vicky081

HTML

<div id="time"></div>

CSS

#days {
    color:green;
    width:100px;
    height:100px;
    background-color:pink;
    border-radius:20px;
    text-align:center;
    padding:10px;
    font-size:16px;
    font-family:cursive;
}

JavaScript

$(function(){
    var calcNewYear = setInterval(function(){
        date_future = new Date(new Date('2013/10/3'));
        date_now = new Date();

        seconds = Math.floor((date_future - (date_now))/1000);
        minutes = Math.floor(seconds/60);
        hours = Math.floor(minutes/60);
        days = Math.floor(hours/24);
        
        hours = hours-(days*24);
        minutes = minutes-(days*24*60)-(hours*60);
        seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);

        $("#time").html("Time until Christmas: <br/><div id='days'> Days: " + days + " <br/></div> Hours: " + hours + "<br/> Minutes: " + minutes + "<br/> Seconds: " + seconds);
    },1000);
});