initial commit

UmerrAli · Nov 6, 2023 · 5b32afd · 5b32afd
commit 5b32afd
Show file tree

Hide file tree

Showing 3 changed files with 222 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="style.css" />
+    <script defer src="script.js"></script>
+    <title>Country Neighbour</title>
+  </head>
+  <body>
+    <main class="container">
+      <div class="search-container">
+        <form>
+          <input type="text" id="country-search" placeholder="Type Country Full Name Here..." />
+          <button type="submit" id="search-btn">Search</button>
+        </form>
+      </div>
+
+      <div class="countries">
+        <!-- <article class="country">
+          <img class="country__img" src="" />
+          <div class="country__data">
+            <h3 class="country__name">COUNTRY</h3>
+            <h4 class="country__region">REGION</h4>
+            <p class="country__row"><span>👫</span>POP people</p>
+            <p class="country__row"><span>🗣️</span>LANG</p>
+            <p class="country__row"><span>💰</span>CUR</p>
+          </div>
+        </article> -->
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,58 @@
+"use strict";
+
+const countriesContainer = document.querySelector(".countries");
+const form = document.querySelector(".search-container");
+const serchfield = document.querySelector("#country-search");
+
+const renderCountry = function (response, className = "") {
+  const html = `
+     <article class="country ${className}">
+         <img class="country__img" src="${response.flags.png}" />
+             <div class="country__data">
+                 <h3 class="country__name">${response.name.official}</h3>
+                 <h4 class="country__region">${response.region}</h4>
+                 <p class="country__row"><span>👫</span>${(response.population / 1000000).toFixed(1)} M</p>
+                 <p class="country__row"><span>🗣️</span>${Object.values(response.languages)[0]}</p>
+                 <p class="country__row"><span>💰</span>${Object.values(response.currencies)[0].name}</p>
+             </div>
+     </article>`;
+  countriesContainer.insertAdjacentHTML("beforeend", html);
+};
+
+const renderError = function (msg) {
+  const error = document.createElement("h2");
+  error.classList.add("error");
+  error.textContent = msg;
+  countriesContainer.insertAdjacentElement("beforeend", error);
+};
+
+const getCountryAndNeighbours = function (e) {
+  e.preventDefault();
+  countriesContainer.innerHTML = "";
+
+  const country = serchfield.value;
+
+  fetch(`https://restcountries.com/v3.1/name/${country}?fullText=true`)
+    .then(response => {
+      if (!response.ok) throw new Error(`Country not found (${response.status}) 🙁`);
+      return response.json();
+    })
+    .then(data => {
+      renderCountry(data[0]);
+
+      if (!data[0].borders) throw new Error("No neighbours found!");
+
+      data[0].borders.forEach(border => {
+        fetch(`https://restcountries.com/v3.1/alpha/${border}`)
+          .then(response => response.json())
+          .then(data => renderCountry(data[0], "neighbour"));
+      });
+    })
+    .catch(err => {
+      console.log(err.message);
+      renderError(err.message);
+    })
+    .finally(() => (countriesContainer.style.opacity = 1));
+};
+
+form.addEventListener("submit", getCountryAndNeighbours);
diff --git a/style.css b/style.css
@@ -0,0 +1,130 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui;
+  color: #555;
+  background-color: #f7f7f7;
+}
+
+.container {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+
+.search-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  margin-top: 20px;
+}
+
+#country-search {
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  flex-grow: 1;
+  border-radius: 4px;
+  margin-right: 10px;
+  width: 300px;
+}
+
+#search-btn {
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+#search-btn:hover {
+  background-color: #45a049;
+}
+
+.countries {
+  margin-top: 8rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  font-size: 2rem;
+  opacity: 0;
+  transition: opacity 1s;
+}
+
+.country {
+  background-color: #fff;
+  box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
+  font-size: 1.8rem;
+  width: 30rem;
+  border-radius: 0.7rem;
+  margin: 0 3rem;
+}
+
+.neighbour::before {
+  content: "Neighbour country";
+  width: 100%;
+  position: absolute;
+  top: -4rem;
+
+  text-align: center;
+  font-size: 1.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #888;
+}
+
+.neighbour {
+  transform: scale(0.8) translateY(1rem);
+  margin-left: 0;
+}
+
+.country__img {
+  width: 30rem;
+  height: 20rem;
+  object-fit: cover;
+  background-color: #eee;
+  border-top-left-radius: 0.7rem;
+  border-top-right-radius: 0.7rem;
+}
+
+.country__data {
+  padding: 2.5rem 3.75rem 3rem 3.75rem;
+}
+
+.country__name {
+  font-size: 2.7rem;
+  margin-bottom: 0.7rem;
+}
+
+.country__region {
+  font-size: 1.4rem;
+  margin-bottom: 2.5rem;
+  text-transform: uppercase;
+  color: #888;
+}
+
+.country__row:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.country__row span {
+  display: inline-block;
+  margin-right: 2rem;
+  font-size: 2.4rem;
+}
+
+.error {
+  margin: auto;
+}