Resilient-Labs · JoseDiazCodes · Oct 23, 2023
diff --git a/README.md b/README.md
@@ -1,22 +1,17 @@
-# 📊 Project: Simple API 2
+# Countries and Information Web App
 
-### Goal: Display data returned from an api
+This is a simple web app that allows you to fetch and display information about different countries. You can enter the name of a country, click the "Fetch Country Data" button, and the app will provide you with various details about the specified country.
 
-### How to submit your code for review:
+## Prerequisites
 
-- 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!
+Before you begin, ensure you have met the following requirements:
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+- You need a modern web browser to run this web application.
+
+## Installation
+
+1. Clone this repository to your local machine using:
+   ```bash
+   git clone <repository_url>
+   ```
+# countryInformation
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,62 @@
+body {
+	font-family: "Arial", sans-serif;
+	margin: 0;
+	padding: 0;
+	background-color: #f4f4f4;
+}
+
+.container {
+	max-width: 600px;
+	margin: 50px auto;
+	padding: 20px;
+	background-color: #fff;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+	text-align: center;
+	margin-bottom: 20px;
+}
+
+#countryInput {
+	width: 100%;
+	padding: 10px;
+	margin-bottom: 10px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+}
+
+button {
+	width: 100%;
+	padding: 10px;
+	background-color: #007bff;
+	color: #fff;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	transition: background-color 0.3s;
+}
+
+button:hover {
+	background-color: #0056b3;
+}
+
+#output {
+	margin-top: 20px;
+	padding: 10px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	display: none; /*  hidden until data is fetched */
+}
+
+#output.visible {
+	display: block;
+}
+
+#coatOfArms {
+	width: 300px;
+	height: 300px;
+	object-fit: cover;
+	display: block;
+	margin: 10px auto;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Countries and Information</title>
+		<link rel="stylesheet" href="css/styles.css" />
+	</head>
+	<body>
+		<div class="container">
+			<h1>Country Facts at Your Fingertips</h1>
+			<input type="text" id="countryInput" placeholder="Enter Country Name" />
+			<button id="fetchCountryBtn">Fetch Country Data</button>
+			<div id="output">
+				<div id="nameOfCountry"></div>
+				<div id="capital"></div>
+				<div id="borders"></div>
+				<img id="coatOfArms" src="" alt="Coat of Arms" />
+				<div id="continent"></div>
+				<div id="independent"></div>
+				<div id="languages"></div>
+				<a id="mapLink" href="#" target="_blank">View on Map</a>
+				<div id="timezone"></div>
+				<div id="region"></div>
+				<div id="population"></div>
+				<div id="currencies"></div>
+			</div>
+		</div>
+
+		<script src="js/main.js"></script>
+	</body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,62 @@
+document.getElementById("fetchCountryBtn").addEventListener("click", fetchData);
+
+function fetchData() {
+	const countryName = document.getElementById("countryInput").value;
+	const url = `https://restcountries.com/v3.1/name/${countryName}`;
+
+	fetch(url)
+		.then((response) => response.json())
+		.then((data) => {
+			let countryData;
+
+			if (data.length > 1) {
+				countryData = data.find(
+					(country) =>
+						country.name.common.toLowerCase() === countryName.toLowerCase()
+				);
+			} else {
+				countryData = data[0];
+			}
+
+			if (!countryData) {
+				console.error("Country not found.");
+				return;
+			}
+
+			document.getElementById("nameOfCountry").textContent =
+				countryData.name.common;
+			document.getElementById("capital").textContent =
+				"Capital: " + (countryData.capital[0] || "N/A");
+			document.getElementById("borders").textContent =
+				"Borders: " + (countryData.borders?.join(", ") || "N/A");
+			document.getElementById("coatOfArms").src = countryData.flags.png;
+			document.getElementById("continent").textContent =
+				"Continent: " + (countryData.continents[0] || "N/A");
+			document.getElementById("independent").textContent =
+				"Independent: " + (countryData.independent ? "Yes" : "No");
+
+			const languageCode = Object.keys(countryData.languages)[0];
+			const languageName = countryData.languages[languageCode];
+			document.getElementById("languages").textContent =
+				"Language: " + languageName;
+
+			document.getElementById("mapLink").href = countryData.maps.googleMaps;
+			document.getElementById("timezone").textContent =
+				"Timezone: " + (countryData.timezones[0] || "N/A");
+			document.getElementById("region").textContent =
+				"Region: " + countryData.region;
+			document.getElementById("population").textContent =
+				"Population: " + countryData.population;
+
+			const currencyCode = Object.keys(countryData.currencies)[0];
+			const currencyName = countryData.currencies[currencyCode].name;
+			document.getElementById("currencies").textContent =
+				"Currency: " + currencyName;
+
+			// unhiding the output
+			document.getElementById("output").style.display = "block";
+		})
+		.catch((error) => {
+			console.error("Error fetching country data:", error);
+		});
+}