dishamodi0910 · IshuSinghSE · Jul 7, 2024 · Jul 7, 2024 · Jul 7, 2024
diff --git a/Existing_API_Collection/CountryAPI/.vscode/settings.json b/Existing_API_Collection/CountryAPI/.vscode/settings.json
diff --git a/Existing_API_Collection/CountryAPI/README.md b/Existing_API_Collection/CountryAPI/README.md
@@ -2,7 +2,7 @@
 Welcome to the Country API! This API is built to provide you with comprehensive information about all 195 countries of the world. Simply name the country, and I'll send you on a tour with detailed information about it!!
 
 ## Features
-- **Fetch Detailed Information about a Country:** Retrieve comprehensive data about any of the 195 countries, including their capital, population, languages and currency.
+- **Fetch Detailed Information about a Country:** Retrieve comprehensive data about any of the 195 countries, including their capital, population, languages, currency and more...
 - **Error Handling:** Robust error handling to ensure meaningful error messages and smooth API usage.
 - **Simple and Easy-to-Use Interface:** Designed with utmost simplicity, it has an easy-to-use interface.
 - **Search Functionality:** Easily search for countries by name to retrieve information quickly.
@@ -22,7 +22,7 @@ To set up the Country API locally, follow these steps:
 - Clone the repository
 - Switch to Existing_API_Collection folder `cd Existing_API_Collection`
 - Now switch to CountryAPI folder `cd CountryAPI`
