commit a987dc3230c720bfad13f123aa140d56ec983b45 Author: SowinskiBraeden Date: Mon May 19 10:19:30 2025 -0700 initial commit diff --git a/back.webp b/back.webp new file mode 100644 index 0000000..d906034 Binary files /dev/null and b/back.webp differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..be894c1 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + Assignment 3 + + + + + +
+
+

Guessing Game

+ +
+ + + +
+ + +
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..52f7c4d --- /dev/null +++ b/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(); + }); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..d083005 --- /dev/null +++ b/style.css @@ -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); +} \ No newline at end of file