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..e480668b3 100644 --- a/js/app.js +++ b/js/app.js @@ -1,8 +1,30 @@ +// Michaels Memory Game + + /* * Create a list that holds all of your cards */ +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'); + shuffle(cardTypeArray); + } +}); + + /* * Display the cards on the page * - shuffle the list of cards using the provided "shuffle" method below @@ -10,22 +32,106 @@ * - 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; + 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; + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; } return array; } + +//*** Finding the event target when clicked *** +deck.addEventListener('click', function(e) { + console.log(e.target.children); +}); + + + + +// 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'); +// }) + + + + + /* * 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)