Add UTC clock to header

src/js/hostbanner.js

@@ -1,3 +1,5 @@
+import { _elWithAttrs, _elWithClass } from './modules/utils.js'
+
 window.addEventListener('DOMContentLoaded',
   () => {
     const display = []
@@ -15,5 +17,44 @@ window.addEventListener('DOMContentLoaded',
       displayEl.appendChild(text)
       document.body.append(displayEl)
     }
+    addClock()
   }
 )
+
+function addClock () {
+  const clock = _elWithAttrs('div', { id: 'clock' })
+  const hm = _elWithClass('span', 'hours-mins')
+  const secs = _elWithClass('span', 'secs')
+  const clockEls = { hm, secs, displayed: false }
+  clock.append(hm, secs)
+
+  document.querySelector('.header-page-buttons').append(clock)
+
+  window.setInterval(() => {
+    updateClock(clockEls)
+  }, 1000)
+
+  window.addEventListener('showClock', () => {
+    clock.classList.add('show')
+  })
+}
+
+function updateClock (clockEls) {
+  const d = new Date()
+  clockEls.hm.textContent = getHoursAndMins(d)
+  clockEls.secs.textContent = padZero(d.getUTCSeconds())
+  if (!clockEls.displayed) {
+    window.dispatchEvent(new Event('showClock'))
+    clockEls.displayed = true
+  }
+}
+
+function getHoursAndMins (dateObj) {
+  const h = padZero(dateObj.getUTCHours())
+  const m = padZero(dateObj.getUTCMinutes())
+  return h + ':' + m
+}
+
+function padZero (num) {
+  return (num + 100).toString().slice(-2)
+}

src/sass/style.sass

@@ -60,6 +60,7 @@ header
 	margin-top: 12.5px
 
 .header-page-buttons
+	position: relative
 	flex-grow: 1
 	flex-direction: row !important
 	justify-content: flex-start
@@ -108,6 +109,29 @@ header
 	a
 		color: #fff
 
+#clock
+	opacity: 0
+	transition: opacity 0.3s
+	font-size: 0.8em
+	padding: 8px
+	font-family: monospace
+	background-color: #fff
+	color: #000
+	border-radius: 0 0 12px 12px
+	position: absolute
+	top: -16px
+	right: 3em
+	&::after
+		content: "UTC"
+		margin-left: 0.2em
+	&.show
+		opacity: 1
+	.hours-mins
+		font-size: 1.4em
+	.secs
+		color: #5f5f5f
+		margin-left: 0.2em
+
 main
 		padding: 1em 30px 25px