From e94c3437f8ccd8d97e1abfd26c1913851a07153d Mon Sep 17 00:00:00 2001 From: tomergol15 Date: Sat, 14 Dec 2024 12:31:25 +0200 Subject: [PATCH 1/5] get the array from JSON-file, duplicate the cards, filter it by region --- index.html | 283 +++++++++++++++++++++++++---------------------------- index.js | 149 ++++++++++++++++++++++++++++ 2 files changed, 283 insertions(+), 149 deletions(-) create mode 100644 index.js diff --git a/index.html b/index.html index f4afbf5..a8b70b0 100644 --- a/index.html +++ b/index.html @@ -1,158 +1,143 @@ - - - - - - - - - - - - - - - - - Countries Info - - - - - -
-
- - + + + + + + + + + + + + + + + + + + Countries Info + + + + + + +
+
+ -
- + +
+
+ -
-
-
- - +
+
+
+ + +
+
+
+ Filter by Region +
-
-
- Filter by Region - +
+
    +
  • All
    • +
  • Africa
    • +
  • America
    • +
  • Asia
    • +
  • Europe
    • +
  • Oceania
    • +
+
+
+
+
+ +
+
+
+ +
+ Afghanistan FLag
-
-
    -
  • All
    • -
  • Africa
    • -
  • America
    • -
  • Asia
    • -
  • Europe
    • -
  • Oceania
    • +
    +

    Afghanistan

    +
      +
    • population: 40218234
      • +
    • Region: Asia
      • +
    • capital: Kabul
    -
-
-
- -
-
-
- -
- Afghanistan FLag -
-
-

Afghanistan

-
    -
  • population: 40218234
    • -
  • Region: Asia
    • -
  • capital: Kabul
    • -
-
- - -
- Åland Islands FLag -
-
-

Åland Islands

-
    -
  • population: 28875
    • -
  • Region: Europe
    • -
  • capital: Mariehamn
    • -
-
- - -
- Aruba FLag -
-
-

Aruba

-
    -
  • population: 106766
    • -
  • Region: Americas
    • -
  • capital: Oranjestad
    • -
-
- - -
- Belize FLag -
-
-

Belize

-
    -
  • population: 397621
    • -
  • Region: Americas
    • -
  • capital: Belmopan
    • -
