Resilient-Labs · Innocent-R · Oct 6, 2025 · Oct 9, 2025 · Oct 31, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,14 @@
-# 📊 Project: Simple API 1
+Project: Simple API 1
 
-### Goal: Display data returned from an api
+The Simple API1 project focuses on U.S. zip codes. It uses an API that contains all U.S. zip code data. The user enters a zip code in the input field and receives information about the corresponding area.
 
-### How to submit your code for review:
+How It's Made:
+Tech used: HTML, CSS, and JavaScript
 
-- 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!
+Lessons Learned:
+From this project, I gained experience in making HTTP requests to an external API using fetch.
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+
+<img width="1185" height="604" alt="Screenshot 2025-10-09 at 3 23 49 PM" src="https://github.com/user-attachments/assets/5edd3c61-7377-4f33-ad63-b49acd5a1fe0" />
+
+Find the live project here https://innocent-r.github.io/simple-api/
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">
+    <link rel="stylesheet" href="style.css">
+    <title>Zip Codes</title>
+</head>
+<body>
+    <section>
+        <h1>Find The Location</h1><br>
+        <div id="both">
+
+            <input type="number" placeholder="Enter zip code">
+            <button type="button" name="button">Find Area</button>
+        </div><br><br>
+
+        <h2 id="location"></h2>
+
+    </section>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,38 @@
+//Goal: Display data returned from an api
+
+//The user enters the zip code and see where it's located
+//Adding the event lister on the click
+//Creating the function for the click button
+//Putting input and url variables inside the function
+//fetching url
+//Showing data on the DOM using innerText
+//Catching up errors 
+
+
+document.querySelector('button').addEventListener('click', findArea)
+
+//url=http://ZiptasticAPI.com/ZIPCODE
+
+function findArea(){
+    const zip = document.querySelector('input').value
+    const url = `http://ZiptasticAPI.com/${zip}`
+    //let location = document.querySelector("#location")
+
+fetch(url)
+
+    .then(res => res.json())
+    .then(data => {
+        console.log(data)
+
+        //location.innerHTML = `zipcode is located in: ${data.city}, ${data.state}, ${data.country}`
+        document.querySelector("#location").innerText = `Zipcode is located in: ${data.city}, ${data.state}, ${data.country}`
+
+    })
+     .catch(error => console.error(error)); 
+
+} 
+
+
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,72 @@
+body{
+      font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+      background-image: url("zipcode.webp");
+}
+section{
+    padding: 10%;
+}
+h1{
+    font-size: 3.5em;
+    color: white;
+    font-weight: bold;
+}
+h2{
+    color: white;
+}
+input{
+    width: 20%;
+    height: 25px;
+    font-size: 1em;
+}
+input:hover{
+    cursor: pointer;
+}
+
+button{
+    width: 15%;
+    height: 30px;
+    background-color: greenyellow;
+    font-size: 1em;
+}
+button:hover{
+    cursor: pointer;
+}
+@media screen and (max-width: 940px){
+    input{
+        width: 40%;
+    }
+    button{
+        width: 20%;
+    }
+}
+@media screen and (max-width: 612px){
+    h1{
+     font-size: 3em;
+     font-weight: bold;
+    }
+    #both{
+        display: flex;
+        flex-direction: column;
+    }
+    input{
+        width: 60%;
+        margin-bottom: 20px;
+    }
+    button{
+        width: 60%;
+    }
+}
+@media screen and (max-width: 228px){
+    h1{
+        font-size: 2.5em;
+    }
+    h2{
+        font-size: 1.5em;
+    }
+    input{
+        font-size: 0.8em;
+    }
+    button{
+        font-size: 0.8em;
+    }
+}
diff --git a/zipcode.webp b/zipcode.webp