Beispiel:Memo-Card-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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>
  1. gameboard {
 display: grid;
 gap: 1em;

grid-template-columns: repeat(4, 1fr); width: 40em; }

  1. 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>