Beispiel:Memo-Card-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css"> <title>Memo-Quiz - 2</title> <style>
- gameboard {
display: grid; gap: 1em;
grid-template-columns: repeat(4, 1fr); width: 40em; }
- gameboard button {
width: 8em; aspect-ratio: 1 / 1; perspective: 500px; background: transparent; border: 0; padding: 0;
}
img {
max-width: 100%; display: block;
}
.flip-card-inner {
position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d;
}
ul {
text-align: start;
}
.flip-card[aria-selected="true"] .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: thin solid black; backface-visibility: hidden;
}
.flip-card-front {
background-color: #e6f2f7; transform: rotateY(180deg);
}
.flip-card-front img {
width: 100%; height: auto; background-color: #fff; display: block;
}
.flip-card-back {
background: white url(https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg); background-size: contain; background-repeat: no-repeat; background-position: center;
}
</style>
</head>
<body>
Memo-Quiz - noch ohne Funktion!
Wähle zwei Karten aus und prüfe, ob sie ein Set sind.
<img src="https://wiki.selfhtml.org/images/f/fd/Snowman.svg" alt="snowman"> <img src="https://wiki.selfhtml.org/images/9/90/Advent-candles-4.svg" alt="candles"> <img src="https://wiki.selfhtml.org/images/0/01/Selfhtml-logo-Weihnachten.png" alt="SELF-Logo mit Nikloausmütze, ca 2008"> <img src="https://wiki.selfhtml.org/images/5/59/Selfangel.jpg" alt="SELF-Mitglied als Weihnachtsengel, ca 2008">
<script> document.addEventListener("DOMContentLoaded", () => {
const gameboard = document.querySelector("#gameboard"); const images = Array.from(gameboard.querySelectorAll("img"));
images.forEach((img) => { for (let i = 0; i < 2; i++) { const button = document.createElement("button"); button.classList.add("flip-card"); button.setAttribute("aria-selected", "false");
button.addEventListener("click", () => { const isSelected = button.getAttribute("aria-selected") === "true"; button.setAttribute("aria-selected", isSelected ? "false" : "true"); });
const flipCardInner = document.createElement("div"); flipCardInner.classList.add("flip-card-inner");
const flipCardFront = document.createElement("img"); flipCardFront.classList.add("flip-card-front"); flipCardFront.src = img.src; flipCardFront.alt = img.alt;
const flipCardBack = document.createElement("div"); flipCardBack.classList.add("flip-card-back");
flipCardInner.appendChild(flipCardFront); flipCardInner.appendChild(flipCardBack); button.appendChild(flipCardInner);
gameboard.appendChild(button); }
img.remove(); });
}); </script>
</body> </html>