Anyway possible to make a countdown timer change color at an certain time with javascript?

Im trying to make a countdown timer that would change the color when reaches two different points, it supposed to go orange when reaches "00:59" and then change to red when reaches " 00:00 " How do I do that with javascript.

<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
 // set minutes
var mins = 1;

 // calculate the seconds (don't change this! unless time progresses at a         different speed for you...)
var secs = mins * 60;
var timeout;

function countdown() {
  timeout = setTimeout('Decrement()', 1000);
}

function Decrement() {
  if (document.getElementById) {
    minutes = document.getElementById("minutes");
    seconds = document.getElementById("seconds");
    // if less than a minute remaining
    if (seconds < 59) {
      seconds.value = secs;
    } else {
      minutes.value = getminutes();
      seconds.value = getseconds();
    }
    secs--;
    if (secs < 0) {
      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);
}

</script>
</head>
<body>

<div id="timer">
This is only valid for the next <input id="minutes" type="text"   style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> : <input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> 
 </div>
<script>
countdown();
</script>

Solution

It's very easy, you just need to add a condition before inserting value in both div or minutes/seconds.

<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
 // set minutes
var mins = 1;

 // calculate the seconds (don't change this! unless time progresses at a         different speed for you...)
var secs = mins * 60;
var timeout;

function countdown() {
  timeout = setTimeout('Decrement()', 1000);
}


function colorchange(minutes, seconds)
{
 if(minutes.value =="00" && seconds.value =="59")
 {
    minutes.style.color="orange";
    seconds.style.color="orange";
 }
 else if(minutes.value =="00" && seconds.value =="00")
 {
    minutes.style.color="red";
    seconds.style.color="red";
 }

}

function Decrement() {
  if (document.getElementById) {
    minutes = document.getElementById("minutes");
    seconds = document.getElementById("seconds");
    // if less than a minute remaining

    if (seconds < 59) {
    seconds.value = secs;

    } else {
      minutes.value = getminutes();
      seconds.value = getseconds();
    }
    colorchange(minutes,seconds);

    secs--;
    if (secs < 0) {
      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);
}

</script>
</head>
<body>

<div id="timer">
This is only valid for the next <input id="minutes" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> :
 <input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> 
 </div>
<script>
countdown();
</script>