[ TODO ] Added button restart into navbar

README.md

@@ -1,7 +1,8 @@
-<h1>Memory Card</h1> 
-
-<img src="images/logo.png" alt="Image" height="250" width="500">
-
+# Memory Card 
 
+![Memory Card](https://github.com/DanielXavierJob/studying-memory-game/blob/main/doc/game.gif?raw=true)
 
+# Features
+- Added button restart
 
+![Gif of restart](https://github.com/DanielXavierJob/studying-memory-game/blob/main/doc/gif-restart.gif?raw=true)

css/game.css

@@ -16,13 +16,19 @@ header {
   justify-content: space-between;
   background-color: rgba(255, 255, 255, 0.8);
   font-size: 1.2em;
-  width: 100%;
-  max-width: 800px;
+  width: 80%;
+  max-width: 2000px;
   padding: 30px;
   margin: 0 0 30px;
   border-radius: 5px;
 }
 
+.restart{
+  cursor: pointer;
+}
+.restart:hover{
+  color: red;
+}
 .grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);

js/game.js

@@ -1,7 +1,7 @@
 const grid = document.querySelector('.grid');
 const spanPlayer = document.querySelector('.player');
 const timer = document.querySelector('.timer');
-
+var loop;
 const characters = [
   'beth',
   'jerry',
@@ -100,6 +100,7 @@ const createCard = (character) => {
 }
 
 const loadGame = () => {
+  grid.innerHTML = ''
   const duplicateCharacters = [...characters, ...characters];
 
   const shuffledArray = duplicateCharacters.sort(() => Math.random() - 0.5);
@@ -111,14 +112,21 @@ const loadGame = () => {
 }
 
 const startTimer = () => {
-
-  this.loop = setInterval(() => {
+  loop != null && clearInterval(this.loop)
+  timer.innerHTML = 0;
+  loop = setInterval(() => {
     const currentTime = +timer.innerHTML;
     timer.innerHTML = currentTime + 1;
   }, 1000);
 
 }
 
+//restart game
+document.querySelector('.restart').addEventListener('click', () =>{
+  startTimer();
+  loadGame();
+})
+
 window.onload = () => {
   spanPlayer.innerHTML = localStorage.getItem('player');
   startTimer();

pages/game.html

@@ -18,6 +18,8 @@
     <header>
       <span class="player"></span>
       <span>Tempo: <span class="timer">00</span></span>
+      <span class="restart">Restart</span>
+
     </header>
 
     <div class="grid"></div>