initial commit

script.js

@@ -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();
+    });
+}