I'm a JS beginner self-learner.
I want to make a simple app for matching words. There are four words and they form 2 pairs. I get the error message that activeCards are undefined , although they are defined as const activeCards.
<pre><div class="wrapper">
<div class="main-message">
<h1>Match the words to make correct greetings in Portuguese</h1>
</div>
<!--
<div class="left-bottom">
<div class="card set2 set2a">Boa</div>
<div class="card set1 set1a">Bom</div>
</div>
<div class="right-bottom">
<div class="card set1 set1b">dia</div>
<div class="card set2 set2b">tarde</div>
</div>
</div>
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
width: 100%;
height: 100vh;
}
.main-message {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30vh;
background-color: #999;
display: flex;
align-items: center;
justify-content: center;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
h1 {
display: block;
border: 1px solid black;
padding: 0.2rem 0.4rem;
border-radius: 10px;
}
.left-bottom {
position: absolute;
top: 30vh;
left: 0;
width: 50%;
height: 70vh;
background-color: yellow;
}
.right-bottom {
position: absolute;
top: 30vh;
right: 0;
width: 50%;
height: 70vh;
background-color: yellowgreen;
}
.left-bottom, .right-bottom {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.card {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: transparent;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1rem;
border-radius: 20px;
-webkit-box-shadow: 3px 4px 24px 0px rgba(66, 68, 90, 0.54);
-moz-box-shadow: 3px 4px 24px 0px rgba(66, 68, 90, 0.54);
box-shadow: 3px 4px 24px 0px rgba(66, 68, 90, 0.54);
transition: all 0.3s;
cursor: pointer;
}
.selected {
background-color: green;
}
<pre>
const card1a = document.querySelector(".set1a");
const card1b = document.querySelector(".set1b");
const card2a = document.querySelector(".set2a");
const card2b = document.querySelector(".set2b");
let cards = document.querySelectorAll(".card");
cards = [...cards];
let activeCard = '';
const activeCards = [];
const clickCard = function() {
activeCard = this;
cards.forEach( card => card.addEventListener("click", function(){
console.log("click");
card.classList.add("selected");
if( activeCards.length === 0) {
activeCards[0] = activeCard;
console.log("first card");
return;
} else {
console.log("second card");
cards.forEach(card => card.removeEventListener("click", clickCard));
activeCards[1] = activeCard;
if (activeCards[0].classList.contains("set1") && activeCards[1].classList.contains("set1") || activeCards[0].classList.contains("set2") && activeCards[1].classList.contains("set2")){
console.log("You found a match.");
}
}
}))
}
clickCard();
What I have tried:
I tried to google a memory game and followed the guide there but doesn't work here.