diff --git a/index.css b/index.css index ec4a909..5f3204a 100644 --- a/index.css +++ b/index.css @@ -1,8 +1,8 @@ body { - background-color: #80d4ea; + background-color: #74D9DE; } -#clock { +.clock { height: 100px; width: 800px; margin: auto; diff --git a/index.html b/index.html index 191d3cc..311938e 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,15 @@ -
+
+ + diff --git a/index.js b/index.js index 877a3aa..538fdd8 100644 --- a/index.js +++ b/index.js @@ -1 +1,33 @@ -// Your code here +$(document).ready(function() { + + getTime(); + // getTime('#EST'); + // getTime('#CEST'); + // getTime('#JST'); + + // Use the setInterval method to utilize the function you've created to update each second. + window.setInterval(getTime, 1000); + + function getTime() { + // Use the Date Library in Javascript to retrieve the current date and time information. + var timeNow = new Date(); + // I tried using arguments to get this to work but then the callback in the setInterval stopped working mysteriously :C + // if ( id == '#PST' ) { + // var timeNow = new Date(); + // } else if ( id == '#EST' ) { + // var timeNow = new Date() + 180; + // } else if ( id == '#CEST' ) { + // var timeNow = new Date() + 480; + // } else if ( id == '#PST' ) { + // var timeNow = new Date() + 960; + // } + + // Use the different methods that are provided to you for retrieving the individual hour, minute and second information. + var hours = ('0' + timeNow.getHours()).slice(-2); + var minutes = ('0' + timeNow.getMinutes()).slice(-2); + var seconds = ('0' + timeNow.getSeconds()).slice(-2); + var timeDisplay = $("

" + hours + " : " + minutes + " : " + seconds + "

"); + + $('div').html(timeDisplay); + } +});