JSFiddle - React, Tailwind, and code Playground

by Cem Firat

HTML

<span id="countdown" class="timer"></span>

<input type="button" value="Start" id="start" onclick="countdown(this)">
<input type="button" value="Stop" onclick="cdpause()">
<input type="button" value="Reset" onclick="cdreset(seconds = 300)">

JavaScript

var seconds = 300;
var countdownTimer;
var colorChange;
colorChange = ['#7ed473', '#fff194', '#fa8283'];

function secondPassed(){
	var minutes = Math.floor(seconds/60);
	var remainingSeconds = seconds % 60;
	if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;  
    }
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
   if (seconds == 0) {
		clearInterval(countdownTimer);
		}
}

function changeColor(){
	if (seconds <= 300 && seconds > 90) {
		document.body.style.background = colorChange[0];
	}
	else if (seconds <= 90 && seconds > 30) {
		document.body.style.background = colorChange[1];
	}
	else if(seconds <= 30 && seconds >= 0){
	document.body.style.background = colorChange[2];
	}
}
	
function countdown(start){
	secondPassed();
	if (seconds != 0) {
	seconds --;
	countdownTimer = setTimeout('countdown()', 1000);
	changeColor();
	start.disabled = true;

	}
}

function cdpause() {
        // pauses countdown
        clearTimeout(countdownTimer);
};
    
function cdreset(startButton) {
        // resets countdown
        cdpause();
        secondPassed();
        document.getElementById('start').disabled = false;
};