hi there i have an issue with the memory game im trying to code apparently the script is not responding the the program, any idea? by the way is html/javascript/css
///////////////////////////////////////
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<TITLE>MEMORY GAME</TITLE>
<link rel="StyleSheet" type="text/css" href="StyleSheet.css" />
</HEAD>
<body>
<section class="container">
<ul class="cards">
<li class="card">
<section class="front"> </section> <img src="apes.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="batman-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section>
<img src="santa.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section><img src="snow10.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section> <img src="mon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section><img src="CCTV-Camera-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section> <img src="cvn.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section> <img src="eagle.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="Game-of-Thrones-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="Game-of-Thrones-icon.png" alt="card-image">
<section class="back">
<img src="Game-of-Thrones-icon.png" alt="card-image">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="tower.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section><img src="GTO-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="Viking-Angry-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="jto.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section> <img src="Mustang-GT-icon.png" alt="card-image" />
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="pop.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="apes.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section><img src="batman-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="santa.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="snow10.png" alt="card-image" />
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="mon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="CCTV-Camera-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="cvn.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="eagle.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section><img src="fishPhoto-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="Game-of-Thrones-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="tower.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="GTO-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="Viking-Angry-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section><img src="jto.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section><img src="Mustang-GT-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section><img src="pop.png" alt="card-image">
<section class="back">
</section>
</li>
</ul>
</section>
<script >
let counter = 0;
let first = "";
let second = "";
const cards = document.querySelectorAll(".cards .card");
cards.forEach((card) => {
card.addEventListener("click", () => {
card.classList.add("clicked");
if (counter === 0) {
firstSelection = card.getAttribute("card-image");
counter++;
} else {
secondSelection = card.getAttribute("card-image");
counter = 0;
if (firstSelection === secondSelection) {
const correctCards = document.querySelectorAll(
".card[img='" + first + "']"
);
correctCards[0].classList.add("checked");
correctCards[0].classList.remove("clicked");
correctCards[1].classList.add("checked");
correctCards[1].classList.remove("clicked");
} else {
const incorrectCards = document.querySelectorAll(".card.clicked");
incorrectCards[0].classList.add("shake");
incorrectCards[1].classList.add("shake");
setTimeout(() => {
incorrectCards[0].classList.remove("shake");
incorrectCards[0].classList.remove("clicked");
incorrectCards[1].classList.remove("shake");
incorrectCards[1].classList.remove("clicked");
}, 200);
}
}
});
});
</script>
</body>
</HTML>
hi there i have an issue with the memory game im trying to code apparently the script is not responding the the program, any idea? by the way is html/javascript/css
///////////////////////////////////////
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<TITLE>MEMORY GAME</TITLE>
<link rel="StyleSheet" type="text/css" href="StyleSheet.css" />
</HEAD>
<body>
<section class="container">
<ul class="cards">
<li class="card">
<section class="front"> </section> <img src="apes.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="batman-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section>
<img src="santa.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section><img src="snow10.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section> <img src="mon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section><img src="CCTV-Camera-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section> <img src="cvn.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section> <img src="eagle.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="Game-of-Thrones-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="Game-of-Thrones-icon.png" alt="card-image">
<section class="back">
<img src="Game-of-Thrones-icon.png" alt="card-image">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="tower.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section><img src="GTO-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="Viking-Angry-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="jto.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section> <img src="Mustang-GT-icon.png" alt="card-image" />
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="pop.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="apes.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section><img src="batman-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="santa.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="snow10.png" alt="card-image" />
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="mon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="CCTV-Camera-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="cvn.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="eagle.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section><img src="fishPhoto-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="Game-of-Thrones-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="tower.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="GTO-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"> </section> <img src="Viking-Angry-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section><img src="jto.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section><img src="Mustang-GT-icon.png" alt="card-image">
<section class="back">
</section>
</li>
<li class="card">
<section class="front"></section><img src="pop.png" alt="card-image">
<section class="back">
</section>
</li>
</ul>
</section>
<script >
let counter = 0;
let first = "";
let second = "";
const cards = document.querySelectorAll(".cards .card");
cards.forEach((card) => {
card.addEventListener("click", () => {
card.classList.add("clicked");
if (counter === 0) {
firstSelection = card.getAttribute("card-image");
counter++;
} else {
secondSelection = card.getAttribute("card-image");
counter = 0;
if (firstSelection === secondSelection) {
const correctCards = document.querySelectorAll(
".card[img='" + first + "']"
);
correctCards[0].classList.add("checked");
correctCards[0].classList.remove("clicked");
correctCards[1].classList.add("checked");
correctCards[1].classList.remove("clicked");
} else {
const incorrectCards = document.querySelectorAll(".card.clicked");
incorrectCards[0].classList.add("shake");
incorrectCards[1].classList.add("shake");
setTimeout(() => {
incorrectCards[0].classList.remove("shake");
incorrectCards[0].classList.remove("clicked");
incorrectCards[1].classList.remove("shake");
incorrectCards[1].classList.remove("clicked");
}, 200);
}
}
});
});
</script>
</body>
</HTML>
