I’m trying to add text to pop up in a Picture Matching Quiz – if the wrong cards are matched “Please try again” which timeouts and if the correct cards are matched a Textbox with a Text corresponding to what set was matched wich can be clicked away to then try the next set.
const cards = document.querySelectorAll('.memory-card');
let hasSelectCard = false;
let lockBoard = false;
let firstCard, secondCard;
function selectCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('select');
if (!hasSelectCard) {
hasSelectCard = true;
firstCard = this;
return;
}
secondCard = this;
lockBoard = true;
checkForMatch();
}
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unselectCards();
isMatch ? disableCards() : unselectCards();
}
function disableCards() {
firstCard.removeEventListener('click', selectCard);
secondCard.removeEventListener('click', selectCard);
resetBoard();
}
function unselectCards() {
setTimeout(() => {
firstCard.classList.remove('select');
secondCard.classList.remove('select');
resetBoard();
}, 1500);
}
function resetBoard() {
[hasSelectCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
cards.forEach(card => {
let ramdomPos = Math.floor(Math.random() * 14);
card.style.order = ramdomPos;
});
})();
cards.forEach(card => card.addEventListener('click', selectCard));@charset "utf-8";
/* CSS Document */
/* styles.css */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
background: #060AB2;
}
.memory-game {
width: 640px;
height: 640px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(25% - 10px);
height: calc(33.333% - 10px);
margin: 5px;
position: relative;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
}
.memory-card.select {
transform: rotateY(180deg);
}
.memory-card:active {
transform: scale(0.97);
transition: transform .2s;
}
.front-face,
.back-face {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
border-radius: 5px;
background: #1C7CCC;
backface-visibility: hidden;
}
.front-face {
transform: rotateY(180deg);
}
.text {
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
border: 1px solid #22d;
padding: 12px;
width: 500px;
text-align: center;
}
.textwrong {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: block;
}
.textwrong {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: block;
}
.textright {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Schmetterlingsquiz</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<section class="memory-game">
<div class="memory-card" data-framework="Atlasspinner">
<img class="front-face" src="img/Atlasspinner.jpg" alt="Atlasspinner">
<img class="back-face" src="img/Atlasspinner.jpg" alt="Atlasspinner">
</div>
<div class="memory-card" data-framework="Atlasspinner">
<img class="front-face" src="img/Atlasspinner-Raupe.jpg" alt="Atlasspinner-Raupe">
<img class="back-face" src="img/Atlasspinner-Raupe.jpg" alt="Atlasspinner-Raupe">
</div>
<div class="memory-card" data-framework="Bananenfalter">
<img class="front-face" src="img/Bananenfalter.jpg" alt="Bananenfalter">
<img class="back-face" src="img/Bananenfalter.jpg" alt="Bananenfalter">
</div>
<div class="memory-card" data-framework="Bananenfalter">
<img class="front-face" src="img/Bananenfalter-Raupe.jpg" alt="Bananenfalter-Raupe">
<img class="back-face" src="img/Bananenfalter-Raupe.jpg" alt="Bananenfalter-Raupe">
</div>
<div class="memory-card" data-framework="Distelfalter">
<img class="front-face" src="img/Distelfalter.jpg" alt="Distelfalter">
<img class="back-face" src="img/Distelfalter.jpg" alt="Distelfalter">
</div>
<div class="memory-card" data-framework="Distelfalter">
<img class="front-face" src="img/Distelfalter-Raupe.jpg" alt="Distelfalter-Raupe">
<img class="back-face" src="img/Distelfalter-Raupe.jpg" alt="Distelfalter-Raupe">
</div>
<div class="memory-card" data-framework="Grosser-Schillerfalter">
<img class="front-face" src="img/Grosser-Schillerfalter.jpg" alt="Grosser-Schillerfalter">
<img class="back-face" src="img/Grosser-Schillerfalter.jpg" alt="Grosser-Schillerfalter">
</div>
<div class="memory-card" data-framework="Grosser-Schillerfalter">
<img class="front-face" src="img/Grosser-Schillerfalter-Raupe.jpg" alt="Grosser-Schillerfalter-Raupe">
<img class="back-face" src="img/Grosser-Schillerfalter-Raupe.jpg" alt="Grosser-Schillerfalter-Raupe">
</div>
<div class="memory-card" data-framework="Rotes-Ordensband">
<img class="front-face" src="img/Rotes-Ordensband.jpg" alt="Rotes-Ordensband">
<img class="back-face" src="img/Rotes-Ordensband.jpg" alt="Rotes-Ordensband">
</div>
<div class="memory-card" data-framework="Rotes-Ordensband">
<img class="front-face" src="img/Rotes-Ordensband-Raupe.jpg" alt="Rotes-Ordensband-Raupe">
<img class="back-face" src="img/Rotes-Ordensband-Raupe.jpg" alt="Rotes-Ordensband-Raupe">
</div>
<div class="memory-card" data-framework="Taubenschwaenzchen">
<img class="front-face" src="img/Taubenschwaenzchen.jpg" alt="Taubenschwaenzchen">
<img class="back-face" src="img/Taubenschwaenzchen.jpg" alt="Taubenschwaenzchen">
</div>
<div class="memory-card" data-framework="Taubenschwaenzchen">
<img class="front-face" src="img/Taubenschwaenzchen-Raupe.jpg" alt="Taubenschwaenzchen-Raupe">
<img class="back-face" src="img/Taubenschwaenzchen-Raupe.jpg" alt="Taubenschwaenzchen-Raupe">
</div>
<div class="memory-card" data-framework="Zitronenfalter">
<img class="front-face" src="img/Zitronenfalter.jpg" alt="Zitronenfalter">
<img class="back-face" src="img/Zitronenfalter.jpg" alt="Zitronenfalter">
</div>
<div class="memory-card" data-framework="Zitronenfalter">
<img class="front-face" src="img/Zitronenfalter-Raupe.jpg" alt="Zitronenfalter-Raupe">
<img class="back-face" src="img/Zitronenfalter-Raupe.jpg" alt="Zitronenfalter-Raupe">
</div>
<div style="display:none" class="textwrong">
Please try again.
</div>
<div style="display:none" class="textcorecct" data-framework="Atlasspinner">
Placeholder
</div>
<div style="display:none" class="textcorecct" data-framework="Bananenfalter">
Placeholder
</div>
<div style="display:none" class="textcorecct" data-framework="Distelfalter">
Placeholder
</div>
<div style="display:none" class="textcorecct" data-framework="Grosser-Schillerfalter">
Placeholder
</div>
<div style="display:none" class="textcorecct" data-framework="Rotes-Ordensband">
Placeholder
</div>
<div style="display:none" class="textcorecct" data-framework="Taubenschwaenzchen">
Placeholder
</div>
<div style="display:none" class="textcorecct" data-framework="Zitronenfalter">
Placeholder
</div>
</section>
<script src="./scripts.js"></script>
</body>
</html>Help would be greatly appreciated!
I tried several tutorials online to fit them into this code, but nothing worked so far.