From cbe6013bbda95a789571e1abe88c57c4fabbf891 Mon Sep 17 00:00:00 2001
From: maxluli <moi@MonPc.localdomain>
Date: Tue, 13 Sep 2022 11:03:10 +0200
Subject: [PATCH] Pokemon now show up

---
 index.html | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)
diff --git a/index.html b/index.html
index 3ecd53b..c972725 100644
--- a/index.html
+++ b/index.html
@@ -21,18 +21,18 @@
     <link rel="icon" type="image/x-icon" href="assets/img/Icon.ico">
 </head>
 
-<body> 
+<body id="main"> 
     <div class="d-grid gap-2 text-center">
         <div class=""><h1>Tinder for weird furries</h1></div>
         <div class=""><h2>Home</h2></div>
     </div>
     <div class="container">
-        <div class="card p-2" style="">
-            <img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png" class="card-img-top" style="" alt="...">
+        <div class="card p-2">
+            <img id="pokemonImage" style="image-rendering: pixelated;" src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png" class="card-img-top" style="" alt="...">
             <div class="card-body">
-                <h5 class="card-title">Ditto 21</h5>
+                <h4 class="card-title" id="pokemonName">Ditto</h4><h4 class="card-title" id="pokemonAge">21</h4>
                 <p class="card-text">I like Ice Cream</p>
-                <div class="row ">
+                <div class="row">
                     <div class="btn col-4" id="nopeButton">
                         <div class="text-center">
                             <img src="assets/img/cross.png" class="rounded col-6" alt="Home">
@@ -68,6 +68,25 @@
 </body>
 <script>
     "use strict";
+    document.getElementById('main').onload = function(){
+        //We will need to load an image from the pokeAPI with his description and a random name/age
+        let pokeApiResponse;
+        fetch("https://pokeapi.co/api/v2/pokemon/"+Math.floor(Math.random() * 905))
+        .then((response) => {
+            pokeApiResponse = response.json()
+            .then((data)=>{
+                //console.log(data);
+                document.getElementById("pokemonName").innerHTML = data.name;
+                document.getElementById("pokemonImage").src = data.sprites.front_shiny;
+            })
+            .catch(data => {
+                alert("Bouhouuuu I cant convert a response to text");
+            });
+        })
+        .catch(response =>{
+            alert("This could use a error handler but for now lets just say that there was an problem trying to get the infos from pokeAPI");
+        })
+    }
     document.getElementById('likeButton').onclick = function(){
         alert("You want to like");
     };
