added counter time

Author: Pablolo

images/backwards counter.gif

@@ -24,7 +24,8 @@ <h2 class="coordinator-logo-bottom">2000</h2>
 
   <div id="container" style="display: none">
     <canvas id="coordinator" width="500" height="600"></canvas>
-      <div id="instructions-together">
+    <img id="timer-counter" src="images/backwards counter.gif" alt="counter" style="display:none;">
+    <div id="instructions-together">
       <p id="instructions"><b class="title-instructions">Instructions:</b><br> <br>Change direction with arrow keys.</p>
       <img id="arrows" src="images/keyboard2.png" alt="keyboard">
       <p id="instructions-two"><b class="be-careful">Be careful:</b> If you step out of the road more than <b class="percent-instructions">10%</b> of the time you will not pass the test!</p>

index.html

@@ -13,6 +13,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
   let rightPerc = document.getElementById('right-final-number');
   let passedFailed = document.getElementById('passed-failed');
   let instructions = document.getElementById('instructions-together');
+  let counter = document.getElementById('timer-counter');
   ctx = canvas.getContext('2d');
 
   function alertWhite() {
@@ -32,6 +33,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
   function hideInstructions() {
     playBtn.style = "display: none";
     instructions.style = "display: none";
+    counter.style = "display:block";
   }
 
   function createGameOverScreen() {

music/Short_Change My Style - Glow Machine1.mp3

@@ -167,6 +167,13 @@
 	color: #2ecc71;
 }
 
+#timer-counter {
+	position: absolute;
+	width: 200px;
+	top: 230px;
+	right: 200px;
+}
+
 /* Game Over Screen */
 
 #gameover {