diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..644cd83
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index a9a4cc6..14db9f6 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,25 @@
-# 📊 Project: Simple API 1
-
-### Goal: Display data returned from an api
-
-### 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...
-```
+# Who's That Pokemon? (Simple API)
+
+_Built a "Who's that Pokemon?" simulation. Learning about API calls by using the Pokemon API database_
+
+
+
+
+
+
+
+[Here is the rendered project](godwinkamau.github.io/simple-api/)
+
+
+
+## Tech Used
+
+HTML, CSS, JavaScript, Pokemon API
+
+
+
+## Lessons Learned
+
+- Using fetch requests to get data from an API.
+- A few neat CSS techniques to make the page interactive.
+- Manipulating larger objects to siphon out relevant data.
\ No newline at end of file
diff --git "a/Screenshot 2025-11-10 at 6.53.17\342\200\257PM.png" "b/Screenshot 2025-11-10 at 6.53.17\342\200\257PM.png"
new file mode 100644
index 0000000..4038b8c
Binary files /dev/null and "b/Screenshot 2025-11-10 at 6.53.17\342\200\257PM.png" differ
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..b95bc4a
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,236 @@
+body {
+ display:flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: space-evenly;
+ background: linear-gradient(
+ to bottom left,
+ red,
+ orange 50%,
+ red 75%,
+ orangered 75%,
+ red 100%
+ );
+ font-family:Georgia, 'Times New Roman', Times, serif;
+ height:100vh;
+
+}
+
+select {
+ width: 40%;
+ /* font-size: 1.2rem; */
+ box-sizing: padding-box;
+}
+
+.big-container {
+ background:radial-gradient(white, blue);
+ padding:15px;
+ border:5px #ff4a02 solid;
+ border-radius:30px;
+}
+
+.instructions {
+ display:flex;
+ align-items: center;
+ justify-content: center;
+ gap:15px;
+}
+
+button {
+ padding:10px 12px;
+}
+
+.container {
+ height:500px;
+ display: flex;
+ width:500px;
+}
+
+.inside {
+ width:100%;
+ height:100%;
+ z-index: 1;
+}
+
+/* img{
+ height:400px;
+} */
+
+/* .one {
+ background-color: rgb(255, 120, 120);
+} */
+
+/* found this animation here: https://prismic.io/blog/css-background-effects*/
+.lines {
+ position:absolute;
+ height:500px;
+ margin:auto;
+ width:500px;
+
+ display:flex;
+ justify-content: space-between;
+ z-index: -2;
+}
+
+.line {
+ position:relative;
+ width:2px;
+ height:100%;
+ overflow: hidden;
+}
+
+.line::after {
+ content:'';
+ display:block;
+ position:absolute;
+ height:15vh;
+ width:100%;
+ top:-50%;
+ left:0;
+ background:linear-gradient(to bottom,rgba(255,255,255,0) 0%, blue 75%, #ffffff 100%);
+ animation: drop 1.5s 0s infinite;
+ animation-fill-mode:forwards;
+ /* animation-timing-function: cubic-bezier(0.4,0.26,0,0.97); */
+}
+
+.line:nth-child(1)::after {
+ animation: drop 3s infinite;
+}
+
+.line:nth-child(1)::after {
+ animation: drop 1.5s 0s infinite;
+ animation-delay:2s;
+}
+
+.line:nth-child(2)::after {
+ animation: drop .5s 0s infinite;
+ animation-delay:0s
+}
+
+.line:nth-child(3)::after {
+ animation: drop 1.5s 0s infinite;
+ animation-delay:1s
+}
+
+.line:nth-child(4)::after {
+ animation: drop 2s 0s infinite;
+ animation-delay: .2s
+}
+
+.line:nth-child(5)::after {
+ animation: drop 1.5s 0s infinite;
+ animation-delay:.1s
+}
+
+.line:nth-child(6)::after {
+ animation: drop 1s 0s infinite;
+ animation-delay:.1s
+}
+
+.line:nth-child(7)::after {
+ animation: drop .5s 0s infinite;
+ animation-delay:1s
+}
+
+.line:nth-child(8)::after {
+ animation: drop 1.5s 0s infinite;
+ animation-delay:.5s
+}
+
+.line:nth-child(9)::after {
+ animation: drop 2s 0s infinite;
+ animation-delay:1s
+}
+
+.line:nth-child(10)::after {
+ animation: drop .5s 0s infinite;
+ animation-delay:1s
+}
+
+.line:nth-child(11)::after {
+ animation: drop 3s 0s infinite;
+ animation-delay:1s
+}
+
+@keyframes drop {
+ 0% {
+ top:-50%;
+ }
+ 100% {
+ top:110%;
+ }
+}
+
+.hide {
+ visibility: hidden;
+}
+
+.inside {
+ display:flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items:center;
+ background-size:100%;
+ background-position:center;
+ transition: background-size ease .5s,
+ background-color ease .2s;
+}
+
+
+/* Used this to help learn the transitions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions */
+
+.one:hover {
+ background-size: 110%;
+ background-color:rgba(255, 120, 120,.2)
+}
+
+.two:hover {
+ background-size: 110%;
+ background-color:rgba(66, 146, 119,.2)
+}
+
+.three:hover {
+ background-size: 110%;
+ background-color:rgba(74, 74, 255,.2)
+}
+
+.inside:hover > .hide {
+ visibility:visible;
+ background: rgba(255,255,255,.5);
+ backdrop-filter: blur(10px);
+ padding:5px;
+}
+
+h2 {
+
+ text-transform: capitalize;
+ display:none;
+ z-index: 1;
+ font-family:'Pokemon Solid','Times New Roman', Times, serif;
+ color:rgb(223, 223, 3);
+ text-shadow: 4px 4px 4px blue;
+ letter-spacing: 2px;
+}
+
+h1 {
+ font-family:'Pokemon Solid','Times New Roman', Times, serif;
+ color:rgb(223, 223, 3);
+ text-shadow: 4px 4px 4px blue;
+ letter-spacing: 3px;
+ font-size:3rem;
+}
+
+img {
+ position:absolute;
+ width:400px;
+ height:400px;
+ z-index: -1;
+}
+
+.contrast1 {
+ filter:contrast(0%);
+}
+
+path {
+ fill:transparent
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1706479
--- /dev/null
+++ b/index.html
@@ -0,0 +1,53 @@
+
+
+
+ Hasty Pokemon
+
+
+
+
+
+
+ Who's That Pokemon?
+
+
+
+ Choose Your Generation
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..c138b51
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,74 @@
+document.querySelector('button').addEventListener('click',fetchChar)
+
+document.querySelector('.inside').addEventListener('click',pickPokemon)
+let audio = document.querySelector('audio')
+
+
+function fetchChar() {
+ document.querySelector('img').classList.add('contrast1')
+ document.querySelector('h2').style.display = 'none'
+
+ const generation = document.querySelector('select').value
+ let input
+ if (generation === 'gen1') {
+ input = Math.floor(Math.random()*150)
+ } else if (generation === 'gen2') {
+ input = Math.floor(Math.random()* (250 - 150) + 150)
+ } else if (generation === 'gen3') {
+ input = Math.floor(Math.random()* (385 - 250) + 250)
+ } else if (generation === 'gen4') {
+ input = Math.floor(Math.random()* (492 - 385) + 385)
+ }else if (generation === 'gen5') {
+ input = Math.floor(Math.random()* (648 - 492) + 492)
+ } else if (generation === 'gen6') {
+ input = Math.floor(Math.random()* (720 - 648) + 648)
+ } else if (generation === 'gen7') {
+ input = Math.floor(Math.random()* (808 - 720) + 720)
+ } else if (generation === 'gen8') {
+ input = Math.floor(Math.random()* (904 - 808) + 808)
+ } else if (generation === 'gen9') {
+ input = Math.floor(Math.random()* (1024 - 904) + 904)
+ }
+
+
+ fetch(`https://pokeapi.co/api/v2/pokemon-species/${input}`)
+ .then((response) => response.json())
+ .then((result) => {
+
+ const newRes = result.flavor_text_entries.filter(element => {
+ return element.language.name === 'en'
+ })
+ document.querySelector('section.one h3').innerText = newRes[0].flavor_text
+
+ fetchPic(result.name)
+ })
+ .catch((error) => console.error(error));
+}
+
+function fetchPic(pokeName) {
+
+ fetch(`https://pokeapi.co/api/v2/pokemon/${pokeName}`)
+ .then(res => res.json())
+ .then(data => {
+ console.log(data)
+
+
+ document.querySelector('img').src = data.sprites.front_default
+ document.querySelector('img').classList.add('contrast1')
+
+
+ audio.src = data.cries.legacy
+ console.log(data.name)
+ document.querySelector('h2').innerText = data.name
+ })
+ .catch((error) => console.error(error));
+}
+
+function pickPokemon() {
+ if (document.querySelector('img').src === '') {
+ return
+ }
+ document.querySelector('img').classList.remove('contrast1')
+ document.querySelector('h2').style.display = 'inline'
+ audio.play()
+}
\ No newline at end of file