Add files via upload

SpantaAlizadeh10 · Mar 28, 2024 · 9e10a95 · 9e10a95
1 parent c51468a
commit 9e10a95
Show file tree

Hide file tree

Showing 6 changed files with 310 additions and 0 deletions.
diff --git a/find Country info/img/img-1.jpg b/find Country info/img/img-1.jpg
diff --git a/find Country info/img/img-2.jpg b/find Country info/img/img-2.jpg
diff --git a/find Country info/img/img-3.jpg b/find Country info/img/img-3.jpg
diff --git a/find Country info/index.html b/find Country info/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" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="style.css" />
+    <script defer src="script.js"></script>
+    <title>Asynchronous JavaScript</title>
+  </head>
+  <body>
+    <main class="container">
+
+      <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>
+      <button class="btn-country">Where am I?</button>
+      <div class="images"></div>
+    </main>
+  </body>
+</html>
diff --git a/find Country info/script.js b/find Country info/script.js
@@ -0,0 +1,152 @@
+'use strict';
+
+const btn = document.querySelector('.btn-country');
+const countriesContainer = document.querySelector('.countries');
+
+const renderCountry = function (data, className = '') {
+  const html = ` <article class="country ${className}>
+  <img class="country__img" src="${data.flag}" />
+  <div class="country__data">
+    <h3 class="country__name">${data.name}</h3>
+    <h4 class="country__region">${+data.region}</h4>
+    <p class="country__row"><span>👫</span>${(
+      data.population / 1000000
+    ).toFixed(1)} people</p>
+    <p class="country__row"><span>🗣️</span>${data.languages[0].name}</p>
+    <p class="country__row"><span>💰</span>${data.currencies[0].name}</p>
+  </div>
+</article>`;
+
+  countriesContainer.insertAdjacentHTML('beforeend', html);
+  // countriesContainer.computedStyleMap.style.opacity = 1;
+};
+
+const renderError = function (msg) {
+  countriesContainer.insertAdjacentText('beforeend', msg);
+  // countriesContainer.style.opacity = 1;
+};
+
+///////////////////////////////////////
+
+const getCountryAndNeighbour = function (country) {
+  // ajax call country 1
+  const request = new XMLHttpRequest();
+  request.open('GET', `https://restcountries.eu/rest/v2/name/${country}`);
+  request.send();
+  console.log(request.responseText);
+
+  request.addEventListener('load', function () {
+    console.log(this.responseText);
+    const data = JSON.parse(this.responseText);
+    console.log(data);
+
+    // render country
+    renderCountry(data);
+
+    // get neighber country (2)
+    const neighbour = data.borders?.[0];
+    if (!neighbour) return;
+
+    // ajax call country 2
+    const request2 = new XMLHttpRequest();
+    request2.open('GET', `https://restcountries.eu/rest/v2/alpha/${neighbour}`);
+    request2.send();
+
+    request2.addEventListener('load', function () {
+      const data2 = JSON.parse(this.responseText);
+      console.log(data2);
+
+      renderCountry(data2, 'neighbour');
+    });
+  });
+};
+
+// const getCountryData = function (country) {
+//   fetch(`https://restcountries.eu/rest/v2/alpha/${country}`)
+//     .then(Response => Response.json())
+//     .then(data => renderCountry(data[0]));
+// };
+
+const getJSON = function (url , errorMSG = "something went wrong") {
+   return fetch(url).then(response => {
+    if (!response.ok) throw new Error(`${errorMSG} (${response.status})`);
+    return response.json();
+  });
+};
+
+// const getCountryData = function (country) {
+//   // country 1
+
+//   fetch(`https://restcountries.eu/rest/v2/name/${country}`)
+//     .then(response => {
+//       if (!response.ok)
+//         throw new Error(`country not found (${response.status})`);
+
+//       response.json();
+//     })
+
+//     .then(data => {
+//       renderCountry(data[0]);
+//       const neighbour = data[0].borders[0];
+
+//       if (!neighbour) return;
+
+//       //country 2
+
+//       return fetch(`https://restcountries.eu/rest/v2/alpha/${neighbour}`);
+//     })
+//     .then(response => {
+//       if (!response.ok)
+//         throw new Error(`country not found (${response.status})`);
+
+//       return response.json();
+//     })
+//     .then(data => renderCountry(data, 'neighbour'))
+//     .catch(err => {
+//       console.error(`${err}☠☠`);
+//       renderError(`something went wrong ☠☠ ${err.message}.try again!`);
+//     })
+
+//     .finally(() => {
+//       countriesContainer.style.opacity = 1;
+//     });
+// };
+// btn.addEventListener('click', function () {
+//   getCountryData('Afghanistan');
+// });
+
+// getCountryAndNeighbour('Afghanistan');
+// getCountryAndNeighbour('usa');
+
+
+///////////////////////////////////////////
+
+
+const getCountryData = function (country) {
+  // country 1
+
+  getJSON(`https://restcountries.eu/rest/v2/name/${country}`,"country not found!")
+
+
+    .then(data => {
+      renderCountry(data[0]);
+      const neighbour = data[0].borders[0];
+
+      if (!neighbour) throw new Error("No neighbour found!");
+      //country 2
+      return getJSON(`https://restcountries.eu/rest/v2/alpha/${neighbour}`,"country not found");
+    })
+
+    .then(data => renderCountry(data, 'neighbour'))
+    .catch(err => {
+      console.error(`${err}☠☠`);
+      renderError(`something went wrong ☠☠ ${err.message}.try again!`);
+    })
+
+    .finally(() => {
+      countriesContainer.style.opacity = 1;
+    });
+};
+btn.addEventListener('click', function () {
+  getCountryData('Afghanistan');
+});
diff --git a/find Country info/style.css b/find Country info/style.css
@@ -0,0 +1,126 @@
+* {
+  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;
+  min-height: 100vh;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+
+.countries {
+  /* margin-bottom: 8rem; */
+  display: flex;
+
+  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;
+  /* overflow: hidden; */
+}
+
+.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: 17rem;
+  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;
+}
+
+.btn-country {
+  border: none;
+  font-size: 2rem;
+  padding: 2rem 5rem;
+  border-radius: 0.7rem;
+  color: white;
+  background-color: orangered;
+  cursor: pointer;
+}
+
+.images {
+  display: flex;
+}
+
+.images img {
+  display: block;
+  width: 80rem;
+  margin: 4rem;
+}
+
+.images img.parallel {
+  width: 40rem;
+  margin: 2rem;
+  border: 3rem solid white;
+  box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
+}