Add and style a rounds-won score counter for later js implementation

Robrowno · Apr 13, 2022 · f1e9cc9 · f1e9cc9
1 parent 9fe0540
commit f1e9cc9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -123,7 +123,7 @@ h1 {
 }
 
 /*-- Timer box styling --*/
-#timer {
+#timer, #rounds {
  background: #fff;
  border: 3px solid black;
  display: flex;
@@ -136,6 +136,15 @@ h1 {
  width: 70px
 }
 
+#rounds-label {
+ margin: 0 auto;
+ font-size: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
 /* 'Arena styling */
 .arena-block {
  background-color: lightgreen;

diff --git a/index.html b/index.html
@@ -56,7 +56,7 @@ <h2 class="subheading"> Choose Your Weapon!</h2>
  </div>
  </div>
 
- <div id="timer">0:00</div>
+ <div id="timer">00:00</div>
 
  <div class="content-block">
  <div class="block">
@@ -75,7 +75,8 @@ <h2 class="subheading"></h2>
  <div id="comp-score"> Comp</div>
  </div>
  </div>
-
+ <label id="rounds-label">Rounds</label>
+ <div id="rounds"><span id="u-rounds">0</span>:<span id="c-rounds">0</span></div>
  <div id="reset">Reset</div>
  </main>