diff --git a/README.md b/README.md index 83ce771..14521a1 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,21 @@ -# 📊 Project: Complex API 2 +# Explore Country -### Goal: Use data returned from one api to make a request to another api and display the data returned +A simple RESTful API for country data built with Javascript. +It allows fetching country information such as name, capital, region, currency and UTC. -### How to submit your code for review: +## Features -- 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! +- CORS enabled +- Fetch data for all countries +- Fetch detailed data for a single country by its code +- Lightweight and easy to integrate into other projects -Example: -``` -I completed the challenge: 5 -I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` +Screenshot 2025-11-10 at 11 57 29 +Screenshot 2025-11-10 at 12 00 00 + +## Installation + +```bash +# Clone the repository +git clone https://github.com/AngelBelRoth/api-country.git +cd api-country diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..a4d5f43 --- /dev/null +++ b/css/style.css @@ -0,0 +1,35 @@ +*{ + margin: 0 0 1% 0; + padding: 0; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: Arial, Helvetica, sans-serif; +} + +h1{ + font-family: "Imperial Script", cursive; + font-size: 5rem; +} + +input { + text-align: center; +} + +.flag{ + font-size: 7rem; +} + +img{ + display: block; + margin: 0 auto; + max-width: 500px; + max-width: 750px; +} + +.googleMaps{ + font-size: 11rem; + text-decoration: none; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..6d6ded1 --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + +

Explore Country

+ + + +

+

+

+

+

+

+

+

+

+

+ + 🗺️ + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..fd77965 --- /dev/null +++ b/js/main.js @@ -0,0 +1,39 @@ +document.querySelector('button').addEventListener('click', getCountry) + +function getCountry() { + const apiKey = "fe8c7773dc5a58164463c2ef6228cc27" + const exploreCountry = document.querySelector('input').value + const url = `https://api.countrylayer.com/v2/name/{${exploreCountry}}?access_key=${apiKey}&fulltext=true` + + fetch(url) + .then(res => res.json()) + .then(data => { + console.log(data) + document.querySelector(".name").innerText = data[0].name; + document.querySelector(".capital").innerText = data[0].capital; + document.querySelector(".region").innerText = data[0].region; + document.querySelector(".alt").innerText = data[0].altSpellings.join(', '); + document.querySelector(".call").innerText = data[0].callingCodes.join('+'); + document.querySelector(".code").innerText = data[0].alpha3Code; + + const language = document.querySelector('input').value + const urlLang = `https://restcountries.com/v3.1/name/${language}` + fetch(urlLang) + .then(res => res.json()) + .then(data => { + console.log(data) + document.querySelector(".currencies").innerText = Object.values(data[0].currencies).map(c=>c.name+' '+c.symbol).join(', '); + document.querySelector(".languages").innerText = Object.values(data[0].languages).join(', '); + document.querySelector(".timezones").innerText = data[0].timezones; + document.querySelector(".flag").innerText = data[0].flag; + document.querySelector(".coatOfArms").src = data[0].coatOfArms.png; + document.querySelector(".googleMaps").href = data[0].maps.googleMaps; + }) + + .catch(err => { + console.log(`error ${err}`) + }); + }) +} + +// Michael Kazin helped me with these apis \ No newline at end of file