Resilient-Labs · AngelBelRoth · Oct 6, 2025 · Nov 11, 2025 · Nov 11, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,37 @@
-# 📊 Project: Complex API 
-
-### Goal: Use data returned from one api to make a request to another api and display the data returned
-
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# Pokémon ー catch 'em all
+
+> RESTful APIs built to interact with Pokémon data from PokéAPI & pokemontcg.io </br> ideal for developers building Pokédex apps, games, or data-intensive Pokémon visualisations.
+
+---
+
+## Overview
+
+The **Pokémon ー catch 'em all** project wraps key endpoints of the widely-used PokéAPI to provide simplified, consistent access to Pokémon data. Whether you’re building a frontend Pokédex, mobile app, or data-science tool, this service streamlines requests, handles caching/formatting, and makes integration easy.
+
+---
+
+## Features
+
+- Fetch Pokémon by name or ID  
+- Get Pokémon Card with pagination support  
+- Retrieve Pokémon types, abilities, stats  
+- Consistent JSON responses designed for frontend use  
+- Environment variable support (API keys, ports)  
+
+---
+
+![api-Pokemon](https://github.com/user-attachments/assets/93ca1f06-f748-4580-a419-fe5321962be4)
+
+---
+
+## Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/AngelBelRoth/api-Pokemon.git
+
+# Navigate into the directory
+cd api-Pokemon
+
+# Install dependencies
+npm install
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,25 @@
+body{
+    font-family: Arial, sans-serif;
+    background-color: hsl(48deg 95% 50%);
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#pokemonLogo{
+    width: 20%;
+    margin-top: 2%;
+}
+
+input{
+    margin: 2%;
+    border-radius: 5px;
+    text-align: center;
+}
+
+button{
+    border-radius: 20px;
+    color: whitesmoke;
+    background: hsl(220deg 54% 44%);
+}
diff --git a/img/pokemon.png b/img/pokemon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta name="description" content="This a Pokémon fetcher through pokeapi.co and api.pokemontcg.io">
+	<meta name="keywords" content="Pokémon, api, fetch">
+	<title>Pokémon Fetcher</title>
+	<link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+	<img src="img/pokemon.png" alt="pokemon logo" id="pokemonLogo">
+	<input type="text" id="pokemonName" placeholder="Enter Pokemon Name">
+	<button onclick="fetchData()">Fetch Pokemon</button><br>
+	<img src="" alt="Pokemon Sprite" id="pokemonSprite" style="display: none">
+	<img src="" alt="Pokemon Card" id="pokemonCard" style="display: none">
+
+	<script type="text/javascript" src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,47 @@
+async function fetchData() {
+
+    try {
+
+        const pokemonName = document.getElementById("pokemonName").value.toLowerCase();
+        const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);
+
+        if (!response.ok) {
+            throw new Error("Could not fetch resource");
+        }
+
+        const data = await response.json();
+        const pokemonSprite = data.sprites.front_default;
+        const imgElement = document.getElementById("pokemonSprite");
+
+        imgElement.src = pokemonSprite;
+        imgElement.style.display = "block";
+
+        const res = await fetch(`https://api.pokemontcg.io/v2/cards?api_key=457bee5f-fadf-4324-b866-f38b375be84d`);
+        // const res = await fetch(`https://api.pokemontcg.io/v2/cards?q=name:pikachu`,{headers:{'X-Api-Key':'457bee5f-fadf-4324-b866-f38b375be84d'}});
+        // const res = await fetch(`https://api.pokemontcg.io/v2/cards`,{headers:{'X-Api-Key':'457bee5f-fadf-4324-b866-f38b375be84d'}});
+
+        if (!res.ok) {
+            throw new Error("Could not fetch resource");
+        }
+
+        const cardData = await res.json();
+        cardData.data.forEach(element => {
+            let elementName = element.name
+            if (elementName.toUpperCase() === pokemonName.toUpperCase()) {
+                let pokemonCards = element.images.small;
+                const imgCard = document.getElementById("pokemonCard");
+                imgCard.src = pokemonCards;
+                imgCard.style.display = "block";
+
+            }
+        });
+
+    }
+    catch (error) {
+        console.error(error);
+    }
+}
+
+// Citation: Bro Code
+// href: https://www.youtube.com/watch?v=37vxWr0WgQk
+// Adding second api: Marquis