-- Run command `.\/country.html`
+- Run command `./country.html`
 
 ## Screenshots
 ![Screenshot (396)](https://github.com/its-kritika/APIVerse/assets/144522556/41633810-7310-4b32-9843-eb6a18e4aaff)
diff --git a/Existing_API_Collection/CountryAPI/assets/background.jpg b/Existing_API_Collection/CountryAPI/assets/background.jpg
diff --git a/Existing_API_Collection/CountryAPI/assets/favicon.png b/Existing_API_Collection/CountryAPI/assets/favicon.png
diff --git a/Existing_API_Collection/CountryAPI/country.css b/Existing_API_Collection/CountryAPI/country.css
diff --git a/Existing_API_Collection/CountryAPI/country.html b/Existing_API_Collection/CountryAPI/country.html
diff --git a/Existing_API_Collection/CountryAPI/country.js b/Existing_API_Collection/CountryAPI/country.js
diff --git a/Existing_API_Collection/CountryAPI/countryapi.png b/Existing_API_Collection/CountryAPI/countryapi.png
diff --git a/Existing_API_Collection/CountryAPI/index.html b/Existing_API_Collection/CountryAPI/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link type="image/png" sizes="96x96" rel="icon" href="./assets/favicon.png">
+    <link rel="stylesheet" href="style.css" />
+    <title>Country Guide</title>
+</head>
+
+<body>
+    <div class="container">
+        <div class="search-wrapper">
+            <input type="search" name="search-country" class="search-country"
+                placeholder="Search Country..." />
+            <button class="search">
+                <svg id="search-icon" width="32px" height="32px" viewBox="-0.5 0 25 25" fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M22 11.8201C22 9.84228 21.4135 7.90885 20.3147 6.26436C19.2159 4.61987 17.6542 3.33813 15.8269 2.58126C13.9996 1.82438 11.9889 1.62637 10.0491 2.01223C8.10927 2.39808 6.32748 3.35052 4.92896 4.74904C3.53043 6.14757 2.578 7.92935 2.19214 9.86916C1.80629 11.809 2.00436 13.8197 2.76123 15.6469C3.51811 17.4742 4.79985 19.036 6.44434 20.1348C8.08883 21.2336 10.0222 21.8201 12 21.8201"
+                        stroke="#5fb4ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                    <path d="M2 11.8201H22" stroke="#5fb4ff" stroke-width="1.5" stroke-linecap="round"
+                        stroke-linejoin="round" />
+                    <path
+                        d="M12 21.8201C10.07 21.8201 8.5 17.3401 8.5 11.8201C8.5 6.30007 10.07 1.82007 12 1.82007C13.93 1.82007 15.5 6.30007 15.5 11.8201"
+                        stroke="#5fb4ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                    <path
+                        d="M18.3691 21.6901C20.3021 21.6901 21.8691 20.1231 21.8691 18.1901C21.8691 16.2571 20.3021 14.6901 18.3691 14.6901C16.4361 14.6901 14.8691 16.2571 14.8691 18.1901C14.8691 20.1231 16.4361 21.6901 18.3691 21.6901Z"
+                        stroke="#5fb4ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                    <path d="M22.9998 22.8202L20.8398 20.6702" stroke="#5fb4ff" stroke-width="1.5"
+                        stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </button>
+
+        </div>
+        <div class="image-wrapper">
+        </div>
+        <div class="result">
+            <div id="clear" class="clear"></div>
+        </div>
+
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Existing_API_Collection/CountryAPI/script.js b/Existing_API_Collection/CountryAPI/script.js
@@ -0,0 +1,125 @@
+const body = document.querySelector("body");
+const searchBtn = body.querySelector(".search");
+const searchInput = body.querySelector(".search-country");
+const result = body.querySelector(".result");
+
+const BASE_URL = "https://restcountries.com/v3.1/name";
+let countryInfo = {};
+
+searchBtn.addEventListener("click", () => {
+    let country = searchInput.value;
+    result.innerHTML = "";
+    getCountry(country);
+});
+
+document.addEventListener("click", (e) =>{
+    if (e.target && e.target.id === "clear") {
+    result.innerHTML = "";
+    searchInput.value = "";
+    }
+})
+
+const getCountry = async (countryName) => {
+    const response = await fetch(`${BASE_URL}/${countryName}?fullText=true`)
+        .then((response) => response.json())
+        .then((data) => {
+            countryInfo = data[0];
+            updateData();
+        })
+        .catch(() => {
+            let errorText = document.createElement('h3')
+            errorText.className = "box"
+            if (countryName.length == 0) {
+                errorText.textContent = "The input field cannot be empty"
+
+            } else {
+                errorText.textContent = "Please enter a valid country name."
+            }
+            result.append(errorText);
+        });
+};
+
+const updateData = () => {
+
+    //contains all response tree got from api for specific details
+    const countryMap = [
+        { name: "common-name", value: countryInfo?.name?.common },
+        {
+            name: "currency",
+            value: [
+                countryInfo?.currencies[Object?.keys(countryInfo?.currencies)]?.symbol,
+                countryInfo?.currencies[Object?.keys(countryInfo?.currencies)]?.name,
+            ].join(" "),
+        },
+        {
+            name: "native-name",
+            value: countryInfo?.name?.nativeName[
+                Object?.keys(countryInfo?.name?.nativeName)[1] ||
+                Object?.keys(countryInfo?.name?.nativeName)[0]
+            ]?.common,
+        },
+        { name: "continent", value: countryInfo?.continents[0] },
+        { name: "region", value: countryInfo?.subregion },
+        {
+            name: "languages",
+            value: Object?.values(countryInfo?.languages)
+                .toString()
+                .split(",")
+                .join(", "),
+        },
+        { name: "population", value: formatNumber(countryInfo?.population) },
+        { name: "area", value: countryInfo?.area + " km sq." },
+        {
+            name: "timezone (UTC)",
+            value: countryInfo?.timezones?.toString().split("UTC").join("  "),
+        },
+        {
+            name: "longitude-&-latitude",
+            value: [
+                '(' + countryInfo?.latlng[0],
+                countryInfo?.latlng[1] + ')'
+            ].join(" , "),
+        },
+        { name: "start-Of-Week", value: countryInfo?.startOfWeek },
+    ];
+
+    let image = document.createElement("img") //flag Image
+    image.src = countryInfo?.flags?.png;
+    image.alt = "country flag"
+
+    result.append(image)
+
+    countryMap.forEach((item) => {
+        // create html for each detail block
+        let box = document.createElement("div");
+        let info = document.createElement("h2");
+        let label = document.createElement("label");
+
+        { item.name === "common-name" || item.name === "currency" ? box.className = "highlight" : box.className = "box" };
+        label.textContent = (item.name).split('-').join(' ');
+        info.textContent = item.value;
+
+        box.appendChild(label);
+        box.appendChild(info);
+        result.append(box)
+    });
+
+    let button = document.createElement("button")
+    button.className = 'clear highlight'
+    button.id = 'clear'
+    button.textContent = "Close"
+    result.append(button)
+};
+
+
+function formatNumber(number) {
+    if (Math.abs(number) >= 1.0e9) {
+        return (number / 1.0e9).toFixed(1) + ' B'; // Convert to billions
+    } else if (Math.abs(number) >= 1.0e6) {
+        return (number / 1.0e6).toFixed(1) + ' M'; // Convert to millions
+    } else if (Math.abs(number) >= 1.0e3) {
+        return (number / 1.0e3).toFixed(1) + ' K'; // Convert to thousands
+    } else {
+        return number.toString(); // No conversion needed
+    }
+}