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();