diff --git a/README.md b/README.md
index d8d6388..413260c 100644
--- 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...
-```
+
+
+
+Find the live project here https://innocent-r.github.io/complex-api1/
diff --git a/currency.png b/currency.png
new file mode 100644
index 0000000..b0a21c1
Binary files /dev/null and b/currency.png differ
diff --git a/global.jpg b/global.jpg
new file mode 100644
index 0000000..4b13931
Binary files /dev/null and b/global.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..afeca9f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+ Currency Conversion
+
+
+
+
Currency Conversion Compared to USD
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..8defd0d
--- /dev/null
+++ 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
new file mode 100644
index 0000000..ee46531
--- /dev/null
+++ 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;
+ }
+}
\ No newline at end of file