JSFiddle - React, Tailwind, and code Playground

by John Barker

HTML

<p>This example uses the HTML DOM to assign an "onmouseover" and "onmouseout" event to a h1 element.</p>

<h1 id="demo">Mouse over me</h1>

<div id="count-up-clock"><label id="minutes">00</label>:<label id="seconds">00</label></div>

<img src="https://static1.squarespace.com/static/56f018b62eeb8148f994c74d/t/56fee547746fb91d8b1ed864/1459545415558/HereToRecord_DotOnly_500px.png">

CSS

#count-up-clock {
  display:none;
}

JavaScript

document.getElementById("demo").onmouseover = function() {mouseOver()};
document.getElementById("demo").onmouseout = function() {mouseOut()};

function mouseOver() {
    document.getElementById("demo").style.color = "red";
     document.getElementById("count-up-clock").style.display = "initial";
}

function mouseOut() {
    document.getElementById("demo").style.color = "black";
    document.getElementById("count-up-clock").style.display = "none";
}


var minutesLabel = document.getElementById("minutes");
        var secondsLabel = document.getElementById("seconds");
        var totalSeconds = 0;
        setInterval(setTime, 1000);

        function setTime()
        {
            ++totalSeconds;
            secondsLabel.innerHTML = pad(totalSeconds%60);
            minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
        }

        function pad(val)
        {
            var valString = val + "";
            if(valString.length < 2)
            {
                return "0" + valString;
            }
            else
            {
                return valString;
            }
        }