Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@RanjanWorks
RanjanWorks committed Sep 16, 2024
0 parents commit f4738f5
Show file tree
Hide file tree
Showing 4 changed files with 569 additions and 0 deletions.
130 changes: 130 additions & 0 deletions details.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<!-- details.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Country Details</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
/>
</head>
<body>
<header>
<p>Where in the World?</p>
<div class="dark-theme-container">
<!-- <i class="material-symbols-outlined">dark_mode</i> -->
</div>
</header>
<div class="backdiv">
<div onclick="window.history.back()" class="backdiv-wrapper">
<i class="material-symbols-outlined">arrow_back</i>
<p>Back</p>
</div>
</div>

<!-- <div id="country-details"></div> -->
<section class="details-container"></section>
<script>
fetchCountries(
"https://restcountries.com/v3.1/name/india?fullText=true"
).then((data) => {
console.log(data);
});
async function fetchCountries(url) {
try {
const response = await fetch(url);
if (!response.ok)
throw new Error(`HTTP error! status: ${response.status}`);
return await response.json();
} catch (error) {
console.error("Error fetching the URL:", error);
}
}
</script>

<script>
// Get the country name from the URL parameter
const urlParams = new URLSearchParams(window.location.search);
const countryName = urlParams.get("country");

if (countryName) {
// Fetch country details using the REST API
fetch(
`https://restcountries.com/v3.1/name/${encodeURIComponent(
countryName
)}?fullText=true`
)
.then((response) => response.json())
.then((data) => displayCountryDetails(data[0])) // Assuming the first result is the correct one
.catch((error) =>
console.error("Error fetching country details:", error)
);
} else {
document.getElementById("country-details").innerHTML =
"Country not found!";
}

function displayCountryDetails(country) {
console.log(country);
const countryDetails = `
<div class="big-img">
<img src="${country.flags?.svg || ''}" alt="${country.name?.common || 'Flag'}">
</div>
<div class="details-page">
<h1>${country.name?.common || 'N/A'}</h1>
<div class="details-wrapper">
<p>Native name: <span>${
country.name?.nativeName
? Object.values(country.name.nativeName).map(native => native.official).join(", ")
: "N/A"
}</span></p>
<p>Population: <span>${country.population?.toLocaleString() || 'N/A'}</span></p>
<p>Region: <span>${country.region || 'N/A'}</span></p>
<p>Status: <span>${country.status || 'N/A'}</span></p>
<p>Capital: <span>${country.capital?.[0] || 'N/A'}</span></p>
<p>Currencies: <span>${
country.currencies
? Object.values(country.currencies).map(c => c.name).join(", ")
: 'N/A'
}</span></p>
<p>Start of week: <span>${country.startOfWeek || 'N/A'}</span></p>
<p>Time zone: <span>${country.timezones?.join(", ") || 'N/A'}</span></p>
<p>Independent: <span>${country.independent ? 'Yes' : 'No'}</span></p>
<p>Languages: <span>${
country.languages
? Object.values(country.languages).join(", ")
: 'N/A'
}</span></p>
</div>
<div class="borders">
<h2>Borders</h2>
<div class="border-wrapper">
${
country.borders && country.borders.length > 0
? country.borders.map(border => `<span>${border}</span>`).join(" ")
: "N/A"
}
</div>
</div>
</div>
`;

document.querySelector(".details-container").innerHTML = countryDetails;
}

</script>
</body>
</html>

