How to add timer until tomorrow in HTML

Yanislav Yanakiev 0
Viewed 27

I am beginner in HTML and I am trying to put a timer in my HTML university project daily word game that shows time left until the next day and word. I found a W3Schools tutorial for a timer but it does not work for me because it is until constant date. My code looks like this:

<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="images/tabIcon.ico">
<title>Daily WordGame</title>
<style>
    h1 {
        font-family: Tahoma, sans-serif;
        text-align: center;
    }
    
    p {
        font-size: large;
        text-align: center;
    }
</style>
</head>
<body>

<h1>Welcome to your daily source of educational fun</h1>
<hr> 
<p style="font-size: large;">Everyday you have a chance of guessing a different word. 
</p>

<a href="about.html">Go to about</a>
<p>this is a second text</p>
<ul>
    <li>Boats</li>
    <li>Cars</li>
        <ul>
            <li>Buggati</li>
            <table>
                <tr>
                    <td>Price</td>
                    <td>Top speed</td>
                    <td>0-100</td>
                    <td>Horse Power</td>
                </tr>
                <tr>
                    <td>3.300.000$</td>
                    <td>420km/h</td>
                    <td>2.2s</td>
                    <td>1480</td>
                </tr>
            </table>
            <img src="images/car.jpg" style="width: 500px;height:300px;">
        </ul>
    <li>Trucks</li>
</ul>
</body>
<html>
timer script javascript css html
1 Answers

Add a span or any text element with an id of timer

<span id="timer">Time until next word: </span>

And add JavaScript code to get the countdown

<script>
    var now = new Date();
    // If you want another time, set it here with javascrip Date API
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
    var tomorrow = new Date().setDate(now.getDate() + 1);

    var timer = document.getElementById("timer");

    // Update the count down every 1 second
    setInterval(() => {
        // Fill in with the time until tomorrow
        var time = new Date(tomorrow - now);
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();

        // Format the time to add a leading 0 if less than 10
        function fillZero(n) {
            if (n < 10) {
                return "0" + n;
            } else return n.toString();
        }

        timer.innerText = "Time until next word: " + "0d " + fillZero(hours) + "h " + fillZero(minutes) + "m " + fillZero(seconds) + "s";
    }, 1000);
</script>

So the modified code with your HTML is

<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="images/tabIcon.ico">
<title>Daily WordGame</title>
<style>
    h1 {
        font-family: Tahoma, sans-serif;
        text-align: center;
    }
    
    p {
        font-size: large;
        text-align: center;
    }
</style>
</head>
<body>

<h1>Welcome to your daily source of educational fun</h1>
<hr> 
<p style="font-size: large;">Everyday you have a chance of guessing a different word. 
</p>

<a href="about.html">Go to about</a>
<p>this is a second text</p>
<span id="timer">Time until next word: </span>
<ul>
    <li>Boats</li>
    <li>Cars</li>
        <ul>
            <li>Buggati</li>
            <table>
                <tr>
                    <td>Price</td>
                    <td>Top speed</td>
                    <td>0-100</td>
                    <td>Horse Power</td>
                </tr>
                <tr>
                    <td>3.300.000$</td>
                    <td>420km/h</td>
                    <td>2.2s</td>
                    <td>1480</td>
                </tr>
            </table>
            <img src="images/car.jpg" style="width: 500px;height:300px;">
        </ul>
    <li>Trucks</li>
</ul>
<script>
    var now = new Date();
    // If you want another time, set it here with javascrip Date API
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
    var tomorrow = new Date().setDate(now.getDate() + 1);

    var timer = document.getElementById("timer");

    // Update the count down every 1 second
    setInterval(() => {
        // Fill in with the time until tomorrow
        var time = new Date(tomorrow - now);
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();

        // Format the time to add a leading 0 if less than 10
        function fillZero(n) {
            if (n < 10) {
                return "0" + n;
            } else return n.toString();
        }

        timer.innerText = "Time until next word: " + "0d " + fillZero(hours) + "h " + fillZero(minutes) + "m " + fillZero(seconds) + "s";
    }, 1000);
</script>
</body>
<html>
Matteo Leullier0
Related