How to make my countdown timer go up once it reaches 00:00 using javascript

I was trying to make a countdown timer that once it reaches " 00:00 " it should go up again without limit.

I can't figure it out how to make my countdown go up once it reaches " 00:00 " maybe you can help me.

<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 =="30")
{
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: 110px; border: none; background-color:none; font-size: 100px;    font-weight: bold;"> :
 <input id="seconds" type="text" style="width: 110px; border: none;        background-color:none; font-size: 100px; font-weight: bold;"> 
</div>
<script>
countdown();
 </script>

Solution

I think your current solution is a little overcomplicated. You have a function that sets a timeout that calls another function which does the work and then re-calls the function that sets the timeout again.

Instead of doing that, just use the setInterval method instead.

Similarly to what @JoColina suggested, set a direction variable that indicates which direction to count, and then set up different behavior for counting up vs. counting down.

var direction = 'down';
var mins = 1.1;
var secs = mins * 60;

function colorchange() {
  var className;
  if (direction == 'up') {
    className = 'success';
  } else if (secs <= 30) {
    className = 'danger';
  } else if (secs <= 59) {
    className = 'warning';
  }
  document.getElementById('timeText').className = className;
}

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);
}

function countdown() {
  setInterval(function() {
    var minutes = document.getElementById('minutes');
    var seconds = document.getElementById('seconds');

    minutes.value = getminutes();
    seconds.value = getseconds();
    colorchange();

    if (direction == 'down') {
      secs--;
      if (secs <= 0) {
        direction = 'up';
      }
    } else if (direction == 'up') {
      secs++;
    }
  }, 1000);
}


countdown();

.success,
.success input {
  color: green;
}

.warning,
.warning input {
  color: orange;
}

.danger,
.danger input {
  color: red;
}

<div id="timer">
  This is only valid for the next
  <span id="timeText">
    <input id="minutes" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">:
    <input id="seconds" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">
  </span>
</div>