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 @@
+
+
+
+
\ 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 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ 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 @@
+
+
+
+
+
+
\ 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 @@
+
+
+
+
+
+
+
+
\ 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 @@
+
+
+
+
+
+
\ 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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ unflipCards
+ chec
+ classList
+ vuew
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1570562414610
+
+
+ 1570562414610
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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 @@
-
-
- Memory Game
-
-
+
+ Memory Game
+
-
-
+
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