JSFiddle - React, Tailwind, and code Playground

by GolfGirl21

HTML

<!-- Digital Clock Display within a span element-->
<!-- Start and stop button versus Run-On-ddemand -->

<p>
   <button type = "button" id = "startClock">Start!</button>
   <button type = "button" id = "stopClock">Stop!</button>
</p>

<div id = "overallDivStyle"≥
    <img id = "photoStyle" src = "http://www.cliker.com/cliparts/D/M/J/c/j/R/totetude-digital-alarm-clock.svg"/>
    <span id = "theTime"></span>
</div>

CSS

#overallDivStyle {
  width: 170px;
  text-align: center;
  background-color: #CCCCCC;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
}

#theTime {
  width: 100px;
  color: red;
  background-color: light gray;
  position: absolute;
  top: 30px;
  left: 28px;
  font-size: 28px;
  font-family: sans-serif;
}

#photoStyle {
  max-width:150px;
}

JavaScript

// Pull out current time 
//from a Date object

// create variable which will hold the clock
var clockID;

//start button
var startButton = document.getElementById("startClock");
startButton.addEventListener("click", StartClock);

//stop button
var stopButton = document.getElementById("stopClock");
stopButton.addEventListener("click", KillClock);

//write a function that updates the clock
function UpdateClock() {

    var dateToday = new Date(); 
    var time_in_hours = dateToday.getHours();
    var time_in_minutes = dateToday.getMinutes();
    var time_in_seconds = dateToday.getSeconds ();


    if (time_in_minutes < 10){
        time_in_minutes = "0" + time_in_minutes;
    }

    if(time_in_seconds < 10){
        time_in_seconds = "0" + time_in_seconds;
    }

    if(time_in_hours < 10){
        time_in_hours = "0" + time_in_hours;
    }

    document.getElementById("theTime").innerHTML = ""
        + time_in_hours + ":" 
        + time_in_minutes + ":"
        + time_in_seconds;
}

// function to start the clock
function StartClock() {
    clockID = setInterval(UpdateClock, 500);
}


// write a function that kills the kill the clock
function KillClock() {
    clearTimeout(clockID); 
}

window.onload = function (){
    StartClock();
}