diff --git a/index.css b/index.css index ec4a909..741f903 100644 --- a/index.css +++ b/index.css @@ -2,15 +2,32 @@ body { background-color: #80d4ea; } -#clock { - height: 100px; - width: 800px; - margin: auto; - position: absolute; - top: 0; left: 0; bottom: 0; right: 0; - padding-top: 70px; +#city-selector { + display: grid; + grid-template-columns: 50% 1fr; + grid-template-rows: 50% 1fr; +} + +#city-selector > div { + min-width: 50vw; + max-width: 50vw; + min-height: 50vh; + max-height: 50vh; +} + +#seattle-clock, #guam-clock, #hawaii-clock, #london-clock { + /*height: 100px;*/ + max-width: 30vw; + margin: 5vh 5vw; + /*position: absolute;*/ + /*top: 0; left: 0; bottom: 0; right: 0;*/ + padding-top: 5vh; font-family: courier, monospace; text-align: center; color: white; - font-size: 100px; + font-size: 4rem; +} + +.city-clock { + font-size: 2.5rem; } diff --git a/index.html b/index.html index 191d3cc..c2f2c5b 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,39 @@ -
+
+ +
+ Seattle, USA +
+
+
+ +
+ Guam, USA +
+
+
+ +
+ Hawaii, USA +
+
+
+ +
+ London, UK +
+
+
+ +
+ + + diff --git a/index.js b/index.js index 877a3aa..373a6e3 100644 --- a/index.js +++ b/index.js @@ -1 +1,41 @@ -// Your code here +const getTime = () => { + let newTime = new Date(); + $('#seattle-clock > .city-clock').html(newTime); +}; + +const timeBuilder = () => { + let newTime = new Date(); + let utc = newTime.getTime()// + (newTime.getTimezoneOffset() * 60000); + return utc +} + +const guamTime = () => { + let utc = timeBuilder() + let calculatedTime = new Date(utc + (3600000 * 17)) + + $('#guam-clock > .city-clock').html(calculatedTime); +}; + +const hawaiiTime = () => { + let utc = timeBuilder() + let calculatedTime = new Date(utc + (3600000 * -3)) + + $('#hawaii-clock > .city-clock').html(calculatedTime); +}; + +const londonTime = () => { + let utc = timeBuilder() + let calculatedTime = new Date(utc + (3600000 * 8)) + + $('#london-clock > .city-clock').html(calculatedTime); +}; + + + + +$(document).ready(() => { + setInterval(getTime, 1000); + setInterval(guamTime, 1000); + setInterval(hawaiiTime, 1000); + setInterval(londonTime, 1000); +});