JSFiddle - React, Tailwind, and code Playground

by lalatino

HTML

<br/>
<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);
        var eld = document.getElementById('display');
        var eldp = getElementPosition(eld);
        //alert(eldp.top+','+eldp.left);
        if (time == 10) {
            el.style.top = eldp.top + 'px';
            el.style.left = eldp.left + 'px';
            el.style.position = 'absolute';
            el.style.backgroundColor = 'red';
            //alert(el.id + el.style.top + ',' + el.style.left);
        }
        else if (time == 5) {
            el.style.display = 'none';
        }
        else 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);

    function getElementPosition(Elem) {
        var offsetLeft = 0,
            offsetTop = 0;
        do {
            if (!isNaN(Elem.offsetLeft)) {
                offsetLeft += Elem.offsetLeft;
                offsetTop += Elem.offsetTop;
            }
        } while (Elem = Elem.offsetParent);
        return { top: offsetTop, left: offsetLeft };
        // taken from http://stackoverflow.com/a/5598797/1422309
    }
}