REST countries api redo second time.

I have made two version for this challenge, first with vanilla js and then using Reactjs.(I will add link to both at the bottom). With react it is quite easy to do stuff especially if creating markup dynamically. I dont know if you know react yet.

When i made it with vanilla js i forgot to implememt both search and filter together which i added in react version. This is how i did in react. Im sure you can the same way in Vanilla JS too.

I made two variable "countries" & "filteredContries". After initial network request , i put same result to both the variable. "countries" variable act as a backup, to get back initial result even after filtering and search. And then i made a function to update "filteredCountries" variable based on different scenario of filtering and searching together.

In DOM im looping through filteredCountries and not through "countries" variable.

There is what i did in that function:

if (option === "All" && searchInput === "") setFilteredCountries(countries);
    else if (option === "All" && searchInput !== "") {
      setFilteredCountries(
        countries.filter((country) =>
          country.name.toLowerCase().includes(searchInput)
        )
      );
    } else if (option !== "All" && searchInput === "") {
      setFilteredCountries(
        countries.filter((country) => country.region === option)
      );
    } else {
      setFilteredCountries(
        countries.filter((country) => {
          return (
            country.name.toLowerCase().includes(searchInput) &&
            country.region === option
          );
        })
      );
    }

I hope this helped you out. If you do not understand any path feel free to write back. I am happy to help. I am a self-tought dev i know the importance of helpin ppl out. Im no expert.

Keep solving these problems and you will be pro in no time..

Repo for Vanilla JS: https://github.com/besttlookk/FEM-REST_countries_with_theme_switch (look into dist folder)

Repo for React version: https://github.com/besttlookk/FEM-rest-countries-react-version (look into "src/pages/Home"

Good luck

Hi, There are few issues i like to point out.

1. Filter and search does not work at the same time. What if i first search something and then try to use filter?
2. I guess you are making network request each times user search or filter. Why bother, when you already have complete data on first re-load. Try to searcha and filter from that.
3. When search result is few, card becomes huge.
4. You dark mode toggle is not persistent, it chages to after refresh.

and finally a suggestion.

1. Add some hover effect to inhance intractivity.
2. When there is no result. let user know that. Black screen doen not look good.

and again here is mine: https://rest-countries-fem-v2.herokuapp.com/

Good luck

#happyCoding