add pokedex project to site

frontend/src/components/projects/pokedex/Pokedex.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { P } from "flowbite-svelte";
+	import Pokeimage from "./Pokeimage.svelte"
+	let searchname: string;
+	let pokelistpromise = catchpokemon("https://pokeapi.co/api/v2/pokemon/?offset=0&limit=151");
+	async function catchpokemon(api_link: string){
+		const res = await fetch(api_link);
+		const data = await res.json();
+
+		if(res.ok){
+			
+			return(data);
+		}
+		else{
+			throw new Error(data);
+		}
+		
+	}
+
+</script>
+
+<main>
+	<div class="centerpokedex pokedex">
+		<P><h1 class="container">Pokedex</h1></P>
+		<input class="container searchbar" bind:value={searchname} placeholder="Type in your pokemon">
+		{#await pokelistpromise}
+			<p>... loading</p>
+		{:then pokelist}
+			{#each pokelist.results as pokemon}
+				{#if pokemon.name.includes(searchname)}
+				<Pokeimage link="{pokemon.url}"></Pokeimage>
+				{/if}
+			{/each}
+		{:catch error}
+			<p>error</p>
+		{/await}
+	</div>
+
+
+
+</main>
+
+

frontend/src/components/projects/pokedex/Pokeimage.svelte

@@ -0,0 +1,79 @@
+<script>
+	import { Accordion, AccordionItem, P } from "flowbite-svelte";
+
+    export let link;
+    let pokemonpromise = current_pokemon(link);
+    async function current_pokemon(api_link){
+		const res = await fetch(api_link);
+		const pokemon_data = await res.json();
+		
+
+		if(res.ok){
+			
+			return(pokemon_data);
+		}
+		else{
+			throw new Error(pokemon_data);
+		}
+		
+	}
+	
+</script>
+
+
+
+{#await pokemonpromise }
+    ..loading
+{:then pokemondetails}
+
+
+<!-- Pokemon Characteristics -->
+<div class="centercharacter container">
+	<P class="container">No.{pokemondetails.id} {pokemondetails.name}</P>
+	{#each pokemondetails.types as types }
+	<P class="container">{types.type.name}</P>
+	{/each}
+	<div class="img pokeimg">
+	<img src="{pokemondetails.sprites.front_default}" alt="error"> 
+	</div>
+	<P class="container">weight: {pokemondetails.weight} lbs</P>
+	<P class="container">height: {pokemondetails.height} inches</P>
+</div>
+	<!-- Stats and Attacks -->
+	<Accordion >
+		<AccordionItem>
+		  <span slot="header">Stats</span>
+		  	{#each pokemondetails.stats as stats }
+				<P>{stats.stat.name}:</P>
+				<P>{stats.base_stat}:</P>
+			{/each}
+		</AccordionItem>
+		<AccordionItem>
+			<span slot="header">Attacks</span>
+			{#each pokemondetails.moves as moves }
+				<P>{moves.move.name}</P>
+			{/each}
+		</AccordionItem>
+	</Accordion>
+{/await}
+
+<style>
+
+.pokeimg{
+	-webkit-transform: scaleX(-1);
+	transform: scaleX(-1);
+	background-color: white;
+	width: 96px;
+	border-radius: 50px;
+	margin: 16px;
+	border: 4px rgb(136, 136, 136);
+}
+.pokeimg:hover{
+	-webkit-transform: scaleX(1);
+	transform: scaleX(1);
+	background-color: white;
+	width: 96px;
+	border-radius: 50px;
+	margin: 16px;
+}
+</style>

frontend/src/routes/projects/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+    import { P } from "flowbite-svelte";
+</script>
+
+<P ><a href="/projects/pokedex">Pokedex</a></P>

frontend/src/routes/projects/pokedex/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+    import Pokedex from "src/components/projects/pokedex/Pokedex.svelte";
+</script>
+
+<Pokedex/>