Coffee, and more Coffee

So last week in the Front End Web Dev class I am TA'in, we launched The Big Kahuna Concept: we started the JS portion of the course.

While Tom stood at the front leading everyone through basic concepts and syntax, I put together a simple web page that would have a JS-driven clock and time-appropriate, coffee-themed greeting.

You can see the code here: https://github.com/mgienow/Coffee_Clock

I am humbled by how long it took me to get this going.

The initial page came together in less than 20 minutes.  Which is maybe 10 more than it ought to be, since it;s basically three divs in the markup, plus basic CSS styling and a background image.

But my grasp of tying JS in to HTML has always been shaky, mainly because I've barely ever done it.

Today was the day.

The first time, I had to work from an example in my Duckett text.

That gave the structure for the "It's Coffee O'Clock" greeting:

const java = document.getElementById('java');
let msg= `It's Coffee O'Clock!`
java.textContent = msg;

From there, I could start to figure out how to get the other parts I needed. Which also required either brushing up on, or learning from new, some JS concepts like the Date() object and Math.random(). 

The clock was pretty easy...

const hourNow = today.getHours();
const minNow = today.getMinutes();
const clock = document.getElementById('clock');
clock.innerHTML = `${hourNow}:${minutes}`;

...until I realized that the built-in getMinutes() function returns literally only the minute number. So at 3:10 you're cool, it returns '10' -- but if it's 3:01, you only get '1'.  So my clock would say "15:1" instead of "15:01".  So I had to puzzle out a function to put that zero in whenever the minute value was <10:

let minutes = minsAddZero(minNow);  

function minsAddZero(i){

  if(i<10){i='0' + i};
  return i;
}

which got things looking right.

Finally, the biggest challenge. Or smallest, since in a way I was totally ready for this based on all the code challenges I've done. Conceptually, I had it right away:

function sendSalutations() {  let coffeeBreak  if (hourNow>16){    coffeeBreak = `Good evening!<br>                    Like some decaf?`  } else if (hourNow>11){  coffeeBreak = `Good afternoon.<br>                How about an energizing<br>                espresso?`  }else if (hourNow>5){    coffeeBreak = `Good morning!<br>                    Ahhh, nothing like that first cup...`  } else {    coffeeBreak = `How do you take YOURS?`  }  const salutations = document.getElementById('salutations')  salutations.innerHTML = coffeeBreak}sendSalutations();

Take a look at the hour, and use for/else to pass in the proper humorous greeting for that time of day.

Anyway, it's all there, abundantly commented on GH.  The big thing for me was that I did it two more times, refining it each time. The first re-do, I needed to peek a couple times at my original code. The second one I did blindfolded. Figuratively speaking.

IMportant lesson learned: one of the things I was puzzled about was how the new ES6 template literal for strings is supposed to take away the need to use newline escaped characters (\n) to indicate line breaks. But it wasn't showing up that way in my HTML.  They were right in console, but not on the page. It took what is an embarrassingly long time for me to realize that HTML doesn't speak ES6...so I had to switch from .textContent (which only passes the straight string) to .innerHTML (which allows HTML tags for styling).