<!-- <h1>${country.name.common}</h1>
<img src="${country.flags.svg}" alt="Flag of ${country.name.common}">
<p>Population: ${country.population.toLocaleString()}</p>
<p>Region: ${country.region}</p>
<p>Subregion: ${country.subregion}</p>
<p>Capital: ${country.capital?.[0] || 'N/A'}</p>
<p>Languages: ${Object.values(country.languages).join(", ")}</p>
<p>Currencies: ${Object.values(country.currencies).map(c => c.name).join(", ")}</p> -->
68 changes: 68 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>World By Ranjan</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
/>
</head>
<body>
<header>
<p>Where in the World?</p>
<div class="dark-theme-container">
<!-- <i class='material-symbols-outlined'>dark_mode</i> -->
</div>
</header>
<div class="input-segment">
<div class="search-container">
<i class="material-symbols-outlined">search</i>
<input id="search" type="text" placeholder="Search for a country" />
</div>
<div class="filter-container">
<div class="dropdown">
<div class="select-text">
<span id="selectText">Filter By region </span
><i class="material-symbols-outlined">arrow_drop_down</i>
</div>
<div class="select-box">
<li>Africa</li>
<li>Americas</li>
<li>Asia</li>
<li>Europe</li>
<li>Oceania</li>
<li class="removeFilter">Remove filter</li>
</div>
</div>
</div>
</div>
<section class="country-container">
<div class="country-box">
<div class="flag-img">
<img src="https://flagcdn.com/in.svg" alt="" />
</div>
<div class="more-details">
<h1>India</h1>
<p>Population: <span>12121</span></p>
<p>Region <span>Asia</span></p>
<p>capital <span>Delhi</span></p>
</div>
</div>
<div class="country-box">
<div class="flag-img">
<img src="https://flagcdn.com/in.svg" alt="" />
</div>
<div class="more-details">
<h1>India</h1>
<p>Population: <span>12121</span></p>
<p>Region <span>Asia</span></p>
<p>capital <span>Delhi</span></p>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
98 changes: 98 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
let selectText = document.getElementById("selectText");
let dropDown = document.querySelector(".dropdown");
let CountryContainer = document.querySelector(".country-container");
const searchInput = document.getElementById("search");
let CountryArray = [];
let countryBoxes;

document.querySelectorAll(".select-box li").forEach((li) => {
li.addEventListener("click", (e) => {
removePreviousCountry();
let region = e.target.innerText;
selectText.innerHTML = region;

if (region !== "Remove filter") {
filterByRegion(CountryArray, region).forEach(displayCountry);
} else {
CountryArray.forEach(displayCountry);
selectText.innerHTML = "Filter by region"
}
});
});

function filterByRegion(data, region) {
return data.filter((country) => country.region === region);
}

dropDown.addEventListener("click", () => {
dropDown.classList.toggle("active");
});

document.addEventListener("click", (event) => {
if (!dropDown.contains(event.target)) {
dropDown.classList.remove("active");
}
});

searchInput.addEventListener("input", () => {
const searchValue = searchInput.value.toLowerCase().trim();
countryBoxes.forEach((box) => {
const countryName = box.querySelector("h1").textContent.toLowerCase();
const capitalName = box
.querySelector("p:nth-of-type(3) span")
.textContent.toLowerCase();
box.style.display =
countryName.includes(searchValue) || capitalName.includes(searchValue)
? ""
: "none";
});
});

async function fetchCountries(url) {
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
return await response.json();
} catch (error) {
console.error("Error fetching the URL:", error);
}
}

fetchCountries("https://restcountries.com/v3.1/all").then((data) => {
removePreviousCountry();
CountryArray = data;
CountryArray.forEach(displayCountry);
setTimeout(
() => (countryBoxes = document.querySelectorAll(".country-box")),
500
);
});

function displayCountry(country) {
const box = `
<div class="country-box show" data-country="${country.name.common}">
<div class="flag-img">
<img src="${country.flags.svg}" alt="Flag of ${country.name.common}">
</div>
<div class="more-details">
<h1>${country.name.common}</h1>
<p>Population: <span>${country.population.toLocaleString()}</span></p>
<p>Region: <span>${country.region}</span></p>
<p>Capital: <span>${country.capital?.[0] || 'N/A'}</span></p>
</div>
</div>`;

CountryContainer.insertAdjacentHTML("beforeend", box);

// Add click event to redirect to details page
const newBox = CountryContainer.querySelector(".country-box:last-child");
newBox.addEventListener("click", () => {
// Redirect to a details page with the country name as a URL parameter
window.location.href = `details.html?country=${encodeURIComponent(country.name.common)}`;
});
}


function removePreviousCountry() {
CountryContainer.innerHTML = "";
}
Loading

0 comments on commit f4738f5

Please sign in to comment.