Feature/quiz timer

src/components/Button.css

@@ -23,7 +23,7 @@ button:hover {
   position: relative;
 }
 
-img {
+.wrapper img {
   width: 70px;
   height: 70px;
   transform: translateY(-10px);
@@ -33,6 +33,6 @@ img {
   position: absolute;
 }
 
-.hidden {
+.wrapper .hidden {
   opacity: 0;
 }

src/components/timer/quiz-timer.css

@@ -0,0 +1,14 @@
+#clock {
+  color: white;
+  font-size: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+}
+
+#clock img {
+  height: 70px;
+  width: auto;
+  margin: 10px;
+}

src/components/timer/quiz-timer.js

@@ -0,0 +1,58 @@
+let timer;
+
+export function createTimer() {
+  const clock = document.createElement('div');
+  clock.setAttribute('id', 'clock');
+
+  const image = document.createElement('img');
+  image.src = '/timer.png';
+
+  const minutes = document.createElement('span');
+  minutes.setAttribute('id', 'timer-minutes');
+
+  const colon = document.createElement('span');
+  colon.innerText = ':';
+
+  const seconds = document.createElement('span');
+  seconds.setAttribute('id', 'timer-seconds');
+
+  clock.appendChild(image);
+  clock.appendChild(minutes);
+  clock.appendChild(colon);
+  clock.appendChild(seconds);
+
+  return clock;
+}
+
+export function startTimer() {
+  let minutes = 0;
+  let seconds = 0;
+  const min = document.getElementById('timer-minutes');
+  const sec = document.getElementById('timer-seconds');
+
+  min.innerText = '00';
+  sec.innerText = '00';
+
+  timer = setInterval(function () {
+    seconds++;
+    if (seconds === 60) {
+      seconds = 0;
+      minutes++;
+      if (minutes === 60) {
+        minutes = 0;
+      }
+      min.innerText = timerDigits(minutes);
+    }
+    sec.innerText = timerDigits(seconds);
+  }, 1000);
+}
+
+export function stopTimer() {
+  const clk = document.getElementById('clock');
+  clk.style.display = 'none';
+  clearInterval(timer);
+}
+
+function timerDigits(time_value) {
+  return time_value < 10 ? '0' + time_value : time_value;
+}

src/main.js

@@ -1,4 +1,6 @@
 import './style.css';
+import './components/timer/quiz-timer.css';
+import { createTimer, startTimer, stopTimer } from './components/timer/quiz-timer.js';
 import Button from './components/Button.js';
 
 document.querySelector('#app').innerHTML = `
@@ -18,3 +20,7 @@ const buttonStatic = Button('abort koala', 'noKoala', false, 'click', simpleCall
 
 document.querySelector('#app').append(buttonQuiz, buttonLeaderboard, buttonAdoption, buttonCredits);
 document.querySelector('#app').append(buttonStatic);
+
+
+document.querySelector('#app').appendChild(createTimer());
+startTimer();

src/style.css

@@ -1,3 +1,7 @@
+body {
+  background-color: #8ab0ab;
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;