diff --git a/README.md b/README.md index d8d6388..a74a8a5 100644 --- 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 + +

screenshot-tanzania-details

+ +--- + +
screenshot-germany-details
+ +--- + +## 🤝 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 new file mode 100644 index 0000000..585bcab --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + + + + Travel & Currency App + + + + + + +

Let's Travel To

+ + + + + + +

+ + +

country emblem

+ + +

+ + + + + +

country flag

+ + +
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..b6b9f04 --- /dev/null +++ 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 = ` View on Map `; + + // 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 new file mode 100644 index 0000000..959169f --- /dev/null +++ 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; } +} +