Initial commit, v1.0.0HEADmaster

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>