diff --git a/README.md b/README.md
index d8d6388..9e7d55c 100644
--- 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 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)
+
+---
+
+
+
+---
+
+## 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
new file mode 100644
index 0000000..22c9523
--- /dev/null
+++ 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%);
+}
\ No newline at end of file
diff --git a/img/pokemon.png b/img/pokemon.png
new file mode 100644
index 0000000..856f229
Binary files /dev/null and b/img/pokemon.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8ee77b5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+ Pokémon Fetcher
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..417dc44
--- /dev/null
+++ 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
\ No newline at end of file
+
+