From b80694c686dbae9ba1f01938d441fc695b808d11 Mon Sep 17 00:00:00 2001
From: Kristina Arezina <arezina.kristina23@gmail.com>
Date: Tue, 8 Oct 2019 22:02:19 -0400
Subject: [PATCH] I have made a new game and redo feature with the use of
 buttons. Also, I have made a tally of the user's attempts while playing a
 round of the game, and their score which tracks how many matches they made
 within a game. Lastly, I have made a message that pops up when the user
 completed all the matches.

All the features I added are in the div with the class of extra on the HTML page of video-11.

The New Game and Redo
buttons work by calling the newGame or redo functions respectively. In scripts.js for video-11 the newGame function shuffles the cards and then calls the redo function which resets all variables and turns over the cards using a for loop.

In the function score, the scoreNum variable increases each time the function is called and outputs the score along with a message. Also, if the score becomes equivalent to 6 (the number of matches possible) the function outputs a congratulatory message.

In the attempts function, each time it is called the attemptsNum variable increases and the new value gets outputted along with a message.
---
 .idea/encodings.xml   |   4 +
 .idea/memory-game.iml |  12 +++
 .idea/misc.xml        |   6 ++
 .idea/modules.xml     |   8 ++
 .idea/vcs.xml         |   6 ++
 .idea/workspace.xml   | 233 ++++++++++++++++++++++++++++++++++++++++++
 video-10/scripts.js   |   1 +
 video-11/index.html   |  72 +++++++------
 video-11/scripts.js   |  71 ++++++++++---
 video-11/styles.css   |  34 ++++++
 10 files changed, 403 insertions(+), 44 deletions(-)
 create mode 100644 .idea/encodings.xml
 create mode 100644 .idea/memory-game.iml
 create mode 100644 .idea/misc.xml
 create mode 100644 .idea/modules.xml
 create mode 100644 .idea/vcs.xml
 create mode 100644 .idea/workspace.xml

