Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Aled Evans
Aled Evans
3,163 Points

Show leading zero in output

Hi guys. I have the following code which shows a countdown but when it is single digit I would like for a zero to be in front so it would display '01 Days, 05 Hours, 23 Minutes, 08 Seconds' and not '1 Days, 5 Hours, 23 Minutes, 8 Seconds'?

<?php
$date = 'July 19 2016 05:00:00 PM GMT';
$exp_date = strtotime($date);
$now = time();

if ($now < $exp_date) {
?>

<script>
// Count down milliseconds = server_end - server_now = client_end - client_now
var server_end = <?php echo $exp_date; ?> * 1000;
var server_now = <?php echo time(); ?> * 1000;
var client_now = new Date().getTime();
var end = server_end - server_now + client_now; // this is the real end time

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24
var timer;

function showRemaining()
{
    var now = new Date();
    var distance = end - now;
    if (distance < 0 ) {
       clearInterval( timer );
       document.getElementById('countdown').innerHTML = 'EXPIRED!';

       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor( (distance % _day ) / _hour );
    var minutes = Math.floor( (distance % _hour) / _minute );
    var seconds = Math.floor( (distance % _minute) / _second );

    var countdown = document.getElementById('countdown');
    countdown.innerHTML = '';
    if (days) {
        countdown.innerHTML += 'Days: ' + days + '<br />';
    }
       countdown.innerHTML += 'Hours: ' + hours+ '<br />';
    countdown.innerHTML += 'Minutes: ' + minutes+ '<br />';
    countdown.innerHTML += 'Seconds: ' + seconds+ '<br />';
}

timer = setInterval(showRemaining, 1000);
</script>

<?php
} else {
    echo "Updating";
}
?>

<div id="countdown"></div>

Thanks

3 Answers

Allison Davis
Allison Davis
12,698 Points

Nice, Lukas. Aled, this is what I was thinking: 

//use this conditional statement only after you've defined your variables

if(minutes < 10){
   minutes = "0" + minutes;
   } else             //code continues

Depending on how many of your variables you want to pad, you can either repeat the above conditional statement or wrap it in a function like this: 

//defines function

function addZero(num){
   if (num < 10){
      num = "0" + num;
      return num;
   } else {
     return num;
     }
}

//call the function after you've defined the variable

addZero(minutes);
Aled Evans
Aled Evans
3,163 Points

Thank You so much Allison and Lukas for your answers. This got it working :)

Allison Davis
Allison Davis
12,698 Points
Allison Davis
Allison Davis
12,698 Points

I don't know if this is the cleanest solution but you could always add a conditional statement that if a number < 10, you insert a string of "0". Good luck!

John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

I was going to suggest the same thing. I am sure there are more elegant solutions, but this is the only one I can think of. +1 for your answer Allison.

Aled Evans
Aled Evans
3,163 Points

Thanks Allison, To be honest I am very now to Javascript and to make this script I have just found snippets online and combined them. Is there any chance you would be willing to add the code to mine for me.

Thank You

Lukas Paul
Lukas Paul
52 Points
Lukas Paul
Lukas Paul
52 Points

function pad(num, size) { var s = num + ''; while (s.length < size) s = '0' + s; return s; }

use: var number = "1"; pad(number, 2); //e.g. for 01