From 24c4bd732f08a9477c8e958a5c808dba7bd77928 Mon Sep 17 00:00:00 2001 From: Michael Berry Date: Mon, 12 Aug 2019 14:24:11 -0700 Subject: [PATCH 1/6] Initial commit --- css/app.css | 2 + index.html | 153 ++++++++++++++++++++++++++-------------------------- js/app.js | 2 + 3 files changed, 82 insertions(+), 75 deletions(-) diff --git a/css/app.css b/css/app.css index 227769bc0..c662514ff 100644 --- a/css/app.css +++ b/css/app.css @@ -1,3 +1,5 @@ +/* Michaels Memory Game */ + html { box-sizing: border-box; } diff --git a/index.html b/index.html index 72e96f260..c00762d9f 100644 --- a/index.html +++ b/index.html @@ -1,86 +1,89 @@ - + + - - Matching Game - - - - + + Matching Game + + + + + -
-
-

Matching Game

-
+
+
+

Matching Game

+
-
-
    -
    • -
    • -
    • -
+
+
    +
    • +
    • +
    • +
- 3 Moves + 3 Moves -
- -
-
+
+ +
+
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
+ +
- + - + + \ No newline at end of file diff --git a/js/app.js b/js/app.js index 45bb5f666..7a625ea85 100644 --- a/js/app.js +++ b/js/app.js @@ -1,3 +1,5 @@ +// Michaels Memory Game + /* * Create a list that holds all of your cards */ From caed96c3e1e6f6cdaecd6b2d0127529eef356f53 Mon Sep 17 00:00:00 2001 From: Michael Berry Date: Mon, 12 Aug 2019 17:28:22 -0700 Subject: [PATCH 2/6] Created card list * Created first event to add CSS class to element --- js/app.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index 7a625ea85..7f3a69134 100644 --- a/js/app.js +++ b/js/app.js @@ -1,8 +1,23 @@ -// Michaels Memory Game +// Michaels Memory Game + /* * Create a list that holds all of your cards */ +const cardList = document.querySelectorAll('.card'); + +// Adding event listener for a card to change CSS class + +cardList[0].addEventListener('click', function flipCard() { + cardList[0].classList.add('open', 'show'); +}) + + + + + + + /* From 814bc871e256d95a2ad87507d783eb03a4a1001b Mon Sep 17 00:00:00 2001 From: Michael Berry Date: Tue, 13 Aug 2019 15:47:40 -0700 Subject: [PATCH 3/6] test: Added event listener code for each card in list --- js/app.js | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/js/app.js b/js/app.js index 7f3a69134..17a7fd5af 100644 --- a/js/app.js +++ b/js/app.js @@ -12,10 +12,65 @@ cardList[0].addEventListener('click', function flipCard() { cardList[0].classList.add('open', 'show'); }) +cardList[1].addEventListener('click', function flipCard() { + cardList[1].classList.add('open', 'show'); +}) +cardList[2].addEventListener('click', function flipCard() { + cardList[2].classList.add('open', 'show'); +}) +cardList[3].addEventListener('click', function flipCard() { + cardList[3].classList.add('open', 'show'); +}) +cardList[4].addEventListener('click', function flipCard() { + cardList[4].classList.add('open', 'show'); +}) +cardList[5].addEventListener('click', function flipCard() { + cardList[5].classList.add('open', 'show'); +}) + +cardList[6].addEventListener('click', function flipCard() { + cardList[6].classList.add('open', 'show'); +}) + +cardList[7].addEventListener('click', function flipCard() { + cardList[7].classList.add('open', 'show'); +}) + +cardList[8].addEventListener('click', function flipCard() { + cardList[8].classList.add('open', 'show'); +}) + +cardList[9].addEventListener('click', function flipCard() { + cardList[9].classList.add('open', 'show'); +}) + +cardList[10].addEventListener('click', function flipCard() { + cardList[10].classList.add('open', 'show'); +}) + +cardList[11].addEventListener('click', function flipCard() { + cardList[11].classList.add('open', 'show'); +}) + +cardList[12].addEventListener('click', function flipCard() { + cardList[12].classList.add('open', 'show'); +}) + +cardList[13].addEventListener('click', function flipCard() { + cardList[13].classList.add('open', 'show'); +}) + +cardList[14].addEventListener('click', function flipCard() { + cardList[14].classList.add('open', 'show'); +}) + +cardList[15].addEventListener('click', function flipCard() { + cardList[15].classList.add('open', 'show'); +}) From f7a500f512d74caf6bf065ac1d1e7ede29dc4247 Mon Sep 17 00:00:00 2001 From: Michael Berry Date: Tue, 13 Aug 2019 16:39:57 -0700 Subject: [PATCH 4/6] feat: Added refresh button that resets all cards --- js/app.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/js/app.js b/js/app.js index 17a7fd5af..98c37c82b 100644 --- a/js/app.js +++ b/js/app.js @@ -6,6 +6,20 @@ */ const cardList = document.querySelectorAll('.card'); + + +// Resets all cards when refresh button hit +const refreshButton = document.querySelector('.restart'); + +refreshButton.addEventListener('click', function resetCards() { + for (i = 0; i <= 15; i++) { + cardList[i].classList.remove('open', 'show', 'match'); + } + }) + + + + // Adding event listener for a card to change CSS class cardList[0].addEventListener('click', function flipCard() { From 76239fb29742d73028b1ecef6a0d6ebdcdcfdc51 Mon Sep 17 00:00:00 2001 From: Michael Berry Date: Tue, 13 Aug 2019 18:54:37 -0700 Subject: [PATCH 5/6] test: Commented everything out to test * testing event delegation to use * one event listener for the entire list --- js/app.js | 161 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 89 insertions(+), 72 deletions(-) diff --git a/js/app.js b/js/app.js index 98c37c82b..21cde6f41 100644 --- a/js/app.js +++ b/js/app.js @@ -4,89 +4,106 @@ /* * Create a list that holds all of your cards */ -const cardList = document.querySelectorAll('.card'); +// let cardList = document.querySelectorAll('.card'); // Resets all cards when refresh button hit -const refreshButton = document.querySelector('.restart'); +// const refreshButton = document.querySelector('.restart'); +// +// refreshButton.addEventListener('click', function resetCards() { +// for (i = 0; i <= 15; i++) { +// cardList[i].classList.remove('open', 'show', 'match'); +// } +// }) -refreshButton.addEventListener('click', function resetCards() { - for (i = 0; i <= 15; i++) { - cardList[i].classList.remove('open', 'show', 'match'); - } - }) - - - - -// Adding event listener for a card to change CSS class - -cardList[0].addEventListener('click', function flipCard() { - cardList[0].classList.add('open', 'show'); -}) - -cardList[1].addEventListener('click', function flipCard() { - cardList[1].classList.add('open', 'show'); -}) - -cardList[2].addEventListener('click', function flipCard() { - cardList[2].classList.add('open', 'show'); -}) - -cardList[3].addEventListener('click', function flipCard() { - cardList[3].classList.add('open', 'show'); -}) + // Testing different list with i tags -cardList[4].addEventListener('click', function flipCard() { - cardList[4].classList.add('open', 'show'); -}) + // let newCardList = document.getElementsByTagName('i'); -cardList[5].addEventListener('click', function flipCard() { - cardList[5].classList.add('open', 'show'); -}) -cardList[6].addEventListener('click', function flipCard() { - cardList[6].classList.add('open', 'show'); -}) -cardList[7].addEventListener('click', function flipCard() { - cardList[7].classList.add('open', 'show'); -}) - -cardList[8].addEventListener('click', function flipCard() { - cardList[8].classList.add('open', 'show'); -}) - -cardList[9].addEventListener('click', function flipCard() { - cardList[9].classList.add('open', 'show'); -}) - -cardList[10].addEventListener('click', function flipCard() { - cardList[10].classList.add('open', 'show'); -}) - -cardList[11].addEventListener('click', function flipCard() { - cardList[11].classList.add('open', 'show'); -}) - -cardList[12].addEventListener('click', function flipCard() { - cardList[12].classList.add('open', 'show'); -}) - -cardList[13].addEventListener('click', function flipCard() { - cardList[13].classList.add('open', 'show'); -}) - -cardList[14].addEventListener('click', function flipCard() { - cardList[14].classList.add('open', 'show'); -}) - -cardList[15].addEventListener('click', function flipCard() { - cardList[15].classList.add('open', 'show'); -}) +// Adding event listener for a card to change CSS class +// cardList[0].addEventListener('click', function flipCard() { +// cardList[0].classList.add('open', 'show'); +// }) +// +// cardList[1].addEventListener('click', function flipCard() { +// cardList[1].classList.add('open', 'show'); +// }) +// +// cardList[2].addEventListener('click', function flipCard() { +// cardList[2].classList.add('open', 'show'); +// }) +// +// cardList[3].addEventListener('click', function flipCard() { +// cardList[3].classList.add('open', 'show'); +// }) +// +// cardList[4].addEventListener('click', function flipCard() { +// cardList[4].classList.add('open', 'show'); +// }) +// +// cardList[5].addEventListener('click', function flipCard() { +// cardList[5].classList.add('open', 'show'); +// }) +// +// cardList[6].addEventListener('click', function flipCard() { +// cardList[6].classList.add('open', 'show'); +// }) +// +// cardList[7].addEventListener('click', function flipCard() { +// cardList[7].classList.add('open', 'show'); +// }) +// +// cardList[8].addEventListener('click', function flipCard() { +// cardList[8].classList.add('open', 'show'); +// }) +// +// cardList[9].addEventListener('click', function flipCard() { +// cardList[9].classList.add('open', 'show'); +// }) +// +// cardList[10].addEventListener('click', function flipCard() { +// cardList[10].classList.add('open', 'show'); +// }) +// +// cardList[11].addEventListener('click', function flipCard() { +// cardList[11].classList.add('open', 'show'); +// }) +// +// cardList[12].addEventListener('click', function flipCard() { +// cardList[12].classList.add('open', 'show'); +// }) +// +// cardList[13].addEventListener('click', function flipCard() { +// cardList[13].classList.add('open', 'show'); +// }) +// +// cardList[14].addEventListener('click', function flipCard() { +// cardList[14].classList.add('open', 'show'); +// }) +// +// cardList[15].addEventListener('click', function flipCard() { +// cardList[15].classList.add('open', 'show'); +// }) + +//****************************************** + +const deck = document.querySelector('.deck'); + +deck.addEventListener('click', function(e) { + console.log(e.target.children); +}); + + + + + + +//********************************************* /* From a127258f745e38cba0c599fcaacb673dacfc762c Mon Sep 17 00:00:00 2001 From: Michael Berry Date: Thu, 15 Aug 2019 06:20:16 -0700 Subject: [PATCH 6/6] test: Testing reset and shuffle of cards --- js/app.js | 93 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 48 insertions(+), 45 deletions(-) diff --git a/js/app.js b/js/app.js index 21cde6f41..e480668b3 100644 --- a/js/app.js +++ b/js/app.js @@ -4,22 +4,60 @@ /* * Create a list that holds all of your cards */ -// let cardList = document.querySelectorAll('.card'); +const cardList = document.querySelectorAll('.card');//All class with card + +const deck = document.querySelector('.deck'); // Everything within deck + +const cardType = deck.getElementsByTagName('i'); // i tag within deck + +const cardTypeArray = Array.from(cardType); // turning i tag in deck to array // Resets all cards when refresh button hit -// const refreshButton = document.querySelector('.restart'); -// -// refreshButton.addEventListener('click', function resetCards() { -// for (i = 0; i <= 15; i++) { -// cardList[i].classList.remove('open', 'show', 'match'); -// } -// }) +const refreshButton = document.querySelector('.restart'); + +refreshButton.addEventListener('click', function resetCards() { + for (i = 0; i <= 15; i++) { + cardList[i].classList.remove('open', 'show', 'match'); + shuffle(cardTypeArray); + } +}); + + +/* + * Display the cards on the page + * - shuffle the list of cards using the provided "shuffle" method below + * - loop through each card and create its HTML + * - add each card's HTML to the page + */ + + + + + + +// Shuffle function from http://stackoverflow.com/a/2450976 +function shuffle(array) { + var currentIndex = array.length, temporaryValue, randomIndex; + + while (currentIndex !== 0) { + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + + return array; +} + - // Testing different list with i tags - // let newCardList = document.getElementsByTagName('i'); +//*** Finding the event target when clicked *** +deck.addEventListener('click', function(e) { + console.log(e.target.children); +}); @@ -90,45 +128,10 @@ // cardList[15].classList.add('open', 'show'); // }) -//****************************************** - -const deck = document.querySelector('.deck'); - -deck.addEventListener('click', function(e) { - console.log(e.target.children); -}); - - -//********************************************* - - -/* - * Display the cards on the page - * - shuffle the list of cards using the provided "shuffle" method below - * - loop through each card and create its HTML - * - add each card's HTML to the page - */ - -// Shuffle function from http://stackoverflow.com/a/2450976 -function shuffle(array) { - var currentIndex = array.length, temporaryValue, randomIndex; - - while (currentIndex !== 0) { - randomIndex = Math.floor(Math.random() * currentIndex); - currentIndex -= 1; - temporaryValue = array[currentIndex]; - array[currentIndex] = array[randomIndex]; - array[randomIndex] = temporaryValue; - } - - return array; -} - - /* * set up the event listener for a card. If a card is clicked: * - display the card's symbol (put this functionality in another function that you call from this one)