Resilient-Labs · Innocent-R · Oct 7, 2025 · Oct 9, 2025 · Oct 31, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,14 @@
-# 📊 Project: Complex API 
+Project: Complex API 
 
-### Goal: Use data returned from one api to make a request to another api and display the data returned
+This complex API project is built using HTML, CSS, and JavaScript. It integrates two APIs: the first provides country information along with their currencies, and the second converts currencies based on their USD value. The user enters a country name in the input field and sees its currency value compared to the USD.
 
-### 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 complex api project, I learned how to use Object.key() method which returns an array of a given object's own enumerable string-keyed property names. 
 
-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="810" height="365" alt="money" src="https://github.com/user-attachments/assets/fdd65dbe-4e84-4298-b555-14697b96eb68" />
+
+Find the live project here https://innocent-r.github.io/complex-api1/
diff --git a/currency.png b/currency.png
diff --git a/global.jpg b/global.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!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>Currency Conversion</title>
+</head>
+<body>
+    <section>
+        <h1>Currency Conversion Compared to USD</h1>
+
+        <div id="together">
+            <input type="text" id="country" placeholder="Enter country">
+            <input type="number" id="amount" placeholder="Enter amount in USD">
+            <button id="search">Calculate</button>
+        </div>
+        <h2></h2>
+    </section>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,44 @@
+//Goal: Use data returned from one api to make a request to another api and display the data returned
+//Searching for
+//fetch from the rest countries on newApi
+//find the path to the currency code
+//find the path to the countries code
+
+
+document.querySelector("#search").addEventListener("click", searchAmount)
+
+function searchAmount(){
+
+    const input = document.querySelector("input").value
+    const amount = document.querySelector("#amount").value
+    const url = `https://restcountries.com/v3.1/name/${input}`
+
+    fetch(url)
+    .then(res => res.json())
+    .then(data => {
+        //console.log(data[0].currencies)
+        console.log(Object.keys(data[0].currencies))
+        const currency = Object.keys(data[0].currencies)[0]
+        console.log(currency)
+
+        const currencyUrl = `https://api.currencylayer.com/convert?from=USD&to=${currency}&amount=${amount}&access_key=7ea7eaf16035295ef5a8791895322470`
+
+        fetch(currencyUrl)
+        .then(res => res.json())
+        .then(data => {
+            console.log(data.result)
+
+            document.querySelector('h2').innerText = data.result
+
+        })
+
+    })
+
+}
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,67 @@
+body{
+    background-image: url("global.jpg");
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 2em;
+}
+section{
+    padding: 10%;
+}
+#country{
+    width: 30%;
+    height: 40px;
+    background-color: rgb(244, 244, 65);
+    font-size: 0.6em;
+}
+#amount{
+    width: 20%;
+    height: 40px;
+    background-color: rgb(244, 244, 65);
+    font-size: 0.6em;
+}
+button{
+    width: 20%;
+    height: 40px;
+    background-color: green;
+    color: white;
+    font-size: 0.6em;
+}
+@media screen and (max-width: 1242px){
+    #country, #amount, button{
+       font-size: 0.5em;
+    }
+}
+@media screen and (max-width: 950px){
+    h1{
+        padding-bottom: 50px;
+    }
+    #together{
+        display: flex;
+        flex-direction: column;
+    }
+    #country, #amount, button{
+       font-size: 0.6em;
+       width: 60%;
+       margin-bottom: 6px;
+    }
+}
+@media screen and (max-width: 638px){
+    body{
+        font-size: 1.5em;
+    }
+     #country, #amount{
+       margin-bottom: 10px;
+    }
+    button{
+        margin-bottom: 100px;
+        /* padding-bottom: 100px; */
+    }
+}
+@media screen and (max-width: 400px){
+    h1{
+        font-size: 1em;
+        margin-bottom: 100px;
+    }
+    h2{
+        font-size: 1em;
+    }
+}