Answer

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_
+
+<hr>
+
+<img src="./Screenshot 2025-11-10 at 6.53.17 PM.png">
+
+<hr>
+
+[Here is the rendered project](godwinkamau.github.io/simple-api/)
+
+<hr>
+
+## Tech Used
+
+HTML, CSS, JavaScript, Pokemon API
+
+<hr>
+
+## 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.

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
+}

index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Hasty Pokemon</title>
+        <meta name="description" content="Help! I need a character ASAp!">
+        <meta charset="utf-8">
+        <link href="https://fonts.cdnfonts.com/css/pokemon-solid" rel="stylesheet">
+        <link rel="stylesheet" href="css/styles.css">
+    </head>
+    <body>
+        <h1>Who's That Pokemon?</h1>
+        <section class="big-container">
+            <section class="instructions">
+
+                <h4>Choose Your Generation</h4>
+                <select>
+                    <option value="gen1">1 - Red, Blue, and Yellow</option>
+                    <option value="gen2">2 - Gold, Silver, and Crystal</option>
+                    <option value="gen3">3 - Ruby, Sapphire, Emerald</option>
+                    <option value="gen4">4 - Diamond, Pearl, Platinum</option>
+                    <option value="gen5">5 - Black, White</option>
+                    <option value="gen6">6 - X,Y</option>
+                    <option value="gen7">7 - Sun, Moon</option>
+                    <option value="gen8">8 - Sword, Shield, Legends:Arceus</option>
+                    <option value="gen9">9 - Scarlet, Violet</option>
+                </select>
+                <button>Go!</button>
+            </section>
+            <section class="container">
+                <audio src="" type="audio/ogg"></audio>
+                <section class="inside one">
+                    <h3 class="hide"></h3>
+                    <img>
+                    <h2></h2>
+                    <div class="lines">
+                        <div class="line"></div>
+                        <div class="line"></div>
+                        <div class="line"></div>
+                        <div class="line"></div>
+                        <div class="line"></div>
+                        <div class="line"></div>
+                        <div class="line"></div>
+                        <div class="line"></div>
+                        <div class="line"></div>
+                        <div class="line"></div>
+                        <div class="line"></div>
+                    </div>
+                </section>
+            </section>
+        </section>
+        <script type="text/javascript" src="js/main.js"></script>
+    </body>
+</html>