JSFiddle - React, Tailwind, and code Playground

by n2learning

HTML

<div id="display">"rest" div should cover me when time reaches 10</div>
<br>
<div id="rest"></div>

<br><br>
<p>When the 'rest' time countdown clock reaches 10, I want the "rest" div to
show and display over the "display" div, causing the "display" div to be covered.
When the rest time reaches 5, I want the "rest" div to hide, making the "display" div
reappear.</p>

CSS

#rest{
    color: white;
    font-family: Verdana, Arial, sans-serif;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    background: orange;
    border:2px solid navy;
    width: 200px;
    height: 100px;    
}

#display {
    color: gray;
    font-family: Verdana, Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    background: lightblue;
    border:2px solid #666;
    width: 200px;
    height: 100px;    
}

JavaScript

countdown('rest', 0, 15);

function countdown(element, minutes, seconds) {
    var time = minutes*60 + seconds;
    var interval = setInterval(function() {
        var el = document.getElementById(element);
        
        if(time == 10){
                            
        }
        
        if(time == 0) {
            el.innerHTML = "Times up!";    
            clearInterval(interval);
            return;
        }
        var minutes = Number.floor( time / 60 );
        if (minutes < 10) minutes = "0" + minutes;
        var seconds = time % 60;
        if (seconds < 10) seconds = "0" + seconds; 
        var text = minutes + ':' + seconds;
        el.innerHTML = text;
        time--;
    }, 1000);
}