diff --git a/index.css b/index.css index ec4a909..84b2f83 100644 --- a/index.css +++ b/index.css @@ -2,9 +2,7 @@ body { background-color: #80d4ea; } -#clock { - height: 100px; - width: 800px; +#clock, #date { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; @@ -14,3 +12,8 @@ body { color: white; font-size: 100px; } + +#clock { + height: 100px; + width: 800px; +} diff --git a/index.html b/index.html index 191d3cc..72fc006 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,7 @@ + + Clock Tower @@ -7,8 +9,13 @@ +
+ + - - + diff --git a/index.js b/index.js index 877a3aa..ebc741b 100644 --- a/index.js +++ b/index.js @@ -1 +1,43 @@ // Your code here + +$(document).ready(function() { + + setInterval(function(){ + var date = new Date(); + var seconds = date.getSeconds(); + var minutes = date.getMinutes(); + var hours = date.getHours(); + var month = date.getUTCMonth() + 1; + var day = date.getDate(); + var weekday = date.getDay(); + var year = date.getFullYear(); + var amPm = 'AM'; + + + + var twelveHour = function(hour){ + if(hour > 12 ){ + hour = hour - 12; + amPM = 'PM'; + } + return hour; + }; + + var twoNums = function(component) { + if (component < 10) { + display = "0" + component; + } else { + display = component; + } + return display; + }; + + + var time = twelveHour(hours) + ":" + twoNums(minutes) + ":" + twoNums(seconds) + " " + amPM; + var currentDate = month + "/" + day + "/" + year; + $('#date').text(currentDate); + $('#clock').text(time); + }, 1000); + + +});