initial commit

2025-05-19 10:19:30 -07:00
commit a987dc3230
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Assignment 3</title> 
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="./style.css">
+    </head>
+    <body>
+        <div class="h-100 d-flex align-items-center justify-content-center">
+            <div class="mt-5">
+                <h1>Guessing Game</h1>
+        
+                <div id="difficulty-select">
+                    <button class="mx-2" onclick="select(3)">Easy</button>
+                    <button class="mx-2" onclick="select(6)">Medium</button>
+                    <button class="mx-2" onclick="select(12)">Hard</button>
+                </div>
+        
+                <div id="game" class="mt-5" style="display: none;">
+                    <template id="card-template">
+                        <div class="card">
+                            <input hidden value="unlocked" class="status">
+                            <img src="" class="front_face">
+                            <img src="./back.webp" class="back_face">
+                        </div>
+                    </template>
+                        
+                    <div id="cards">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="./script.js"></script>
+</html>
@@ -0,0 +1,81 @@
+async function render(pokemon) {  
+    pokemon.forEach((poke) => {
+        let card = document.getElementById("card-template").content.cloneNode(true);
+        card.querySelector(".front_face").src = poke.sprites.other['official-artwork'].front_default;
+        if (pokemon.length == 12) {
+            card.querySelector(".card").style.width = "25%";
+            document.getElementById("cards").style.width = "800px";
+            document.getElementById("cards").style.height = "600px";
+        } else if (pokemon.length == 24) {
+            card.querySelector(".card").style.width = "16.66%";
+            document.getElementById("cards").style.width = "800px";
+            document.getElementById("cards").style.height = "600px";
+        }
+        document.getElementById("cards").appendChild(card);
+    });
+}
+
+async function loadPokemon(difficulty) {
+    let response = await fetch(`https://pokeapi.co/api/v2/pokemon?offset=0&limit=${difficulty}`);
+    let data = await response.json();
+    // console.log(data.results);
+
+    let pokemon = [];
+
+    for (let i = 0; i < data.results.length; i++) {
+        let poke = data.results[i];
+    
+        let pokeResponse = await fetch(`https://pokeapi.co/api/v2/pokemon/${poke.name}`);
+        let pokeObj = await pokeResponse.json();
+    
+        pokemon.push(pokeObj);
+        pokemon.push(pokeObj);
+    }
+
+    return pokemon;
+}
+
+function shuffle(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+}
+
+function start() {
+    let first;
+
+    document.querySelectorAll(".card").forEach((card) => {
+        card.addEventListener("click", (event) => {
+            if (card.querySelector("status").value == "locked") return;
+            card.classList.toggle('flip');
+
+            if (!first) {
+                first = card;
+            } else {
+                if (first.querySelector(".front_face").src === card.querySelector(".front_face").src) {
+                    console.log("right");
+                    first.querySelector("status").value = "locked";
+                    card.querySelector("status").value = "locked";
+                } else {
+                    console.log("wrong");
+                    setTimeout(() => {
+                        first.classList.toggle("flip");
+                        card.classList.toggle("flip");
+                        first = undefined;
+                    }, 1000);
+                }
+            }
+        });
+    });
+}
+
+async function select(difficulty) {
+    let pokemon = await loadPokemon(difficulty).then((pokemon) => (pokemon));
+    shuffle(pokemon);
+    render(pokemon).then(() => {
+        document.getElementById("difficulty-select").style.display = "none";
+        document.getElementById("game").style.display = "block";
+        start();
+    });
+}
@@ -0,0 +1,41 @@
+body {
+  margin: 0px;
+}
+
+#cards {
+  border: 2px tomato solid;
+  width: 600px;
+  height: 400px;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+
+.card {
+  width: 33.33%;
+  position: relative;
+  transition: transform 1s;
+  perspective: 1000px;
+  transform-style: preserve-3d;
+}
+
+img {
+  width: 100%
+}
+
+.front_face,
+.back_face {
+  position: absolute;
+  backface-visibility: hidden;
+}
+
+
+.flip {
+  transform: rotateY(180deg);
+}
+
+
+.front_face {
+  transform: rotateY(180deg);
+}