Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
00:00:00:00
START
STOP
RESET
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700"); $black: hsla(197, 100%, 5%, 1); $midnight-green: hsla(190, 100%, 23%, 1); $dark-cyan: hsla(181, 88%, 31%, 1); $tiffany-blue: hsla(160, 41%, 70%, 1); $tiffany-blue-01: #61bd9e; $vanilla: hsla(45, 60%, 78%, 1); $gamboge: hsla(39, 100%, 47%, 1); $gamboge-00: #ffbf47; $alloy-orange: hsla(30, 98%, 40%, 1); $rust: hsla(19, 97%, 37%, 1); $rufous: hsla(5, 81%, 38%, 1); $auburn: hsla(358, 64%, 37%, 1); $avocado: #6d8505; $avocado-01: #617604; $main-bg: linear-gradient(330deg, $midnight-green 20%, $dark-cyan 100%); $display-color: $vanilla; $display-bg: $black; $display-border: $vanilla; $display-shadow-1: $gamboge; $display-shadow-2: $gamboge-00; $start-button-bg: $avocado; $start-button-hover-bg: $avocado-01; $stop-button-bg: $rufous; $stop-button-hover-bg: $auburn; $reset-button-bg: $tiffany-blue; $reset-button-hover-bg: $tiffany-blue-01; $dark-button-color: #ffffff; $light-button-color: $black; $button-border: $vanilla; $button-shadow-1: $vanilla; $button-shadow-2: $gamboge-00; html { box-sizing: border-box; margin: 0; padding: 0; body { height: 100vh; overflow: hidden; background: hsla(221, 45%, 73%, 1); background: $main-bg; display: grid; place-content: center; .timer { margin: 2rem 0; font-size: 3.75rem; font-family: monospace; background-color: $display-bg; border: 1px solid $display-border; color: $display-color; padding: 1rem; border-radius: 10px; box-shadow: 4px 4px 0px 2px $display-shadow-1, 6px 6px 0px 4px $display-shadow-2, 7px 7px 0px 5px $vanilla; } .controls { width: 100%; display: flex; justify-content: center; perspective: 600px; transform-style: preserve-3d; button { transition: all 90ms ease-in; width: 80px; height: 80px; font-size: 1rem; font-weight: bold; border-radius: 50%; margin: 1rem; font-family: "Raleway", sans-serif; border: 2px solid $button-border; transform: rotatex(25deg); box-shadow: 0px 4px 0px $vanilla, 0px 8px 2px 2px $rust; &:hover { } &:active { transform: rotatex(20deg) translatey(5px); box-shadow: 0px 2px 0px $vanilla; } } #start { background-color: $start-button-bg; color: $dark-button-color; &:hover { background-color: $start-button-hover-bg; } } #stop { background-color: $stop-button-bg; color: $dark-button-color; display: none; &:hover { background-color: $stop-button-hover-bg; } } #clear { background-color: $reset-button-bg; color: $light-button-color; &:hover { background-color: $reset-button-hover-bg; } } } } }
console.log("Event Fired") T = {}; T.timerDiv = document.getElementById("timer"); function displayTimer() { // initilized all local variables: var hours = "00", minutes = "00", miliseconds = 0, seconds = "00", time = "", timeNow = new Date().getTime(); // timestamp (miliseconds) T.difference = timeNow - T.timerStarted; // MS if (T.difference > 10) { miliseconds = Math.floor((T.difference % 1000) / 10); if (miliseconds < 10) { miliseconds = "0" + String(miliseconds); } } // S if (T.difference > 1000) { seconds = Math.floor(T.difference / 1000); if (seconds > 60) { seconds = seconds % 60; } if (seconds < 10) { seconds = "0" + String(seconds); } } // MIN if (T.difference > 60000) { minutes = Math.floor(T.difference / 60000); if (minutes > 60) { minutes = minutes % 60; } if (minutes < 10) { minutes = "0" + String(minutes); } } // HRS if (T.difference > 3600000) { hours = Math.floor(T.difference / 3600000); // if (hours > 24) { // hours = hours % 24; // } if (hours < 10) { hours = "0" + String(hours); } } time = hours + ":"; time += minutes + ":"; time += seconds + ":"; time += miliseconds; T.timerDiv.innerHTML = time; } function startTimer() { // save start time T.timerStarted = new Date().getTime(); console.log("T.timerStarted: " + T.timerStarted); if (T.difference > 0) { T.timerStarted = T.timerStarted - T.difference; } // update timer periodically T.timerInterval = setInterval(function () { displayTimer(); }, 10); // show / hide the relevant buttons: document.getElementById("start").style.display = "none"; document.getElementById("stop").style.display = "inline"; document.getElementById("clear").style.display = "inline"; } function stopTimer() { clearInterval(T.timerInterval); // stop updating the timer document.getElementById("stop").style.display = "none"; document.getElementById("start").style.display = "inline"; document.getElementById("clear").style.display = "inline"; } function clearTimer() { clearInterval(T.timerInterval); T.timerDiv.innerHTML = "00:00:00:00"; // reset timer to all zeros T.difference = 0; document.getElementById("stop").style.display = "none"; document.getElementById("start").style.display = "inline"; document.getElementById("clear").style.display = "inline"; }