Skip to content
This repository has been archived by the owner on Jun 27, 2022. It is now read-only.

Michaels memory branch #35

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Michaels memory branch #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
24c4bd7
Initial commit
mjberry2315 Aug 12, 2019
caed96c
Created card list
mjberry2315 Aug 13, 2019
814bc87
test: Added event listener code for each card in list
mjberry2315 Aug 13, 2019
f7a500f
feat: Added refresh button that resets all cards
mjberry2315 Aug 13, 2019
76239fb
test: Commented everything out to test
mjberry2315 Aug 14, 2019
a127258
test: Testing reset and shuffle of cards
mjberry2315 Aug 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* Michaels Memory Game */

html {
box-sizing: border-box;
}
Expand Down
153 changes: 78 additions & 75 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,89 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Matching Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" href="css/app.css">
<meta charset="utf-8">
<title>Matching Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" href="css/app.css">
</head>

<body>

<div class="container">
<header>
<h1>Matching Game</h1>
</header>
<div class="container">
<header>
<h1>Matching Game</h1>
</header>

<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>

<span class="moves">3</span> Moves
<span class="moves">3</span> Moves

<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>

<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card match">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card match">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card open show">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card match">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card match">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card open show">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>

<script src="js/app.js"></script>
<script src="js/app.js"></script>
</body>
</html>

</html>
118 changes: 112 additions & 6 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,137 @@
// 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
* - 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;
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)
Expand Down