diff --git a/README.md b/README.md
index a9a4cc6..68b22b9 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,17 @@
-# 📊 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...
-```
+# Horoscope App
+
+This project get random user data and turns it into a card!
+
+## How It's Made:
+
+**Tech used:**: HTML, CSS, and JavaScript
+
+I used html for the markup, css for the styling, andI used Javascript for the logic of this project.
+
+## Lessons Learned:
+
+I learned how to shorten my code more by putting the results array in a variable and getting the data from that instead of writing such a long line of code.
+
+## Image of Project:
+
+
\ No newline at end of file
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..37894fd
--- /dev/null
+++ b/index.css
@@ -0,0 +1,69 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+main {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ min-height: 100vh;
+ background: #333;
+ font-family: Arial, sans-serif;
+}
+
+button{
+ padding: 30px;
+ background-color: crimson;
+ font-weight: bold;
+ font-size: 20px;
+ border-radius: 10px;
+ margin-top: 10px;
+ color: white;
+ cursor: pointer;
+ transition: 0.5s;
+}
+
+button:hover{
+ transform: translateY(20px);
+}
+
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.card {
+ background: #fff;
+ border-radius: 8px;
+ padding: 20px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+ text-align: center;
+ width: 300px;
+}
+
+.card img {
+ width: 100%;
+ height: auto;
+ border-radius: 6px;
+ margin-bottom: 15px;
+}
+
+.card h1 {
+ font-size: 1.5rem;
+ color: #333;
+ margin-bottom: 10px;
+}
+
+.card h2 {
+ font-size: 1.1rem;
+ color: #666;
+}
+
+
+p{
+ margin-top: 10px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2d3d220
--- /dev/null
+++ b/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Simple API 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..519bae5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,32 @@
+/*
+'https://randomuser.me/api/ tested with Postman. Works!
+
+API should send back a response with the persons name, country/state/ and image (and more)
+*/
+
+let btn = document.querySelector('button')
+
+btn.addEventListener("click", getPersonData)
+
+function getPersonData(){
+ let API_URL = 'https://randomuser.me/api/'
+ let usersName = document.querySelector('h1')
+ let imgOfUser = document.querySelector('img')
+ let countryOfUser = document.querySelector('h2')
+ let nationalityOfUser = document.querySelector('p')
+
+ fetch(API_URL)
+ .then(res => res.json())
+ .then(data => {
+ console.log(data["results"][0])
+ // get the results array in the API
+ let dataResultsArray = data.results[0]
+ // put the card data inside the card in the ui
+ usersName.innerHTML =` ${dataResultsArray.name.title}. ${dataResultsArray.name.first} ${dataResultsArray.name.last}`
+ imgOfUser.src = dataResultsArray.picture.large
+ countryOfUser.innerHTML = `${dataResultsArray.location.country}`
+ nationalityOfUser.innerHTML = `nationality: ${dataResultsArray.nat}`
+
+ })
+
+}
diff --git a/simpleapi1project.jpg b/simpleapi1project.jpg
new file mode 100644
index 0000000..51049bf
Binary files /dev/null and b/simpleapi1project.jpg differ