Search code examples
javascripttimercountdown

Colon " : " doesnt appear in my timer

How do I make my colon punctuation appear between my minutes and seconds? Two hours on this and still doesn't work. It is a pretty stupid question but still. I want to my timer look like this " 02:00 " but instead it just look like this " 02 00 " how can I fix that?

// set minutes
var mins = 2;
var down = true;
// calculate the seconds (don't change this! unless time progresses at a                 different speed for you...)
var secs = mins * 60;
var timeout;
var doispontos = ":";

countdown();

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";
    doispontos = "orange";

  } else if (minutes.value == "00" && seconds.value == "30") {
    minutes.style.color = "red";
    seconds.style.color = "red";
    doispontos = "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) {
      secs--;
      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);
}
<div id="timer">
  <input id="minutes" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -5%;">
  <input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -40%;">
</div>

Solution

  • You are using inline styling with fixed positioning. So anything you add that you want between them would need to have similar styling. For instance using a span tag:

    <div id="timer">
  <input id="minutes" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -5%;">
  <span style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -30%;">:</span>
  <input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -40%;">
</div>


    // set minutes
var mins = 2;
var down = true;
// calculate the seconds (don't change this! unless time progresses at a                 different speed for you...)
var secs = mins * 60;
var timeout;
var doispontos = ":";

countdown();

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";
    doispontos = "orange";

  } else if (minutes.value == "00" && seconds.value == "30") {
    minutes.style.color = "red";
    seconds.style.color = "red";
    doispontos = "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) {
      secs--;
      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);
}
    <div id="timer">
  <input id="minutes" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -5%;">
  <span style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -30%;">:</span>
  <input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -40%;">
</div>

    Alternatively you could simplify the HTML by moving the CSS to either the HEAD tag or into a separate file. Also, there really is no need to use an input here as you are simply displaying text.

    <div id="timer">
  <span id="minutes"></span>
  <span>:</span>
  <span id="seconds"></span>
</div>


    // set minutes
var mins = 2;
var down = true;
// calculate the seconds (don't change this! unless time progresses at a                 different speed for you...)
var secs = mins * 60;
var timeout;
var doispontos = ":";

countdown();

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

function colorchange(minutes, seconds) {
  if (minutes.innerText == "00" && seconds.innerText == "59") {
    minutes.style.color = "orange";
    seconds.style.color = "orange";
    doispontos = "orange";

  } else if (minutes.innerText == "00" && seconds.innerText == "30") {
    minutes.style.color = "red";
    seconds.style.color = "red";
    doispontos = "red";
  }

}

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

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

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

    secs--;
    if (secs < 0) {
      secs--;
      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);
}
    #timer {
  width: 90%;
  border: none;
  background-color: none;
  font-size: 300px;
  font-weight: bold;
  position: fixed;
  bottom: 30%;
  right: -5%;
}
    <div id="timer">
  <span id="minutes"></span>
  <span>:</span>
  <span id="seconds"></span>
</div>