diff --git a/README.md b/README.md
index a9a4cc6..a8dd43a 100644
--- 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...
-```
+
+
+
+Find the live project here https://innocent-r.github.io/simple-api/
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4fcc528
--- /dev/null
+++ b/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ Zip Codes
+
+
+
+
Find The Location
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..131409d
--- /dev/null
+++ 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
new file mode 100644
index 0000000..8e7bfa3
--- /dev/null
+++ 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;
+ }
+}
\ No newline at end of file
diff --git a/zipcode.webp b/zipcode.webp
new file mode 100644
index 0000000..45b345a
Binary files /dev/null and b/zipcode.webp differ