diff --git a/.idea/encodings.xml b/.idea/encodings.xml
new file mode 100644
index 0000000..15a15b2
--- /dev/null
+++ b/.idea/encodings.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding" addBOMForNewFiles="with NO BOM" />
+</project>
\ No newline at end of file
diff --git a/.idea/memory-game.iml b/.idea/memory-game.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/.idea/memory-game.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..28a804d
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..467cff7
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/memory-game.iml" filepath="$PROJECT_DIR$/.idea/memory-game.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..083e5a2
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,233 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="37d1962c-11d4-4e7a-b558-48200b2e82e2" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/video-10/scripts.js" beforeDir="false" afterPath="$PROJECT_DIR$/video-10/scripts.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/video-11/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/video-11/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/video-11/scripts.js" beforeDir="false" afterPath="$PROJECT_DIR$/video-11/scripts.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/video-11/styles.css" beforeDir="false" afterPath="$PROJECT_DIR$/video-11/styles.css" afterDir="false" />
+    </list>
+    <ignored path="$PROJECT_DIR$/.tmp/" />
+    <ignored path="$PROJECT_DIR$/temp/" />
+    <ignored path="$PROJECT_DIR$/tmp/" />
+    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FileEditorManager">
+    <leaf>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/video-11/scripts.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="372">
+              <caret line="98" column="1" lean-forward="true" selection-start-line="98" selection-start-column="1" selection-end-line="98" selection-end-column="1" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/video-11/styles.css">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="414">
+              <caret line="74" column="19" selection-start-line="74" selection-start-column="19" selection-end-line="74" selection-end-column="19" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/video-11/index.html">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="120">
+              <caret line="8" column="15" selection-start-line="8" selection-start-column="15" selection-end-line="8" selection-end-column="15" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+    </leaf>
+  </component>
+  <component name="FindInProjectRecents">
+    <findStrings>
+      <find>unflipCards</find>
+      <find>chec</find>
+      <find>classList</find>
+      <find>vuew</find>
+    </findStrings>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="IdeDocumentHistory">
+    <option name="CHANGED_PATHS">
+      <list>
+        <option value="$PROJECT_DIR$/video-10/scripts.js" />
+        <option value="$PROJECT_DIR$/video-11/index.html" />
+        <option value="$PROJECT_DIR$/video-11/scripts.js" />
+        <option value="$PROJECT_DIR$/video-11/styles.css" />
+      </list>
+    </option>
+  </component>
+  <component name="ProjectFrameBounds">
+    <option name="x" value="639" />
+    <option name="y" value="23" />
+    <option name="width" value="801" />
+    <option name="height" value="784" />
+  </component>
+  <component name="ProjectView">
+    <navigator proportions="" version="1">
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="ProjectPane">
+        <subPane>
+          <expand>
+            <path>
+              <item name="memory-game" type="b2602c69:ProjectViewProjectNode" />
+              <item name="memory-game" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="memory-game" type="b2602c69:ProjectViewProjectNode" />
+              <item name="memory-game" type="462c0819:PsiDirectoryNode" />
+              <item name="img" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="memory-game" type="b2602c69:ProjectViewProjectNode" />
+              <item name="memory-game" type="462c0819:PsiDirectoryNode" />
+              <item name="video-11" type="462c0819:PsiDirectoryNode" />
+            </path>
+          </expand>
+          <select />
+        </subPane>
+      </pane>
+      <pane id="Scope" />
+    </panes>
+  </component>
+  <component name="PropertiesComponent">
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
+    <property name="nodejs_npm_path_reset_for_default_project" value="true" />
+    <property name="settings.editor.selected.configurable" value="preferences.sourceCode" />
+  </component>
+  <component name="RunDashboard">
+    <option name="ruleStates">
+      <list>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </option>
+  </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="37d1962c-11d4-4e7a-b558-48200b2e82e2" name="Default Changelist" comment="" />
+      <created>1570562414610</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1570562414610</updated>
+      <workItem from="1570562416028" duration="5021000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TimeTrackingManager">
+    <option name="totallyTimeSpent" value="5021000" />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="639" y="23" width="801" height="784" extended-state="0" />
+    <editor active="true" />
+    <layout>
+      <window_info id="Favorites" side_tool="true" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.20641026" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" />
+      <window_info anchor="bottom" id="Terminal" weight="0.32947975" />
+      <window_info anchor="bottom" id="Event Log" side_tool="true" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <window_info anchor="bottom" id="Find" order="1" />
+      <window_info anchor="bottom" id="Run" order="2" />
+      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
+      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
+      <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
+      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+    </layout>
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="1" />
+  </component>
+  <component name="editorHistoryManager">
+    <entry file="file://$PROJECT_DIR$/memory-game.gif">
+      <provider selected="true" editor-type-id="images" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/README.md">
+      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
+        <state split_layout="SPLIT">
+          <first_editor />
+          <second_editor />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/video-02/index.html">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/video-03/index.html">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/video-04/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="-280" />
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/video-04/scripts.js">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/video-01/index.html">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/video-10/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="477">
+          <caret line="64" column="12" lean-forward="true" selection-start-line="10" selection-start-column="2" selection-end-line="64" selection-end-column="12" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/video-10/scripts.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="60">
+          <caret line="4" column="9" lean-forward="true" selection-start-line="4" selection-start-column="9" selection-end-line="4" selection-end-column="9" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/video-11/scripts.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="372">
+          <caret line="98" column="1" lean-forward="true" selection-start-line="98" selection-start-column="1" selection-end-line="98" selection-end-column="1" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/video-11/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="120">
+          <caret line="8" column="15" selection-start-line="8" selection-start-column="15" selection-end-line="8" selection-end-column="15" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/video-11/styles.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="414">
+          <caret line="74" column="19" selection-start-line="74" selection-start-column="19" selection-end-line="74" selection-end-column="19" />
+        </state>
+      </provider>
+    </entry>
+  </component>
+</project>
\ No newline at end of file
diff --git a/video-10/scripts.js b/video-10/scripts.js
index da1f6a4..f6520e0 100644
--- a/video-10/scripts.js
+++ b/video-10/scripts.js
@@ -54,3 +54,4 @@ function resetBoard() {
 }
 
 cards.forEach(card => card.addEventListener('click', flipCard));
