Resilient-Labs · AngelBelRoth · Oct 6, 2025 · Oct 6, 2025 · Nov 10, 2025
diff --git 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...
-```
+<img width="1600" height="782" alt="Screenshot 2025-11-10 at 11 57 29" src="https://github.com/user-attachments/assets/af4689a1-ec55-4b10-b88d-c084f8b989ca" />
+<img width="1600" height="763" alt="Screenshot 2025-11-10 at 12 00 00" src="https://github.com/user-attachments/assets/1a899b82-2c33-4da7-aeb5-ab2c4b9eec49" />
+
+## 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
@@ -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;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta name="description" content="">
+	<meta name="keywords" content="">
+	<!-- <title>Countries Information</title> -->
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Imperial+Script&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+
+	<h1>Explore Country</h1>
+	<input type="text" name="" value="">
+	<button type="button" name="button">Get Information</button>
+
+	<p class="name"></p>
+	<p class="capital"></p>
+	<p class="region"></p>
+	<p class="alt"></p>
+	<p class="code"></p>
+	<p class="languages"></p>
+	<p class="currencies"></p>
+	<p class="call"></p>
+	<p class="timezones"></p>
+	<p class="flag"></p>
+	<img src="" class="coatOfArms">
+	<a class="googleMaps">🗺️</a>
+
+	<script type="text/javascript" src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/js/main.js 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