-
- -
-
-
- + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..caadc85 --- /dev/null +++ b/index.js @@ -0,0 +1,149 @@ +console.log('hello'); +let countries = []; +const containerCountries = document.querySelector(".countries-grid"); +const countryCardTemplate = document.querySelector(".country.scale-effect"); + +fetch('./CountriesData.json') + .then((res) => { + if (!res.ok) { + throw new Error(`HTTP error! Status: ${res.status}`); + } + return res.json(); + }) + .then((data) => { + countries = data; + console.log(data); + innerDetailsIntoCards(countries); + }) + .catch((error) => { + console.error("Unable to fetch data:", error); + }); + +const innerDetailsIntoCards = (array) => { + containerCountries.innerHTML = ''; + + array.forEach((country) => { + const cloneCard = countryCardTemplate.cloneNode(true); + + const titleElement = cloneCard.querySelector(".country-title"); + const flagImage = cloneCard.querySelector(".country-flag img"); + const countryInfo = cloneCard.querySelectorAll(".country-brief li"); + + titleElement.innerHTML = country.name; + flagImage.src = country.flag; + flagImage.alt = `${country.name}`; + + countryInfo[0].innerHTML = `Population: ${country.population}`; + countryInfo[1].innerHTML = `Region: ${country.region}`; + countryInfo[2].innerHTML = `Capital: ${country.capital}`; + + containerCountries.appendChild(cloneCard); + }); +}; + +const openDropDown = () => { + const dropDown = document.querySelector(".dropdown-wrapper"); + console.log('enter'); + dropDown.classList.toggle("open"); +} + +const filterByRegion = (event) => { + const region = event.target.getAttribute("data-region"); + console.log("select region:" + region) + + if(region!="all"){ + const result = countries.filter((country)=>{ + return country.region.toLowerCase() == region.toLowerCase() + }) + console.log(result); + innerDetailsIntoCards(result); +} +else{ + innerDetailsIntoCards(countries); +} + +// const result = countries.filter((country)=>{ +// return country.region === "Africa"; +// }) +// console.log(result); +} + + +//maybe do this +const changeColorOfPage = () =>{ + console.log("enter"); + const currentColor = getComputedStyle(document.body).backgroundColor; + + if (currentColor === "rgb(33, 37, 41)") { + document.body.style.backgroundColor = "rgb(255, 255, 255)"; + } else { + document.body.style.backgroundColor = "rgb(33, 37, 41)"; + } +}; + + + + + + + + + +// const containerCountries = document.querySelector(".countries-grid"); +// const countryCard = document.querySelector(".country.scale-effect"); +// const cards= document.querySelectorAll(".country"); + +// fetch('./CountriesData.json') +// .then((res) => { +// if (!res.ok) { +// throw new Error +// (`HTTP error! Status: ${res.status}`); +// } +// return res.json(); +// }) +// .then((data) => { +// countries = data; +// console.log(data); +// duplicateCard(); +// innerTextIntoCardDetails(countries); +// }) +// .catch((error) => +// console.error("Unable to fetch data:", error)); + +// const duplicateCard = () =>{ +// const lenArray = countries.length; + +// for(i=1;i{ +// const cards= document.querySelectorAll(".country"); //take after the duplicate + +// for(i=0;i{ +// const label = item.querySelector("strong").textContent.trim().replace(":", ""); +// if(label==="population"){ +// item.innerHTML = countries[i].population; +// } +// else if(label==="Region"){ +// item.innerHTML = countries[i].region; +// } +// else if(label==="capital"){ +// item.innerHTML = countries[i].capital; +// } +// }) +// titleElement.innerHTML = countries[i].name; +// flagImage.src = countries[i].flag; +// flagImage.alt = `${countries[i].name}`; +// } +// } + + + + From 9c305acbfa86812c2a8fdc35fc3c51679a6e0854 Mon Sep 17 00:00:00 2001 From: tomergol15 Date: Sat, 14 Dec 2024 14:49:05 +0200 Subject: [PATCH 2/5] save the details of selected country when switch a page, and innerHtml to .country-details --- details.html | 5 +++-- details.js | 23 +++++++++++++++++++++++ index.html | 2 +- index.js | 20 ++++++++++++++++++++ 4 files changed, 47 insertions(+), 3 deletions(-) create mode 100644 details.js diff --git a/details.html b/details.html index b584581..eb0f49a 100644 --- a/details.html +++ b/details.html @@ -74,7 +74,8 @@

Where in the world?

- - + + + diff --git a/details.js b/details.js new file mode 100644 index 0000000..145f1d8 --- /dev/null +++ b/details.js @@ -0,0 +1,23 @@ +console.log("hello details.page"); +const loader = document.querySelector(".loader"); +loader.style.display = "none"; + +const countryDetails = JSON.parse(localStorage.getItem("selectedCountry")); +console.log("selected country", countryDetails); + +const htmlDetails = document.querySelector('.country-details'); +htmlDetails.innerHTML = ` +
+ ${countryDetails.name} FLag +
+
+

${countryDetails.name}

+
    +
  • ${countryDetails.population}
    • +
  • ${countryDetails.region}
    • +
  • ${countryDetails.capital}
    • +
+
+ `; +document.querySelector(".country-flag img").style.width = "450px"; diff --git a/index.html b/index.html index a8b70b0..814f402 100644 --- a/index.html +++ b/index.html @@ -70,7 +70,7 @@

Where in the world?

- +
Afghanistan FLag diff --git a/index.js b/index.js index caadc85..88c2b66 100644 --- a/index.js +++ b/index.js @@ -69,6 +69,26 @@ else{ } + +const switchPage = (event) =>{ + + // event.preventDefault(); + const card = event.currentTarget; + console.log(card.innerHTML); + + const titleElement = card.querySelector(".country-title").textContent; + const flagImage = card.querySelector(".country-flag img").src; + const population = card.querySelector(".country-brief li:nth-child(1)").textContent; + const region = card.querySelector(".country-brief li:nth-child(2)").textContent; + const capital = card.querySelector(".country-brief li:nth-child(3)").textContent; + + const countryInfo = {name:titleElement, flagImg:flagImage, population:population, region: region, capital:capital}; + console.log(countryInfo); + localStorage.setItem("selectedCountry", JSON.stringify(countryInfo)); + window.location.href = "details.html"; +} + + //maybe do this const changeColorOfPage = () =>{ console.log("enter"); From 9842051c567eb25dcf4557ecacc4d81013187577 Mon Sep 17 00:00:00 2001 From: tomergol15 Date: Sat, 14 Dec 2024 15:27:34 +0200 Subject: [PATCH 3/5] added func of filter by search input that check if the countries array contains the input and show the rellevant cards in the page --- index.html | 2 +- index.js | 19 +++++++++++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 814f402..276d688 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@

Where in the world?

- +
diff --git a/index.js b/index.js index 88c2b66..c905390 100644 --- a/index.js +++ b/index.js @@ -68,11 +68,26 @@ else{ // console.log(result); } +const matchValues = (country, input) => { + return (country.name.toLowerCase().includes(input) || + country.population.toString().includes(input)) || + country.region.toLowerCase().includes(input) || + country.capital.toLowerCase().includes(input) +} +const filterBySerach = (event) =>{ + console.log("enter to filterbyserach func"); + const input = event.target.value.toLowerCase(); + console.log(input); + + const resultBySearch = countries.filter((country)=>{ + return matchValues(country,input); + }) + console.log(resultBySearch); + innerDetailsIntoCards(resultBySearch); +} const switchPage = (event) =>{ - - // event.preventDefault(); const card = event.currentTarget; console.log(card.innerHTML); From 1c4f3d0d0b9d43e4be49e08ae293eb8abb20edbc Mon Sep 17 00:00:00 2001 From: tomergol15 Date: Sat, 14 Dec 2024 15:38:05 +0200 Subject: [PATCH 4/5] added folder of js for index.js and details.js file --- details.js => JS/details.js | 0 index.js => JS/index.js | 0 details.html | 2 +- index.html | 2 +- 4 files changed, 2 insertions(+), 2 deletions(-) rename details.js => JS/details.js (100%) rename index.js => JS/index.js (100%) diff --git a/details.js b/JS/details.js similarity index 100% rename from details.js rename to JS/details.js diff --git a/index.js b/JS/index.js similarity index 100% rename from index.js rename to JS/index.js diff --git a/details.html b/details.html index eb0f49a..9bc2cea 100644 --- a/details.html +++ b/details.html @@ -76,6 +76,6 @@

Where in the world?

- + diff --git a/index.html b/index.html index 276d688..9ae782b 100644 --- a/index.html +++ b/index.html @@ -87,7 +87,7 @@

Afghanistan

- + From 9d634933d5a9a6e0f0cfd34001fbb7c9ae65a33e Mon Sep 17 00:00:00 2001 From: tomergol15 Date: Sat, 21 Dec 2024 13:14:20 +0200 Subject: [PATCH 5/5] changes after pull request : dill with white spaces in serach func, change from innerHtml in innerDetailsIntoCards func and more --- JS/index.js | 119 ++++++++++++++++++++-------------------------------- index.html | 67 ++--------------------------- 2 files changed, 49 insertions(+), 137 deletions(-) diff --git a/JS/index.js b/JS/index.js index c905390..939a0eb 100644 --- a/JS/index.js +++ b/JS/index.js @@ -29,13 +29,25 @@ const innerDetailsIntoCards = (array) => { const flagImage = cloneCard.querySelector(".country-flag img"); const countryInfo = cloneCard.querySelectorAll(".country-brief li"); - titleElement.innerHTML = country.name; + titleElement.textContent = country.name; flagImage.src = country.flag; flagImage.alt = `${country.name}`; - countryInfo[0].innerHTML = `Population: ${country.population}`; - countryInfo[1].innerHTML = `Region: ${country.region}`; - countryInfo[2].innerHTML = `Capital: ${country.capital}`; + countryInfo[0].textContent = "Population: "; + const populationStrong = document.createElement("strong"); + populationStrong.textContent = country.population; + countryInfo[0].appendChild(populationStrong); + + countryInfo[1].textContent = "Region: "; + const regionStrong = document.createElement("strong"); + regionStrong.textContent = country.region; + countryInfo[1].appendChild(regionStrong); + + + countryInfo[2].textContent = "Capital: "; + const capitalStrong = document.createElement("strong"); + capitalStrong.textContent = country.capital; + countryInfo[2].appendChild(capitalStrong); containerCountries.appendChild(cloneCard); }); @@ -47,6 +59,25 @@ const openDropDown = () => { dropDown.classList.toggle("open"); } +const regions = ["All", "Africa", "Americas", "Asia", "Europe", "Oceania"]; +const createDropDownBody=()=>{ + const dropdownBody = document.createElement("div"); + dropdownBody.classList.add("dropdown-body"); + const ul = document.createElement("ul"); + + regions.forEach((region)=>{ + const li = document.createElement('li'); + li.textContent = region; + li.setAttribute("data-region", region.toLowerCase()); + li.setAttribute("onClick", "filterByRegion(event)"); + ul.appendChild(li); + }); + dropdownBody.appendChild(ul); + const dropdownWrapper = document.querySelector(".dropdown-wrapper"); + dropdownWrapper.appendChild(dropdownBody); +} +createDropDownBody(); + const filterByRegion = (event) => { const region = event.target.getAttribute("data-region"); console.log("select region:" + region) @@ -76,7 +107,7 @@ const matchValues = (country, input) => { } const filterBySerach = (event) =>{ console.log("enter to filterbyserach func"); - const input = event.target.value.toLowerCase(); + const input = event.target.value.toLowerCase().trim(); //ignore white spaces and make it lowercase letters console.log(input); const resultBySearch = countries.filter((country)=>{ @@ -105,16 +136,16 @@ const switchPage = (event) =>{ //maybe do this -const changeColorOfPage = () =>{ - console.log("enter"); - const currentColor = getComputedStyle(document.body).backgroundColor; +// const changeColorOfPage = () =>{ +// console.log("enter"); +// const currentColor = getComputedStyle(document.body).backgroundColor; - if (currentColor === "rgb(33, 37, 41)") { - document.body.style.backgroundColor = "rgb(255, 255, 255)"; - } else { - document.body.style.backgroundColor = "rgb(33, 37, 41)"; - } -}; +// if (currentColor === "rgb(33, 37, 41)") { +// document.body.style.backgroundColor = "rgb(255, 255, 255)"; +// } else { +// document.body.style.backgroundColor = "rgb(33, 37, 41)"; +// } +// }; @@ -122,63 +153,3 @@ const changeColorOfPage = () =>{ - - -// const containerCountries = document.querySelector(".countries-grid"); -// const countryCard = document.querySelector(".country.scale-effect"); -// const cards= document.querySelectorAll(".country"); - -// fetch('./CountriesData.json') -// .then((res) => { -// if (!res.ok) { -// throw new Error -// (`HTTP error! Status: ${res.status}`); -// } -// return res.json(); -// }) -// .then((data) => { -// countries = data; -// console.log(data); -// duplicateCard(); -// innerTextIntoCardDetails(countries); -// }) -// .catch((error) => -// console.error("Unable to fetch data:", error)); - -// const duplicateCard = () =>{ -// const lenArray = countries.length; - -// for(i=1;i{ -// const cards= document.querySelectorAll(".country"); //take after the duplicate - -// for(i=0;i{ -// const label = item.querySelector("strong").textContent.trim().replace(":", ""); -// if(label==="population"){ -// item.innerHTML = countries[i].population; -// } -// else if(label==="Region"){ -// item.innerHTML = countries[i].region; -// } -// else if(label==="capital"){ -// item.innerHTML = countries[i].capital; -// } -// }) -// titleElement.innerHTML = countries[i].name; -// flagImage.src = countries[i].flag; -// flagImage.alt = `${countries[i].name}`; -// } -// } - - - - diff --git a/index.html b/index.html index 9ae782b..7d1e12b 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,8 @@

Where in the world?

 - @@ -46,23 +47,13 @@

Where in the world?

- +
Filter by Region
-
-
    -
  • All
    • -
  • Africa
    • -
  • America
    • -
  • Asia
    • -
  • Europe
    • -
  • Oceania
    • -
-
@@ -90,54 +81,4 @@

Afghanistan

- - - - - - - \ No newline at end of file + \ No newline at end of file