I don't understand one piece of code..

Question

Hi guys,

I am building something which needs a stopwatch, so i searched for a piece code! I found something, yee! But online online of code of do'nt understand.. can you guys help me by explaining it? I'm talking about the line that starts with: h1.textContent = (hours ?

watch.js

    var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    seconds = 0, minutes = 0, hours = 0,
    t;

    function add() {
        seconds++;
        if (seconds >= 60) {
            seconds = 0;
            minutes++;
            if (minutes >= 60) {
                minutes = 0;
                hours++;
            }
    }

    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

        timer();
    }

    function timer() {
        t = setTimeout(add, 1000);
    }

    /* Start button */
    start.onclick = timer;

    /* Stop button */
    stop.onclick = function() {
        clearTimeout(t);
    }

Answer 1 · 2015-09-15T17:13:12Z

September 15, 2015 5:13pm

okay here we go.

h1.textContent is saying. set the textContent/whatever has been written (or not) inside the h1 to the following.

okay before i explain the remaining code lemme quickly point out what the "?" means; the "?" is called the ternary operator, and its a cleaner way to write if else statements since what the if else statement does is to try an expression if it evaluates to true or false;

example;

var age = 18;

write a program to check if age is greater or less than 18;

if u choose to use if statement u would write something like this

if (age > 18) { alert("welcome"); } else { alert("sorry u are underage"); }

HMM TOO LONG CODE;

// better way alert(age > 18 ? "welcome" : "sorry u are underage");

I know, How cool is that right? winks

so the first thing here is the expression we are trying to evaluate the next thing is saying if it is TRUE // alert("welcome"); the last thing is saying if it is FALSE // alert("sorry u are underage");

think of the colon between those two statements as your "else" in the if else.

which brings us back to ur code

==> (hours ? (hours > 9 ? hours : "0" + hours) : "00")

note hours has been initialized to 0;

and i

i. expression to evaluate "hours";

lets talk about this first (hours > 9 ? hours : "0" + hours)

ii. see if hours is greater than 9 i.e if the current time is 10:15pm. 10 is hour.

  so if 10 > 9 which is TRUE we return JUST the value of HOUR without touching anything
 i.e hours > 9 ? hours

so what if it is not greater than 9. what if the current time is 6:20am; //
is   6 > 9 // FALSE!!

so we return a string "0" + (concatenated) with the current hour value

i.e "0" + 6 = 06; so we now have a time that says its 06:20am instead of 6:20am//

MAKE SENSE???

okay we've tackled this one (hours > 9 ? hours : "0" + hours); and we know it returns either of the above values

depending on the hours if its > 9 or < 9;

no matter what we get just one value back in that expression.

THE ORIGINAL EXPRESSION

(hours ? (hours > 9 ? hours : "0" + hours) : "00")

WHAT WE HAVE NOW (hours ? ("06") : "00"); depends on what's returned. lets say "06";

so this one is saying

if hours is TRUE // has a value i.e not null, empty, false
return 06 as the current Hour
else if hours is FALSE // if its empty, null, false return "00"

MAKE SENSE???

same thing applies for minutes and seconds.

Answer 2 · 2015-09-15T16:33:13Z

September 15, 2015 4:33pm

That uses a ternary operator, x ? y : z - nice!

It is being used to pad out the numbers so that hours look like 01, 02, 03 etc, until they become > 9 then the code drops the preceding 0 so that you get 10, 11, 12 etc.

That's a brief answer to what it's doing rather than how it is doing it.

Have a Google about ternary operators - I think there's only that one - and it should be pretty clear to you then.

Steve.

Welcome to the Treehouse Community

Looking to learn something new?

Bram Huisman

Bram Huisman

I don't understand one piece of code..

2 Answers

Luksy Breezy

Luksy Breezy

Steve Hunter

Steve Hunter

Steve Hunter

Steve Hunter