tapascript · atapas · May 27, 2025 · May 25, 2025 · May 27, 2025
diff --git a/README.md b/README.md
@@ -61,3 +61,8 @@ I am an independent educator and open-source enthusiast who creates meaningful p
 - **`Day 25: JavaScript fetch() Explained Like Never Before`** - [Watch Video](https://www.youtube.com/watch?v=G3oPZSvrO9w) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-25/README.md)
 - **`Day 26: 6 Common Mistakes with JavaScript Promises & Async Code`** - [Watch Video](https://youtu.be/c_zcXUz1neo) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-26/README.md)
 - **`Day 27: How Your Async Code Works | JavaScript Event Loop Simplified!`** - [Watch Video](https://youtu.be/4IYcwOfW3BM) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-27/README.md)
+- **`Day 28: Build a Country App with Asynchronous JavaScript & TailwindCSS 🤩`** - [Watch Video](https://www.youtube.com/watch?v=jXS0VURNqxA) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-28/README.md)
+
+### Module 5 - Object Oriented Programming(OOP) in JavaScript
+
+TBA
diff --git a/day-28/README.md b/day-28/README.md
@@ -0,0 +1,33 @@
+# Day 28 - Building a Country Explorer App
+
+## **🎯 Goal of This Lesson**
+
+- ✅ Before We Start
+- ✅ REST Country APIs
+- ✅ What Are We Building?
+- ✅ The Project Setup
+- ✅ The HTML Structure
+- ✅ Fetching Countries
+- ✅ Showing Details
+- ✅ The Map
+- ✅ The Time & TimeZone
+- ✅ What’s Next?
+
+## 🫶 Support
+
+Your support means a lot.
+
+- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
+- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
+
+    > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
+
+### 🤝 Sponsor My Work
+
+I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
+
+## Video
+
+Here is the video for you to go through and learn:
+
+[![day-28](./banner.png)](https://www.youtube.com/watch?v=jXS0VURNqxA "Video")
diff --git a/day-28/banner.png b/day-28/banner.png
diff --git a/day-28/country-explorer/.gitignore b/day-28/country-explorer/.gitignore
@@ -0,0 +1,5 @@
+/node_modules
+.git
+package-lock.json
+yarn.lock
+dist
diff --git a/day-28/country-explorer/LICENSE b/day-28/country-explorer/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 tapaScript
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/day-28/country-explorer/README.md b/day-28/country-explorer/README.md
@@ -0,0 +1,9 @@
+# Country Explorer
+
+To Start the project,
+
+```bash
+npm install
+
+npm run start
+```
diff --git a/day-28/country-explorer/index.html b/day-28/country-explorer/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Country Explorer</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  <link href="/src/index.css" rel="stylesheet" />
+  <script async src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  <script defer type="module" src="/src/main.js"></script>
+</head>
+
+<body class="bg-gray-900 text-white">
+
+  <div class="mx-auto p-4">
+    <div class="flex justify-between items-center">
+      <h1 class="text-3xl font-bold">Country Explorer</h1>
+    </div>
+
+    <div class="mt-4 flex flex-col sm:flex-row gap-2">
+      <input id="searchInput" type="text" placeholder="Enter country name" class="border p-2 rounded w-full sm:w-auto">
+      <button id="searchBtn" class="bg-blue-500 text-white px-4 py-2 rounded">Search</button>
+    </div>
+
+    <div id="loader" class="hidden mt-4 text-center">Loading...</div>
+    <div id="error" class="hidden mt-4 text-red-500"></div>
+
+    <div id="countryDetails" class="mt-4 space-y-4"></div>
+
+    <div id="map" class="h-64 mt-4"></div>
+  </div>
+
+
+</body>
+
+</html>
diff --git a/day-28/country-explorer/package.json b/day-28/country-explorer/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "js-base-setup",
+  "version": "1.0.0",
+  "description": "javascript setup with tailwindcss and vite",
+  "main": "main.js",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "javascript",
+    "base"
+  ],
+  "author": "tapaScript | learn@tapascript.io",
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "@tailwindcss/cli": "^4.1.2",
+    "@tailwindcss/vite": "^4.1.7",
+    "tailwindcss": "^4.1.7",
+    "vite": "^6.3.5"
+  }
+}
diff --git a/day-28/country-explorer/src/index.css b/day-28/country-explorer/src/index.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/day-28/country-explorer/src/main.js b/day-28/country-explorer/src/main.js
@@ -0,0 +1,123 @@
+console.log("Country Explorer");
+
+const searchBtn = document.getElementById("searchBtn");
+const searchInput = document.getElementById("searchInput");
+const loader = document.getElementById("loader");
+const error = document.getElementById("error");
+const countryDetails = document.getElementById("countryDetails");
+
+let map;
+
+searchBtn.addEventListener("click", async () => {
+    const country = searchInput.value.trim();
+
+    if (!country) return;
+
+    await fetchCountry(country);
+});
+
+async function fetchCountry(name) {
+    loader.classList.remove("hidden");
+    error.classList.add("hidden");
+
+    countryDetails.innerHTML = "";
+
+    try {
+        const response = await fetch(
+            `https://restcountries.com/v3.1/name/${name}?fullText=true`
+        );
+        const data = await response.json();
+
+        const country = data[0];
+
+        if (!country) {
+            throw new Error(`Invalid Country Name`);
+        }
+        const languages = country.languages
+            ? Object.values(country.languages).join(",")
+            : "N/A";
+
+        countryDetails.innerHTML = `
+            <div class="p-4 border rounded shadow">
+                <img src="${country.flags.svg}" alt="flag" class="w-32 mb-2" />
+                <h2 class="text-xl font-bold">${country.name.common}</h2>
+                <p><strong>Capital:</strong> ${country.capital}</p>
+                <p><strong>Population:</strong> ${country.population.toLocaleString()}</p>
+                <p><strong>Languages:</strong> ${languages}</p>
+                <div class="mb-4">
+                    <h2 class="text-xl font-semibold mb-2">Local Times</h2>
+                    <ul id="timezoneList" class="list-disc ml-6"></ul>
+                </div>
+            </div>
+        `;
+
+        updateTimezones(country.timezones);
+        drawMap(country.latlng, country.name.common);
+    } catch (err) {
+        error.classList.remove("hidden");
+        error.textContent =
+            err.message || "Failed to load the country information";
+        console.error(err);
+    } finally {
+        loader.classList.add("hidden");
+    }
+}
+
+function updateTimezones(timezones) {
+    const timezoneList = document.getElementById("timezoneList");
+    timezoneList.innerHTML = "";
+
+    timezones.forEach((tz) => {
+        const li = document.createElement("li");
+        const localTime = getTimeUsingIntl(tz);
+
+        li.textContent = `${tz} - ${localTime}`;
+        timezoneList.appendChild(li);
+    });
+}
+
+function getTimeUsingIntl(tz) {
+    try {
+        const options = {
+            timeZone: convertToIANA(tz),
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: true,
+        };
+        return Intl.DateTimeFormat("en-US", options).format(new Date());
+    } catch (err) {
+        console.warn(`Timezone ${tz} not supported, falling back.`);
+        return "Unsupported timezone";
+    }
+}
+
+function convertToIANA(utcString) {
+    // Basic support for known UTC formats
+    if (utcString === "UTC") return "Etc/UTC";
+
+    const match = utcString.match(/^UTC([+-]\d{2}):(\d{2})$/);
+    if (match) {
+        const [, hour, min] = match;
+        // Convert UTC offset to Etc/GMT format (note: reverse sign for IANA)
+        const offset = parseInt(hour, 10);
+        const sign = offset < 0 ? "+" : "-";
+        return `Etc/GMT${sign}${Math.abs(offset)}`; // IANA flips signs
+    }
+
+    return "Etc/UTC"; // fallback
+}
+
+function drawMap(latlang, name) {
+    const [lat, lng] = latlang;
+
+    if (!map) {
+        map = L.map("map").setView([lat, lng], 5);
+        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
+            map
+        );
+    } else {
+        map.setView([lat, lng], 5);
+    }
+
+    L.marker([lat, lng]).addTo(map).bindPopup(name).openPopup();
+}
diff --git a/day-28/country-explorer/vite.config.js b/day-28/country-explorer/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+export default defineConfig({
+  plugins: [tailwindcss()],
+  server: {
+    port: 3001,
+  },
+});