Creating a simple countdown for sports was my idea, but now I'm stuck on the "changeColor" part that I don't have enough knowledge about.
The countdown is functioning perfectly, but customizing the colors and adding CSS animations seems challenging to me. The issue arises with the last part "changeColor".
For instance, when inputting 60s, it should turn green. If inputted as 29s, it should change to orange. And if entered as 9s, it needs to switch to red.
However, why doesn't it automatically change when going from 30 seconds to 29? It should become orange at that point. The same applies for the transition from 10 to 9 seconds, where it should start blinking and turn red, yet nothing happens.
Below is the script:
var CCOUNT;
$(document).ready(function () {
$('#btnct').click(function () {
CCOUNT = $('#seconds').val();
cdreset();
});
});
var t, count;
function cddisplay() {
document.getElementById('timespan').innerHTML = count;
}
function countdown() {
// starts countdown
cddisplay();
changeColor(CCOUNT);
if (count === 0) {
// time is up
} else {
count--;
t = setTimeout(countdown, 1000);
}
}
function cdpause() {
// pauses countdown
clearTimeout(t);
}
function cdreset() {
// resets countdown
cdpause();
count = CCOUNT;
cddisplay();
}
function changeColor() {
if (CCOUNT <= 1000 && CCOUNT > 30) {
document.getElementById('counting1').style.color = "#00CC00";
}
else if (CCOUNT <= 30 && CCOUNT > 10) {
document.getElementById('timespan').style.color = "#F87217";
}
else {
document.getElementById('timespan').style.color = "#ff0000";
document.getElementById('timespan').css = ({"text-decoration": "blink", "-webkit-animation-name": "0.2s", "text-decoration": "blink", "-webkit-animation-iteration-count": "infinite", "-webkit-animation-timing-function": "ease-in-out", "-webkit-animation-direction": "alternate"});
}
}
I've made it live on baswijdenes.com/simple-countdown for you to view.
EDIT: Here's the HTML code:
<center>
<form id="frm">
<div class="counting">
<input type="text" class="input" id="seconds" name="seconds" value="0" size="2" maxlength="4" />
</div>
<input type="button" class="btn blue" id="btnct" value="Input" />
</form>
<div class="counting1" id="counting1">
<span type="text" id="timespan">0</span>
</div>
<BR>
<BR>
<div id="divaroundbuttons">
<input type="button" class="btn green" value="Start" onclick="countdown()">
<input type="button" class="btn orange" value="Stop" onclick="cdpause()">
<input type="button" class="btn red" value="Reset" onclick="cdreset()">
</div>
</center>