Beginner Project

Digital Clock

by ClarenceDowns

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Digital Clock</title>
    <link rel="" type='text/css' href=''>
  </head>

  <body>
    <h2 id='name'>
      "Faheem's Clock"
    </h2>
    <div id='clock'>

    </div>
  </body>

</html>

CSS

body {
  background-color: #99ddfc;
}

#name {
  text-align: center;
	margin-top: 30px;
	margin-left: 0px;
	padding: 30px;
}

#clock {
  color: #fff;
  background-color: #000;
  padding: 30px;
  width: 60%;
  margin-left: 170px;
  font-family: Helvetica;
  text-align: center;
  margin-top: -40px;
}

JavaScript

setInterval(function() {
  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();
  var seconds = currentTime.getSeconds();
  var period = "AM";

  if (hours >= 12) {
    period = "PM";
  }
  if (hours > 12) {
    hours = hours - 12;
  }
  if (seconds < 10) {
    seconds = "0" + seconds;
  }
  if (minutes < 10) {
    minutes = "0" + minutes
  }
  var clockTime = hours + ":" + minutes + ":" + seconds + " " + period;
  var clock = document.getElementById('clock');
  clock.innerText = clockTime;
}, 1000);