Resilient-Labs · sed1177 · Oct 3, 2025
diff --git 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:
+
+![simpleapiproject image](simpleapi1project.jpg)
diff --git a/index.css 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;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!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="index.css">
+    <title>Simple API 1</title>
+</head>
+<body>
+    <main>
+        <div class="container">
+            <div class="card">
+                <img >
+                <h1></h1>
+                <h2 id="place"></h2>
+                <p></p>
+            </div>
+        </div>
+
+        <button>Fetch Person Data!</button>
+    </main>
+
+    <script type="module" src="script.js"></script>
+</body>
+</html>
diff --git a/script.js 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