editing

syedzohaib-dev · Aug 21, 2024 · 9dcc471 · 9dcc471
1 parent cd3d150
commit 9dcc471
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/app.js b/app.js
@@ -5,16 +5,17 @@ fetch('https://restcountries.com/v3.1/all').then((res) => res.json())
     .then((data) => {
         data.forEach((country) => {
             console.log(country)
-            const countryCard = document.createElement('div')
+            const countryCard = document.createElement('a')
             countryCard.classList.add('country-card')
+            countryCard.href = `./country.html?name=${country.name.common}`
             const cardHTML = `
              <img src="${country.flags.svg}" alt="flag">
                             <div class="card-text">
                                 <h3>${country.name.common}</h3>
-                                <p><b>Population: </b>${country.population}</p>
+                                <p><b>Population: </b>${country.population.toLocaleString()}</p>
                                 <p><b>Region: </b>${country.region}</p>
                                 <p><b>Capital: </b>${country.capital}</p>
-                               <p><b>Language: </b>${country.languages}</p>
+                               <p><b>Language: </b>${Object.values(country.languages)[0]}</p>
                             </div>
             `
             countryCard.innerHTML = cardHTML

diff --git a/country.html b/country.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Country </title>
+</head>
+
+<body>
+    <h1>Country</h1>
+<script src="country.js"></script>
+</body>
+
+</html>
diff --git a/country.js b/country.js
@@ -0,0 +1,7 @@
+const countryName = (new URLSearchParams(window.location.search).get('name'))
+
+fetch(`https://restcountries.com/v3.1/name/${countryName}?fullText=true`)
+    .then((res) => res.json)
+    .then((data) => {
+        console.log(data)
+    })
diff --git a/style.css b/style.css
@@ -47,11 +47,12 @@ main {
     border-radius: 4px;
     box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.1);
     /* transition: transform 0.2s ease-in-out; */
+    text-decoration: none;
 }
 
 
-.country-card :hover {
-    /* transform: scale(1.05); */
+.country-card:hover {
+    transform: scale(1.03);
 }
 
 .country-card img {
@@ -70,4 +71,5 @@ main {
 
 .card-text h3 {
     margin-bottom: 10px;
-}
+}
+