Refactor score buttons

helenclx · Jan 18, 2024 · 9b21612 · 9b21612
1 parent 1b741e4
commit 9b21612
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 15 deletions.
diff --git a/m3-basketball-scoreboard/index.html b/m3-basketball-scoreboard/index.html
@@ -19,19 +19,19 @@ <h1 class="sr-only">Basketball Scoreboard</h1>
         <section class="team">
             <h2>HOME</h2>
             <div class="team__score" id="home-score">0</div>
-            <div class="team__score-btn">
-                <button id="home-add-1">+1</button>
-                <button id="home-add-2">+2</button>
-                <button id="home-add-3">+3</button>
+            <div class="team__btn-wrapper">
+                <button class="team__btn home-btn" id="home-add-1">+1</button>
+                <button class="team__btn home-btn" id="home-add-2">+2</button>
+                <button class="team__btn home-btn" id="home-add-3">+3</button>
             </div>
         </section>
         <section class="team">
             <h2>GUEST</h2>
             <div class="team__score" id="guest-score">0</div>
-            <div class="team__score-btn">
-                <button id="guest-add-1">+1</button>
-                <button id="guest-add-2">+2</button>
-                <button id="guest-add-3">+3</button>
+            <div class="team__btn-wrapper">
+                <button class="team__btn guest-btn">+1</button>
+                <button class="team__btn guest-btn">+2</button>
+                <button class="team__btn guest-btn">+3</button>
             </div>
         </section>
     </main>

diff --git a/m3-basketball-scoreboard/script.js b/m3-basketball-scoreboard/script.js
@@ -1,13 +1,8 @@
 const homeScoreEl = document.querySelector('#home-score');
 const guestScoreEl = document.querySelector('#guest-score');
 
-const homeAddOneBtn = document.querySelector('#home-add-1');
-const homeAddTwoBtn = document.querySelector('#home-add-2');
-const homeAddThreeBtn = document.querySelector('#home-add-3');
-
-const guestAddOneBtn = document.querySelector('#guest-add-1');
-const guestAddTwoBtn = document.querySelector('#guest-add-2');
-const guestAddThreeBtn = document.querySelector('#guest-add-3');
+const homeAddScoreBtns = document.querySelectorAll('.team__btn.home-btn');
+const guestAddScoreBtns = document.querySelectorAll('.team__btn.guest-btn');
 
 let homeScore = 0;
 let guestScore = 0;