-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
129 lines (116 loc) · 3.81 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
// Grab a couple of things
const section = document.querySelector('section');
const playerLivesCount = document.querySelector('span');
const button = document.querySelector('button');
let playerLives = 8;
// Link text
playerLivesCount.textContent = playerLives;
const getData = () => [
{ imgSrc: './images/cycling.jpg', id: 1, name: 'cycling' },
{ imgSrc: './images/piano.jpg', id: 2, name: 'piano' },
{ imgSrc: './images/fkatwigs.jpeg', id: 3, name: 'fka twigs' },
{ imgSrc: './images/fleetwood.jpeg', id: 4, name: 'fleetwood' },
{ imgSrc: './images/flowers.jpg', id: 5, name: 'flowers' },
{ imgSrc: './images/ledzep.jpeg', id: 6, name: 'led zeppelin' },
{ imgSrc: './images/ricardo.jpg', id: 7, name: 'ricardo' },
{ imgSrc: './images/pinkfloyd.jpeg', id: 8, name: 'pink floyd' },
{ imgSrc: './images/cycling.jpg', id: 9, name: 'cycling' },
{ imgSrc: './images/piano.jpg', id: 10, name: 'piano' },
{ imgSrc: './images/fkatwigs.jpeg', id: 11, name: 'fka twigs' },
{ imgSrc: './images/fleetwood.jpeg', id: 12, name: 'fleetwood' },
{ imgSrc: './images/flowers.jpg', id: 13, name: 'flowers' },
{ imgSrc: './images/ledzep.jpeg', id: 14, name: 'led zeppelin' },
{ imgSrc: './images/ricardo.jpg', id: 15, name: 'ricardo' },
{ imgSrc: './images/pinkfloyd.jpeg', id: 16, name: 'pink floyd' },
];
//Randomize
const randomize = () => {
const cardData = getData();
cardData.sort(() => Math.random() - 0.5);
return cardData;
};
// Card Generator
const cardGenerator = () => {
const cardData = randomize();
console.log(cardData);
//Generate the HTML
cardData.forEach((item) => {
const card = document.createElement('div');
const face = document.createElement('img');
const back = document.createElement('div');
card.classList = 'card';
face.classList = 'face';
back.classList = 'back';
//Attach the info to the cards
face.src = item.imgSrc;
card.setAttribute('name', item.name);
//Attach the cards to the section
section.appendChild(card);
card.appendChild(face);
card.appendChild(back);
card.addEventListener('click', (e) => {
card.classList.toggle('toggleCard');
checkCards(e);
});
});
};
//Check Cards
const checkCards = (e) => {
console.log(e);
const clickedCard = e.target;
console.log(clickedCard);
clickedCard.classList.add('flipped');
const flippedCards = document.querySelectorAll('.flipped');
const toggleCards = document.querySelectorAll('.toggleCard');
//Logic
if (flippedCards.length === 2) {
if (
flippedCards[0].getAttribute('name') ===
flippedCards[1].getAttribute('name')
) {
console.log('match');
flippedCards.forEach((card) => {
card.classList.remove('flipped');
card.style.pointerEvents = 'none';
});
} else {
console.log('wrong');
flippedCards.forEach((card) => {
card.classList.remove('flipped');
setTimeout(() => card.classList.remove('toggleCard'), 1150);
});
playerLives--;
playerLivesCount.textContent = playerLives;
if (playerLives === 0) {
restart('😒😮 try again!');
}
}
}
//Run a check to see if we won the game
if (toggleCards.length === 16) {
setTimeout(() => restart('👍❤️ you won'), 1300);
}
};
//Restart
const restart = (text) => {
let cardData = randomize();
let faces = document.querySelectorAll('.face');
let cards = document.querySelectorAll('.card');
section.style.pointerEvents = 'none';
cardData.forEach((item, index) => {
cards[index].classList.remove('toggleCard');
//Randomize
setTimeout(() => {
cards[index].style.pointerEvents = 'all';
faces[index].src = item.imgSrc;
cards[index].setAttribute('name', item.name);
section.style.pointerEvents = 'all';
}, 1000);
});
playerLives = 8;
playerLivesCount.textContent = playerLives;
setTimeout(() => alert(text), 100);
};
//Restart button message
button.addEventListener('click', () => alert('Aaand try again👌'));
cardGenerator();