diff --git a/index.css b/index.css index ec4a909..80df0f5 100644 --- a/index.css +++ b/index.css @@ -1,16 +1,59 @@ body { - background-color: #80d4ea; + background-color: lightgray; +} + +.buttons { + display: flex; + flex-direction: row; + justify-content: space-around; + margin-top: 50px; +} + +.buttons > div { + background-color: white; + text-align: center; + width: 100px; + height: 25px; + padding-top: 10px; } #clock { - height: 100px; - width: 800px; - margin: auto; - position: absolute; - top: 0; left: 0; bottom: 0; right: 0; - padding-top: 70px; + display: block; font-family: courier, monospace; - text-align: center; color: white; + text-align: center; + margin-top: 50px; font-size: 100px; } + +#clock-change { + width: 200px; +} + +.red { + background-color: darkred; +} + +.orange { + background-color: orange; +} + +.yellow { + background-color: gold; +} + +.green { + background-color: green; +} + +.blue { + background-color: lightblue; +} + +.purple { + background-color: indigo; +} + +.hide { + display: none; +} diff --git a/index.html b/index.html index 191d3cc..30af0d1 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,26 @@ -
+
+ +
+
Red
+
Orange
+
Yellow
+
Green
+
Blue
+
Purple
+
+ +
+
+
+ + + - - diff --git a/index.js b/index.js index 877a3aa..13fee0b 100644 --- a/index.js +++ b/index.js @@ -1 +1,51 @@ -// Your code here +let twelveHourTime = true; + +const displayDateTime = function displayDateTime() { + let timeStamp = new Date; + let date = timeStamp.toLocaleString("en-us", { weekday: "short", month: "long", day: "numeric", year: "numeric"}); + let time = timeStamp.toLocaleString("en-us", { hour12: twelveHourTime, hour: "numeric", minute: "numeric", second: "numeric", timeZoneName: "short" }); + $('#clock').html(date); + $('#clock').append('
') + $('#clock').append(time); + $('#clock-change').html(`Change to ${twelveHourTime ? 24 : 12}-Hour Clock`); +}; + +$(document).ready(() => { + let timer = setInterval(displayDateTime, 1000); + + $('#red-button').click(function() { + $('body').removeClass(); + $('body').addClass('red'); + }); + + $('#orange-button').click(function() { + $('body').removeClass(); + $('body').addClass('orange'); + }); + + $('#yellow-button').click(function() { + $('body').removeClass(); + $('body').addClass('yellow'); + }); + + $('#green-button').click(function() { + $('body').removeClass(); + $('body').addClass('green'); + }); + + $('#blue-button').click(function() { + $('body').removeClass(); + $('body').addClass('blue'); + }); + + $('#purple-button').click(function() { + $('body').removeClass(); + $('body').addClass('purple'); + }); + + $('#clock-change').click(function() { + clearInterval(timer); + twelveHourTime = !twelveHourTime; + timer = setInterval(displayDateTime, 1000); + }); +});