Implemented API Call Challenge

Author: JumanaALBalushi

package-lock.json

@@ -16,6 +16,7 @@
     "body-parser": "^1.19.0",
     "cors": "^2.8.5",
     "express": "^4.17.1",
+    "node-fetch": "^3.3.2",
     "webpack": "^5.90.0",
     "webpack-cli": "^5.1.4"
   },

package.json

@@ -1,12 +1,14 @@
 import { checkForName } from './js/nameChecker';
 import { handleSubmit } from './js/formHandler';
-
 import './styles/resets.scss';
 import './styles/base.scss';
 import './styles/form.scss';
+import './styles/table.scss';
 import './styles/footer.scss';
 import './styles/header.scss';
 
+
+
 console.log(checkForName);
 
 export {

src/client/index.js

@@ -16,4 +16,59 @@ function handleSubmit(event) {
     })
 }
 
+
+
+const btn = document.getElementById('btn');
+const result = document.getElementById('result');
+
+btn.addEventListener('click', async function (event) {
+    event.preventDefault();
+    const pokemonName = document.getElementById('pokemonName').value.toLowerCase();
+
+    try {
+        const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);
+
+        if (!res.ok) {
+            throw new Error("Could not fetch resource");
+        }
+
+        const data = await res.json();
+        const pokemonSprite = data.sprites.front_default;
+        const pokemon = document.getElementById('pokemon');
+        const type = document.getElementById('type');
+        const type_0 = data.types[0].type.name;
+        const type_1 = data.types[1] ? data.types[1].type.name : null;
+
+        result.innerHTML = `<img src="${pokemonSprite}" alt="Pokemon"/>`;
+        pokemon.innerHTML = pokemonName;
+        type.innerHTML = type_1 ? `${type_0} , ${type_1}` : type_0;
+
+    } catch (error) {
+        console.error(error);
+    }
+});
+
+
+
 export { handleSubmit }
+
+
+
+
+
+/* const result = document.getElementById('result');
+const btn = document.getElementById('btn');
+btn.addEventListener('click', getRandomCat);
+
+function getRandomCat() {
+    fetch('http://placekitten.com/200/300')
+        .then(res => res.blob())  // Use .blob() for image data
+        .then(data => {
+            // Create a URL for the blob data and set it as the image source
+            const imageUrl = URL.createObjectURL(data);
+            result.innerHTML = `<img src="${imageUrl}" alt="Random Cat"/>`;
+        })
+        .catch(error => {
+            console.error('Error fetching cat:', error);
+        });
+} */

src/client/js/formHandler.js

@@ -0,0 +1,23 @@
+$table-width: 50%;
+$table-margin: 20px auto;
+
+table {
+  width: $table-width;
+  margin: $table-margin;
+  border-collapse: collapse;
+
+  th, td {
+    padding: 10px;
+    text-align: left;
+    border: 1px solid #ddd;
+  }
+
+  th {
+    background-color: #f2f2f2;
+  }
+
+  #result img {
+    max-width: 100px; 
+    height: auto;
+  }
+}

src/client/styles/table.scss

@@ -33,6 +33,30 @@
                 <strong>Form Results:</strong>
                 <div id="results"></div>
             </section>
+
+            <form id="yourFormId">
+                <input type="text" placeholder="Enter Pokemon Name" id="pokemonName"> 
+                <button id="btn" type="submit">Fetch Pokemon</button>
+            </form>
+
+            <section>
+                <strong>Form Results:</strong>
+                <table >
+                    <tr>
+                        <th>Pokemon</th>
+                        <td><div id="result"></div></td>
+                    </tr>
+                    <tr>
+                        <th>Name</th>
+                        <td><div id="pokemon"></div></td>
+                    </tr>
+                    <tr>
+                        <th>Type</th>
+                        <td><div id="type"></div></td>
+                    </tr>
+                </table>
+                
+            </section>
         </main>
 
         <footer>

src/client/views/index.html

@@ -5,3 +5,4 @@ let json = {
 }
 
 module.exports = json
+