+
diff --git a/video-11/index.html b/video-11/index.html
index 0037907..26e59a1 100644
--- a/video-11/index.html
+++ b/video-11/index.html
@@ -1,69 +1,77 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-
-  <title>Memory Game</title>
-
-  <link rel="stylesheet" href="styles.css">
+    <meta charset="UTF-8">
+    <title>Memory Game</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-  <section class="memory-game">
+<div class="extra">
+    <div id="score">Your Score Is: 0</div>
+    <div id="attempts">Attempts: 0</div>
+    <div id="message"></div>
+
+    <button class="button" onclick="newGame()">New Game</button>
+    <button class="button" onclick="redo()" id="redo">Redo</button>
+</div>
+
+
+<section class="memory-game">
     <div class="memory-card" data-framework="aurelia">
-      <img class="front-face" src="../img/aurelia.svg" alt="Aurelia" />
-      <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
+        <img class="front-face" src="../img/aurelia.svg" alt="Aurelia" />
+        <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
     </div>
     <div class="memory-card" data-framework="aurelia">
-      <img class="front-face" src="../img/aurelia.svg" alt="Aurelia" />
-      <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
+        <img class="front-face" src="../img/aurelia.svg" alt="Aurelia" />
+        <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
     </div>
 
     <div class="memory-card" data-framework="vue">
-      <img class="front-face" src="../img/vue.svg" alt="Vue" />
-      <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
+        <img class="front-face" src="../img/vue.svg" alt="Vue" />
+        <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
     </div>
     <div class="memory-card" data-framework="vue">
-      <img class="front-face" src="../img/vue.svg" alt="Vue" />
-      <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
+        <img class="front-face" src="../img/vue.svg" alt="Vue" />
+        <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
     </div>
 
     <div class="memory-card" data-framework="angular">
-      <img class="front-face" src="../img/angular.svg" alt="Angular" />
-      <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
+        <img class="front-face" src="../img/angular.svg" alt="Angular" />
+        <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
     </div>
     <div class="memory-card" data-framework="angular">
-      <img class="front-face" src="../img/angular.svg" alt="Angular" />
-      <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
+        <img class="front-face" src="../img/angular.svg" alt="Angular" />
+        <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
     </div>
 
     <div class="memory-card" data-framework="ember">
-      <img class="front-face" src="../img/ember.svg" alt="Ember" />
-      <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
+        <img class="front-face" src="../img/ember.svg" alt="Ember" />
+        <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
     </div>
     <div class="memory-card" data-framework="ember">
-      <img class="front-face" src="../img/ember.svg" alt="Ember" />
-      <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
+        <img class="front-face" src="../img/ember.svg" alt="Ember" />
+        <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
     </div>
 
     <div class="memory-card" data-framework="backbone">
-      <img class="front-face" src="../img/backbone.svg" alt="Backbone" />
-      <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
+        <img class="front-face" src="../img/backbone.svg" alt="Backbone" />
+        <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
     </div>
     <div class="memory-card" data-framework="backbone">
-      <img class="front-face" src="../img/backbone.svg" alt="Backbone" />
-      <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
+        <img class="front-face" src="../img/backbone.svg" alt="Backbone" />
+        <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
     </div>
 
     <div class="memory-card" data-framework="react">
-      <img class="front-face" src="../img/react.svg" alt="React" />
-      <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
+        <img class="front-face" src="../img/react.svg" alt="React" />
+        <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
     </div>
     <div class="memory-card" data-framework="react">
-      <img class="front-face" src="../img/react.svg" alt="React" />
-      <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
+        <img class="front-face" src="../img/react.svg" alt="React" />
+        <img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
     </div>
-  </section>
+</section>
 
-  <script src="scripts.js"></script>
+<script src="scripts.js"></script>
 </body>
 </html>
diff --git a/video-11/scripts.js b/video-11/scripts.js
index d2e8f38..a26c2e6 100644
--- a/video-11/scripts.js
+++ b/video-11/scripts.js
@@ -3,6 +3,11 @@ const cards = document.querySelectorAll('.memory-card');
 let hasFlippedCard = false;
 let lockBoard = false;
 let firstCard, secondCard;
