Resilient-Labs · angy255 · Oct 7, 2025 · Oct 7, 2025 · Oct 7, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,71 @@
-# 📊 Project: Complex API 
-
-### Goal: Use data returned from one api to make a request to another api and display the data returned
-
-### 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...
-```
+# 🌍 💸 Travel & Currency Explorer
+
+Search any country to learn about the region, capital and more while staying current with **live exchange rates** to the USD!
+
+---
+
+## ✨ Features
+- 🌏 Search any country by name
+- 🏛️ Display country information: continent, population, etc.
+- 🏴 Show country flag and coat of arms (if applicable)
+- 💱 Fetch live currency exchange rates to USD
+- 📱 Fully responsive and modern design
+- 🔗 Quick link to map for the country
+---
+
+## 🛠️ Built With
+- **HTML5** – structure  
+- **CSS3** – animations, gradients, responsive design  
+- **JavaScript** – fetch REST Countries API & AbstractAPI Exchange Rates API dynamically
+
+---
+
+## 🎯 How to Use
+1. Open the app in your browser  
+2. Click **Take me there!** 
+3. Explore country details and live currency rate
+
+---
+
+## 📦 Installation & Setup
+1. Clone this repository:  
+
+  ```bash
+git clone https://github.com/your-username/complex-api.git
+  ```
+
+2. Navigate into the project folder:
+
+  ```bash
+cd complex-api
+  ```
+
+3. Open index.html in your browser.
+
+4. Add your REST Countries API and AbstractAPI Exchange Rates API key in main.js:
+
+---
+
+## 📸 Screenshots
+
+<p align = "center"> <img width="752" height="880" alt="screenshot-tanzania-details" src="https://github.com/user-attachments/assets/287be6dc-f4b0-4b36-a1b1-cac7065d8b78" /> </p>
+
+---
+
+<div align = "center"> <img width="755" height="887" alt="screenshot-germany-details" src="https://github.com/user-attachments/assets/25a1ca47-0ff5-4ed2-86ac-6eba4af930f8" /> </div>
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome!
+
+If you’d like to add new features (e.g., additional country info, multiple currencies, dark mode), feel free to fork the repo and submit a pull request.
+
+---
+
+## 🙌🏽 Acknowledgments
+- REST Countries API: https://restcountries.com
+- AbstractAPI Exchange Rates: https://www.abstractapi.com/exchange-rates-api
+- Inspired by travelers and explorers everywhere 🌏
+
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="description" content="This is where your description goes" />
+    <meta name="keywords" content="one, two, three" />
+
+    <title>Travel & Currency App</title>
+
+    <!-- external CSS link -->
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <!-- A travel companion app that connects you to where you are, while keeping you rooted at home. -->
+    <h1>Let's Travel To</h1>
+
+    <input id="country" type="text" value="" placeholder="Let's travel to..." />
+
+    <button>Take me there!</button>
+
+    <!-- adding capital and region in the h2 -->
+    <h2></h2>
+
+    <!-- adding country code here in p2-->
+    <p><img id="firstImg" src="" alt="country emblem"></p>
+
+    <!-- adding title in h3 -->
+      <h3></h3>
+
+      <!-- adding author and publishedAt -->
+      <span></span>
+
+      <!-- adding description -->
+      <h4><img id="flag" src="" alt="country flag"></h4>
+
+      <!-- adding url and urlToImage -->
+      <div></div>
+      <h5></h5>
+
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,69 @@
+document.querySelector("button").addEventListener("click", getCountryInfo);
+
+function getCountryInfo() {
+  const exploreCountry = document.getElementById("country").value;
+
+  //restcountries api website https://restcountries.com/#rest-countries
+  // include name, region, population, continent, coat of arms, flags, maps
+
+  const url = `https://restcountries.com/v3.1/name/${exploreCountry}`;
+
+  console.log(exploreCountry);
+
+  fetch(url)
+    .then((res) => {
+      return res.json();
+    })
+
+    .then((data) => {
+      console.log("restcountries sends info");
+
+      console.log(data);
+      document.querySelector("h2").innerText =`Capital: ${data[0].capital[0]} `;
+      document.querySelector(
+        "h3"
+      ).innerText = ` Continent: ${data[0].continents[0]} | Population: ${data[0].population} | Region: ${data[0].region} `;
+
+      const firstImg = document.getElementById("firstImg");
+      firstImg.src = data[0]?.coatOfArms?.png || data[0]?.coatOfArms?.svg || "";
+
+      const flagImg = document.getElementById("flag");
+      flagImg.src = data[0]?.flags?.png || data[0]?.flags?.svg || "";
+
+      // not working as embed so grabbed some help from chatgpt to open in new tab instead
+      // document.querySelector("div").innerText = data[0]?.maps?.googleMaps || data[0]?.maps?.openStreetMaps || '';
+
+      document.querySelector("div").innerHTML = `<a href="${
+        data[0]?.maps?.googleMaps || data[0]?.maps?.openStreetMaps || ""
+      }" target="_blank"> View on Map </a>`;
+
+      // Get the first currency object from the currencies object on data[0].
+      // Example: if data[0].currencies === { MXN: { name: "Mexican peso", symbol: "$" } }
+      // then Object.values(...) returns [{ name: "Mexican peso", symbol: "$" }]
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values and help from Justin Joshi to realize we needed the word keys instead of values here
+      const currency = Object.keys(data[0].currencies)[0];
+      console.log(currency);
+
+      // complete these and add second fetch
+      //convert exchange rates api website https://docs.abstractapi.com/exchange-rates/live
+
+      let urlNew = `https://exchange-rates.abstractapi.com/v1/live?api_key=edd05433fd364ca8aa878120797231e8&base=${currency}`;
+      console.log("show me the currency", currency);
+      fetch(urlNew)
+        .then((res) => res.json())
+
+        .then((data) => {
+          console.log("exchange rates site sends info", data);
+
+          const rate = data["exchange_rates"].USD;
+          document.querySelector(
+            "h5"
+          ).innerText = `Exchange rate from USD: ${rate}`;
+          console.log("show me the data", data);
+
+        })
+        .catch((err) => {
+          console.error("error", err);
+        });
+    });
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,142 @@
+/* styling done with help of chatgpt */
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+  background: #1f2227;
+  color: #b5f4a5;
+  display: flex;
+  flex-direction: column;
+  /* align-items: center; */
+  padding: 30px 15px;
+  min-height: 100vh;
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  color: #00ff7f;
+  margin-bottom: 25px;
+}
+
+h2 {
+  font-size: 1.8rem;
+  color: #7fff00;
+  margin: 15px 0;
+}
+
+h3 {
+  font-size: 1.2rem;
+  color: #b5f4a5;
+  margin: 10px 0;
+}
+
+h4 {
+  font-size: 1.1rem;
+  margin: 10px 0;
+}
+
+h5 {
+  font-size: 1rem;
+  margin: 15px 0 25px 0;
+  font-weight: 600;
+  color: #39ff14;
+}
+
+input#country {
+  padding: 12px 15px;
+  width: 300px;
+  max-width: 90%;
+  font-size: 1rem;
+  border-radius: 8px;
+  border: 1px solid #00ff7f;
+  margin-bottom: 15px;
+  outline: none;
+  background: #111;
+  color: #b5f4a5;
+  transition: all 0.3s ease;
+}
+
+input#country:focus {
+  border-color: #7fff00;
+  box-shadow: 0 0 8px rgba(127,255,0,0.3);
+}
+
+button {
+  padding: 12px 25px;
+  font-size: 1rem;
+  background: linear-gradient(90deg, #00ff7f, #39ff14);
+  color: #0d1117;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
+  background: linear-gradient(90deg, #39ff14, #00ff7f);
+}
+
+#firstImg, #flag {
+  width: 30%;
+  height: auto;
+  margin: 10px 0;
+  transition: transform 0.3s ease;
+}
+
+#firstImg:hover, #flag:hover {
+  transform: scale(1.05);
+}
+
+h4 img#flag {
+  width: 50%;
+  vertical-align: middle;
+  margin-left: 8px;
+}
+
+/*map link*/
+
+div a {
+  display: inline-block;
+  margin-top: 12px;
+  font-size: 1rem;
+  text-decoration: none;
+  color: #00ff7f;
+  border: 1px solid #00ff7f;
+  padding: 8px 12px;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+}
+
+div a:hover {
+  background: #00ff7f;
+  color: #0d1117;
+  transform: translateY(-2px);
+}
+
+span {
+  display: block;
+  margin: 8px 0;
+  font-size: 0.95rem;
+  color: #7fff00;
+}
+
+/* responsiveness */
+
+@media (max-width: 600px) {
+  input#country { width: 90%; }
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.5rem; }
+  h3, h4, h5 { font-size: 1rem; }
+  #firstImg, #flag { width: 100px; }
+  h4 img#flag { width: 50px; }
+}
+