pokebuilder

1 month ago · 1e8c903541
2 changed files with 72 additions and 0 deletions
--- a/32_pokemon_team_builder/index.html
+++ b/32_pokemon_team_builder/index.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Poké-team builder</title>
+</head>
+<body>
+    <h1>Poké-team builder</h1>
+    <div class="controls">
+        <button id="btnGeneruj">Sestav náhodný tým</button>
+        <button id="btnUloz">Uložit tento tým</button>
+    </div>
+
+    <div id="tym"></div>
+    
+    <script src="script.js"></script>
+</body>
+</html>
--- a/32_pokemon_team_builder/script.js
+++ b/32_pokemon_team_builder/script.js
@ -0,0 +1,53 @@
+const tymDiv = document.getElementById("tym");
+const btnGeneruj = document.getElementById("btnGeneruj");
+const btnUloz = document.getElementById("btnUloz")
+
+let aktualniTym = [];
+
+async function nactiPokemona(id) {
+    const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
+    const response = await fetch(url);
+    const data = response.json();
+    return data
+}
+async function zobrazTym(seznamID) {
+    tymDiv.innerHTML = "";
+    aktualniTym = seznamID;
+    for (const id of seznamID){
+        const poke = await nactiPokemona(id);
+        const div = document.createElement("div");
+        div.innerHTML= `
+            <img src="${poke.sprites.other["official-artwork"].front_default}" 
+                alt="${poke.name}" width="100"
+            >
+            <h3>${poke.name}</h3>
+            <p>ID: #${poke.id}</p>
+            <hr>
+            `;
+        tymDiv.appendChild(div);
+    }
+}
+
+function vygenerujNahodnaID() {
+    let ids= [];
+    for (let i = 0; i<6;i++){
+        const nahoda = Math.floor(Math.random()*151)+1;
+        ids.push(nahoda);
+    }
+    zobrazTym(ids);
+}
+
+btnGeneruj.addEventListener("click",vygenerujNahodnaID)
+
+btnUloz.addEventListener("click",() => {
+    localStorage.setItem("moje_pokemony",JSON.stringify(aktualniTym));
+    alert("Tým uložen do prohlížeče");
+});
+
+function nactiUlozenyTym() {
+    const ulozeno = localStorage.getItem("moje_pokemony");
+    if (ulozeno){
+        zobrazTym(JSON.parse(ulozeno));
+    }
+}
+nactiUlozenyTym();