Hex code clock with greeting

Hex code clock with greeting.markdown

Hex code clock with greeting

A Pen by Aled Wassell on CodePen.

License.

index.html

<div id="greeting"><h3></h3></div>
<div id="hex"></div>

script.js

/*This, sadly is not my own code, but I have however combined the code from thecodeplayer.com and javascript book. but it has helped me understand how to use if statements and storing data inn variables and objects. I'll keep learning*/

// Time of day dependant greeting. 

var today = new Date();
var hourNow = today.getHours();
var greeting;

if (hourNow > 18) {
  greeting = 'Good Evening!';
} else if (hourNow > 12) {
  greeting = 'Good Afternoon!';
} else if (hourNow > 0) {
  greeting = 'Good Morning!';
} else {
  greeting = 'Welcome!';
}

document.getElementById('greeting').innerHTML = greeting;

// display current time and change the background.

var d, h, m, s, color;
function displayTime() {
  d = new Date();
  h = d.getHours();
  m = d.getMinutes();
  s = d.getSeconds();
  
  if(h <= 9) h = '0' + h;
  if(m <= 9) m = '0' + m;
  if(s <= 9) s = '0' + s;
  
  color = '#'+h+m+s;
  
  document.body.style.background = color;
  
 document.getElementById('hex').innerHTML = color;
  
  setTimeout(displayTime, 1000);
 }

displayTime();

style.css

/*styling the hex*/

@import url("http://fonts.googleapis.com/css?family=Lato:100");

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}
#greeting {
  color: #fff;
  font: 54px/54px Lato;
  height: 54px;
  position: relative;
  top: 40%;
  margin-top: -32px;
  text-align: center;
}
#hex {
  color: #fff;
  font: 64px/64px Lato;
  height: 64px;
  position: relative;
  top: 50%;
  margin-top: -32px;
  text-align: center;
}