aboutsummaryrefslogtreecommitdiffstats
path: root/src/routes/Home.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'src/routes/Home.svelte')
-rw-r--r--src/routes/Home.svelte195
1 files changed, 195 insertions, 0 deletions
diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte
new file mode 100644
index 0000000..8092ee1
--- /dev/null
+++ b/src/routes/Home.svelte
@@ -0,0 +1,195 @@
+<script lang="ts">
+ // interface PokemonsJson {
+ // count: number;
+ // next?: string;
+ // previous?: string;
+ // results: [{ name: string; url: string }];
+ // }
+ const getPokemons = async () /*: Promise<PokemonsJson>*/ => {
+ const ps = await fetch("https://pokeapi.co/api/v2/pokemon?limit=100").then(
+ (res) => res.json()
+ );
+ console.log(ps);
+ const pokemons = [];
+ for (const poke of ps.results) {
+ const name = poke.name;
+ const pokeData = await fetch(
+ "https://pokeapi.co/api/v2/pokemon/" + name
+ ).then((res) => res.json());
+
+ console.log();
+ pokemons.push({ name, pokeData });
+ }
+ return pokemons;
+ };
+
+ let pokemonName = "";
+ function filterPokemons(pokemons, pokeName /*: { name: string }[]*/) {
+ return pokemons.filter((p) => p.name.includes(pokeName));
+ }
+</script>
+
+<section class="text-gray-600 body-font">
+ <div class="container px-5 py-24 mx-auto">
+ <div class="flex flex-col text-center w-full mb-20">
+ <h2
+ class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1"
+ >
+ I ❤️ SERIES
+ </h2>
+ <h1
+ class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900"
+ >
+ List of pokemons
+ </h1>
+ <p class="lg:w-2/3 mx-auto leading-relaxed text-base">
+ Data is taken from pokeapi.co, so they are the one to blame for any
+ errors
+ </p>
+ </div>
+ <div class="w-full flex justify-center flex-col items-center">
+ <label
+ for="name"
+ class="leading-7 text-lg text-gray-600 flex justify-center items-center mr-3"
+ >Name of pokemon to find</label
+ >
+ <input
+ type="text"
+ id="name"
+ name="name"
+ bind:value={pokemonName}
+ class="w-3/5 bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+ />
+ </div>
+ <div class="flex flex-wrap justify-center">
+ {#await getPokemons()}
+ <h1>Downolading pokemons</h1>
+ {:then pokemons}
+ {#each filterPokemons(pokemons, pokemonName) as pokemon}
+ <div class="m-5">
+ <img
+ src={pokemon.pokeData.sprites.back_default}
+ width="250"
+ alt="{pokemon.name} image"
+ />
+ <p class="text-4xl text-black text-center mt-3">{pokemon.name}</p>
+ </div>
+ {/each}
+ {/await}
+
+ <!-- <div -->
+ <!-- class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
+ <!-- > -->
+ <!-- <h2 -->
+ <!-- class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
+ <!-- > -->
+ <!-- Shooting Stars -->
+ <!-- </h2> -->
+ <!-- <p class="leading-relaxed text-base mb-4"> -->
+ <!-- Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
+ <!-- hexagon disrupt edison bulbche. -->
+ <!-- </p> -->
+ <!-- <a class="text-indigo-500 inline-flex items-center" -->
+ <!-- >Learn More -->
+ <!-- <svg -->
+ <!-- fill="none" -->
+ <!-- stroke="currentColor" -->
+ <!-- stroke-linecap="round" -->
+ <!-- stroke-linejoin="round" -->
+ <!-- stroke-width="2" -->
+ <!-- class="w-4 h-4 ml-2" -->
+ <!-- viewBox="0 0 24 24" -->
+ <!-- > -->
+ <!-- <path d="M5 12h14M12 5l7 7-7 7" /> -->
+ <!-- </svg> -->
+ <!-- </a> -->
+ <!-- </div> -->
+ <!-- <div -->
+ <!-- class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
+ <!-- > -->
+ <!-- <h2 -->
+ <!-- class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
+ <!-- > -->
+ <!-- The Catalyzer -->
+ <!-- </h2> -->
+ <!-- <p class="leading-relaxed text-base mb-4"> -->
+ <!-- Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
+ <!-- hexagon disrupt edison bulbche. -->
+ <!-- </p> -->
+ <!-- <a class="text-indigo-500 inline-flex items-center" -->
+ <!-- >Learn More -->
+ <!-- <svg -->
+ <!-- fill="none" -->
+ <!-- stroke="currentColor" -->
+ <!-- stroke-linecap="round" -->
+ <!-- stroke-linejoin="round" -->
+ <!-- stroke-width="2" -->
+ <!-- class="w-4 h-4 ml-2" -->
+ <!-- viewBox="0 0 24 24" -->
+ <!-- > -->
+ <!-- <path d="M5 12h14M12 5l7 7-7 7" /> -->
+ <!-- </svg> -->
+ <!-- </a> -->
+ <!-- </div> -->
+ <!-- <div -->
+ <!-- class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
+ <!-- > -->
+ <!-- <h2 -->
+ <!-- class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
+ <!-- > -->
+ <!-- Neptune -->
+ <!-- </h2> -->
+ <!-- <p class="leading-relaxed text-base mb-4"> -->
+ <!-- Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
+ <!-- hexagon disrupt edison bulbche. -->
+ <!-- </p> -->
+ <!-- <a class="text-indigo-500 inline-flex items-center" -->
+ <!-- >Learn More -->
+ <!-- <svg -->
+ <!-- fill="none" -->
+ <!-- stroke="currentColor" -->
+ <!-- stroke-linecap="round" -->
+ <!-- stroke-linejoin="round" -->
+ <!-- stroke-width="2" -->
+ <!-- class="w-4 h-4 ml-2" -->
+ <!-- viewBox="0 0 24 24" -->
+ <!-- > -->
+ <!-- <path d="M5 12h14M12 5l7 7-7 7" /> -->
+ <!-- </svg> -->
+ <!-- </a> -->
+ <!-- </div> -->
+ <!-- <div -->
+ <!-- class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
+ <!-- > -->
+ <!-- <h2 -->
+ <!-- class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
+ <!-- > -->
+ <!-- Melanchole -->
+ <!-- </h2> -->
+ <!-- <p class="leading-relaxed text-base mb-4"> -->
+ <!-- Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
+ <!-- hexagon disrupt edison bulbche. -->
+ <!-- </p> -->
+ <!-- <a class="text-indigo-500 inline-flex items-center" -->
+ <!-- >Learn More -->
+ <!-- <svg -->
+ <!-- fill="none" -->
+ <!-- stroke="currentColor" -->
+ <!-- stroke-linecap="round" -->
+ <!-- stroke-linejoin="round" -->
+ <!-- stroke-width="2" -->
+ <!-- class="w-4 h-4 ml-2" -->
+ <!-- viewBox="0 0 24 24" -->
+ <!-- > -->
+ <!-- <path d="M5 12h14M12 5l7 7-7 7" /> -->
+ <!-- </svg> -->
+ <!-- </a> -->
+ <!-- </div> -->
+ <!-- </div> -->
+ <!-- <button -->
+ <!-- class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg" -->
+ <!-- >Button</button -->
+ <!-- > -->
+ </div>
+ </div>
+</section>
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-23 05:24:29 +0000