refactor: #32 predefinedUIElements separated obj

es-rene99 · Jul 18, 2021 · 2c6ef5b · 2c6ef5b
1 parent 057fe09
commit 2c6ef5b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -9,19 +9,28 @@
     <link rel="stylesheet" href="./src/sanitize.css" />
   </head>
   <body>
-    <main id="main__game" class="main__game">
-      <div id="game__timer" class="game__timer hidden-element">
-        <h1 class="timer__title">TIME:</h1>
-        <label class="timer__label" id="gameTimer"></label>
-      </div>
-      <div class="operation__list">
-        <div class="operation__item">
-          <p class="operation__question"></p>
+    <div class="app-wrapper">
+      <aside class="left-sidebar"></aside>
+      <main id="main__game" class="main__game">
+        <div id="title-screen">
+          <h1 class="title-screen__title">Calculationster</h1>
+          <button id="game__start-btn" class="game__start-btn">Start</button>
         </div>
-      </div>
-      <button id="game__start-btn" class="game__start-btn">Start</button>
-    </main>
-
+        <div id="operation__panel" class="operation__panel hidden-element">
+          <p id="operation__question" class="operation__question"></p>
+        </div>
+      </main>
+      <aside class="right-sidebar">
+        <div id="game__timer" class="game__timer hidden-element">
+          <h1 class="timer__title">Time:</h1>
+          <label class="timer__label" id="gameTimer"></label>
+        </div>
+        <div id="game__score" class="game__score hidden-element">
+          <h1 class="score__title">Score:</h1>
+          <label class="score__label" id="gameScore"></label>
+        </div>
+      </aside>
+    </div>
     <script src="./src/main.js"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,3 +1,13 @@
+/*
+Contains the constant uiElements, TODO still need to refactor
+*/
+const predefinedUIElements = {
+  gameStartBtn: document.getElementById('game__start-btn'),
+  gameTimer: document.getElementById('game__timer'),
+  operationPanel: document.getElementById('operation__panel'),
+  operationQuestion: document.getElementById('operation__question'),
+};
+
 /*
 Returns a random digit [0-9]
 I'm leaving this here because other people have been using it but
@@ -194,8 +204,7 @@ function askProblem() {
     numDigits = 2;
     problem = makeRandomExpression(numTerms, numDigits);
   }
-  const question = document.getElementsByClassName('operation__question')[0];
-  question.textContent = problem;
+  predefinedUIElements.operationQuestion.textContent = problem;
 }
 
 const timer = {
@@ -248,30 +257,29 @@ function checkIfAnswerIsCorrect() {
 
 // display the problem, add input field and a button to check the result
 function displayProblem() {
-  const operationItem = document.getElementsByClassName('operation__item')[0];
+  const { operationPanel } = predefinedUIElements;
   const answerInputWrapper = document.createElement('p');
   const answerInput = document.createElement('input');
   answerInput.id = 'answer';
-  operationItem.appendChild(answerInputWrapper);
+  operationPanel.appendChild(answerInputWrapper);
   answerInputWrapper.appendChild(answerInput);
   const submitButton = document.createElement('button');
   submitButton.id = 'submit';
   submitButton.textContent = 'submit';
-  operationItem.appendChild(submitButton);
+  operationPanel.appendChild(submitButton);
   submitButton.addEventListener('click', checkIfAnswerIsCorrect);
 }
 
 const uiHandler = {
-  gameStartBtn: document.getElementById('game__start-btn'),
-  gameTimer: document.getElementById('game__timer'),
   toggleHiddenElement(element) {
     element.classList.toggle('hidden-element');
   },
   activateEventListeners() {
-    this.gameStartBtn.onclick = () => {
+    predefinedUIElements.gameStartBtn.onclick = () => {
       timer.startTimer();
-      this.toggleHiddenElement(this.gameStartBtn);
-      this.toggleHiddenElement(this.gameTimer);
+      this.toggleHiddenElement(predefinedUIElements.gameStartBtn);
+      this.toggleHiddenElement(predefinedUIElements.gameTimer);
+      this.toggleHiddenElement(predefinedUIElements.operationPanel);
       displayProblem();
       askProblem();
     };