I am currently dealing with a timer that is functioning properly, but I have a specific CSS inquiry. Essentially, what I would like to achieve is when the timer hits 30 seconds, I want the numbers to change to red color.
$(function () {
var $startTimer = $('#startTimer');
var $timerDisplay = $('#timerDisplay');
var time = 120;
$timerDisplay.hide();
$startTimer.click(function () {
$startTimer.prop('disabled', true);
$timerDisplay.show();
var timeRemaining = time;
var intervalId = setInterval(function () {
var timeStamp = Math.floor(timeRemaining/60) + ':' + timeRemaining%60;
$timerDisplay.text(timeStamp);
if (timeRemaining === 0) {
clearInterval(intervalId);
$timerDisplay.fadeOut();
alert('Time is up, please submit a vote :)');
$startTimer.prop('disabled', false);
} else {
timeRemaining--;
}
}, 1000);
});
});
HTML
<div id="timerDisplay"></div>
<button id="startTimer">Start Timer</button>
Here is a functional code pen of the timer without the color change: http://codepen.io/Chevex/pen/RNomGG