countdown_timer.html

<input type="text" id="min" value="0"/>
<input type="text" id="sec" value="0"/>
<button id="reset">reset</button>
<div id="time" style="font-size: 400px; text-align: center;">00:00</div>

<script>
function countdown(min, sec, cb) {
	const end = new Date(new Date().getTime() + (min * 60 * 1000) + (sec * 1000));
	let endTime = end.getTime();
	return setInterval(function() {
		const diff = endTime - new Date().getTime();
		const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
		const s = Math.floor((diff % (1000 * 60)) / 1000);
		cb(m, s); 
	}, 1000);
}

(function() {
	let x;
	document.querySelector("#reset").addEventListener("click", () => {
		clearInterval(x);
		const min = Number(document.querySelector("#min").value);
		const sec = Number(document.querySelector("#sec").value);
		x = countdown(min, sec, (m, s) => {
			let isNegative = m < 0 || s < 0;
			let color = 'black';
			if (isNegative) {
			    	m *= -1;
			    	m -= 1;
			    	s *= -1;
				color = 'red';
			}
			const minText = `${m}`.padStart(2, "0");
			const secText = `${s}`.padStart(2, "0");
			const time = document.querySelector("#time");
			time.textContent = `${minText}:${secText}`;
			time.style.color = color;
		});
	})
})();
</script>