JSFiddle - React, Tailwind, and code Playground
HTML
<div id="timer">
<input id="minutes" type="text"/>
<span id="colon">:</span>
<input id="seconds" type="text" />
</div>
CSS
#colon {
font-size: 50px;
}
input {
width: 60px;
border: none;
background-color:none;
font-size: 50px;
font-weight: bold;
}
#minutes {
}
#seconds {
}
JavaScript
// set minutes
var mins = 1;
var down = true;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
var timeout;
var doispontos = ":";
function countdown() {
timeout = setTimeout(Decrement, 1000);
}
function colorchange(minutes, seconds,colon) {
if (minutes.value == "00" && seconds.value == "59") {
minutes.style.color = "orange";
seconds.style.color = "orange";
colon.style.color = "orange";
doispontos = "orange";
} else if (minutes.value == "00" && seconds.value == "30") {
minutes.style.color = "red";
seconds.style.color = "red";
colon.style.color = "orange";
doispontos = "red";
}
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
colon = document.getElementById("colon");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
colorchange(minutes, seconds,colon);
secs--;
if (secs < 0) {
secs--;
clearTimeout(timeout);
return;
}
countdown();
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
countdown();