Countries list using HTML, CSS and JavaScript

Community feedback

• 

  Jyotirmoy Sinha Babu•430

  @jyotirmoy-sinhababuPosted over 1 year ago

  I have used const handleRegionChange = async (region) => { try { await axios .get(`https://restcountries.com/v3.1/region/${region}`) .then((res) => { if (res.status == 200) { setDataByRegion(res.data); } if (res.status != 200) { setIsErr(false); } }); } catch (err) { console.log(err); } }; as a filter function, where each region is a button and selecting the button will call the function with the selected region as an argument.

  For style I think you have used flex and flex-wrap, just reduced the gap between cards and increase the width of the cards , I think in that way it will look better.

  0

  ---

  

  Nuel•1,230

  @ijklmopffsPosted over 1 year ago

  @jyotirmoy-sinhababu i noticed you used the api, meanwhile i used the json file to pull the data, so I'm trying to see how that would work

  0

  

  Gabriel Portela•40

  @GPMSPosted over 1 year ago

  @ijklmopffs You could use Array.prototype.filter:

  const filteredData = data.filter(country => filterRegion === 'default' || country.region === filterRegion)
  

  For the name filter you could do the same thing and even also check the aliases (to allow "usa" for "United States of America"):

  const filteredData = data.filter(country => {
  const possibleNames = country.altSpellings
  ? [country.name, ...country.altSpellings]
  : [country.name];
  return possibleNames.some((name) => name.toLowerCase().includes(filterText.toLowerCase()))
  })
  

  For both just put it all in the same filter call and adjust the code. You could replicate this with just for loops but using functions like filter and some make your code more readable.

  After that you just need to render the filteredData instead of data.

  0