+let scoreNum = 0;
+let messageScore = "Your Score Is: ";
+let messageAttempts="Attempts: ";
+let cardsOpen=[];
+let attemptsNum=0;
 
 function flipCard() {
   if (lockBoard) return;
@@ -14,38 +19,52 @@ function flipCard() {
     // first click
     hasFlippedCard = true;
     firstCard = this;
-
     return;
   }
 
   // second click
   secondCard = this;
-
+  lockBoard = true;
   checkForMatch();
 }
 
 function checkForMatch() {
   let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
+  if (isMatch===true){
+    disableCards();
+    score();
+  }
+  unflipCards();
+  attempts();
+}
+
+function score() {
+  scoreNum=++scoreNum;
+  document.getElementById("score").innerText= messageScore + scoreNum;
+  if (scoreNum===6){
+    document.getElementById("message").innerText= "Congratulations you won!";
+  }
+}
 
-  isMatch ? disableCards() : unflipCards();
+function attempts(){
+  ++attemptsNum;
+  document.getElementById("attempts").innerText= messageAttempts+ attemptsNum;
 }
 
 function disableCards() {
+  cardsOpen.push(firstCard);
+  cardsOpen.push(secondCard);
   firstCard.removeEventListener('click', flipCard);
   secondCard.removeEventListener('click', flipCard);
-
   resetBoard();
 }
 
 function unflipCards() {
-  lockBoard = true;
-
   setTimeout(() => {
     firstCard.classList.remove('flip');
     secondCard.classList.remove('flip');
-
     resetBoard();
-  }, 1500);
+  }, 500);
 }
 
 function resetBoard() {
@@ -53,11 +72,39 @@ function resetBoard() {
   [firstCard, secondCard] = [null, null];
 }
 
-(function shuffle() {
+function redo() {
+  resetBoard();
+  for (var i = cardsOpen.length - 1; i >= 0; i--) {
+    cardsOpen[i].classList.remove("flip");
+    const cards = document.querySelectorAll('.memory-card');
+    cards.forEach(card => card.addEventListener('click', flipCard));
+  }
+  scoreNum = 0;
+  document.getElementById("score").innerText= messageScore + scoreNum;
+
+  attemptsNum=0;
+  document.getElementById("attempts").innerText= messageAttempts+ attemptsNum;
+
+  document.getElementById("message").innerText="";
+}
+
+function newGame(){
+  (function shuffle() {
+    cards.forEach(card => {
+      let ramdomPos = Math.ceil(Math.random() * 12);
+      card.style.order = ramdomPos;
+    });
+  })();
+  redo()
+}
+
+function shuffle() {
   cards.forEach(card => {
-    let randomPos = Math.floor(Math.random() * 12);
-    card.style.order = randomPos;
+    let ramdomPos = Math.ceil(Math.random() * 12);
+    card.style.order = ramdomPos;
   });
-})();
+}
 
 cards.forEach(card => card.addEventListener('click', flipCard));
+
+
diff --git a/video-11/styles.css b/video-11/styles.css
index 5c73946..9756889 100644
--- a/video-11/styles.css
+++ b/video-11/styles.css
@@ -10,6 +10,10 @@ body {
   background: #060AB2;
 }
 
+#score{
+  font-size: 25px;
+}
+
 .memory-game {
   width: 640px;
   height: 640px;
@@ -53,3 +57,33 @@ body {
 .front-face {
   transform: rotateY(180deg);
 }
+
+.extra{
+  color:#f4f4f4;
+  font-size:25px;
+  padding-top:calc(25% - 30px);
+  padding-left:40px;
+}
+
+.button{
+  background-color: #b1b32c;
+  border-width:1px;
+  border-color: grey;
+  color: white;
+  padding: 15px 32px;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin-top: 10px;
+  text-align: center;
+}
+
+button:hover {
+  cursor: pointer;
+  background-color: #ffffff;
+  color: black;
+}
+
+button:focus{
+  outline: none;
+}
\ No newline at end of file