From 625c8f402adb0dddcdc9180b4d08ec4f092e6d61 Mon Sep 17 00:00:00 2001 From: Tor Shimizu Date: Sun, 20 May 2018 23:08:46 -0700 Subject: [PATCH 1/2] starter code for js clock code --- index.css | 4 ++-- index.html | 31 ++++++++++++++++++++++++++++++- index.js | 14 +++++++++++++- 3 files changed, 45 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index ec4a909..0205f3a 100644 --- a/index.css +++ b/index.css @@ -2,11 +2,11 @@ body { background-color: #80d4ea; } -#clock { +#seattle-clock, #guam-clock, #hawaii-clock { height: 100px; width: 800px; margin: auto; - position: absolute; + /*position: absolute;*/ top: 0; left: 0; bottom: 0; right: 0; padding-top: 70px; font-family: courier, monospace; diff --git a/index.html b/index.html index 191d3cc..0b8873a 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,36 @@ -
+
+ +
+ Seattle, USA +
+ +
+
+ + + +
+ + + diff --git a/index.js b/index.js index 877a3aa..712c284 100644 --- a/index.js +++ b/index.js @@ -1 +1,13 @@ -// Your code here +const getTime = () => { + let newTime = new Date(); + + $('.city-clock').html(newTime.toString()); +} + + + + + +$(document).ready(() => { + setInterval(getTime(), 1000); +}); From d4c74d4fb283cec484db4ec3b93bbb734a124841 Mon Sep 17 00:00:00 2001 From: Tor Shimizu Date: Mon, 21 May 2018 16:43:22 -0700 Subject: [PATCH 2/2] refactored and added multiple city clocks --- index.css | 31 ++++++++++++++++++++++++------- index.html | 13 ++++++++----- index.js | 32 ++++++++++++++++++++++++++++++-- 3 files changed, 62 insertions(+), 14 deletions(-) diff --git a/index.css b/index.css index 0205f3a..741f903 100644 --- a/index.css +++ b/index.css @@ -2,15 +2,32 @@ body { background-color: #80d4ea; } -#seattle-clock, #guam-clock, #hawaii-clock { - height: 100px; - width: 800px; - margin: auto; +#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: 70px; + /*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 0b8873a..c2f2c5b 100644 --- a/index.html +++ b/index.html @@ -12,23 +12,26 @@
Seattle, USA
-
- + + +
+ London, UK +
+
+
diff --git a/index.js b/index.js index 712c284..373a6e3 100644 --- a/index.js +++ b/index.js @@ -1,13 +1,41 @@ const getTime = () => { let newTime = new Date(); + $('#seattle-clock > .city-clock').html(newTime); +}; - $('.city-clock').html(newTime.toString()); +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(getTime, 1000); + setInterval(guamTime, 1000); + setInterval(hawaiiTime, 1000); + setInterval(londonTime, 1000); });