Skip to content
OverviewSolutions
5
Comments
3
Jean Chris
@john-coderpro

All comments

  • Jay•695
    @JunjiequanSubmitted about 2 years ago

    This solution uses localStorage. Other than that all requirements & bonuses are completed.

    Maybe I will change it to full stack later after short break.

    Feedbacks are welcomed.

    Kanban task management web app

    1
    Jean Chris•160
    @john-coderproPosted almost 2 years ago

    I'm going to start this task management web app tomorrow 😃, I don't want to look at your code before I finish it. Anyway, you are impressive bro, for how long have you been learning web development? I guess you already have a job as a front end, right? Great job 👍, will tell what I think of your code when I finish mine

    0
  • Jean Chris•160
    @john-coderproPosted about 2 years ago

    hello ibrahim, congratulations for completing this challenge I don't know much about react but I got a glimpse in your code and this is what I can say about your specific preoccupations:

    you can't really do much to improve the time needed to fetch data from the api unless you reduce the amount of data you request, this is achievable by requesting the data by region starting with the region with the smallest amount of data (oceania in your case) then updating the view with those data before fetching the data for the other regions, that way the user will start interacting with your app very quickly (less than 3 second when you request countries from oceania first)

    to get the whole country's name for borders you'll use the borders array that the api provides, because this are cca3 codes, you can pass it as a parameter to the following function

     const getBordersNames = function (arrayOfBordersCca3Codes, countries) {
    if (arrayOfBordersCca3Codes) 
        return countries
            .filter((country) => arrayOfBordersCca3Codes.includes(country.cca3))
            .reduce(
                (arrayOfBordersNames, currentObject) =>
                    arrayOfBordersNames.concat(currentObject.name.common),
                []
            )
    else return null
}

    hope it helps

    0
  • Dusan Madjar•120
    @Djarma12Submitted about 2 years ago

    This challenge was very interesting, the problem was that it took me a long time to solve each problem, but in the end I succeeded.

    I will appear any suggestions on how to solve this.

    Any suggestions is highly welcome!

    HTML CSS JS API-call

    2
    Jean Chris•160
    @john-coderproPosted about 2 years ago

    hi dusan, congratulations for completing this challenge! here are some suggestions I can give to you:

    • I have noticed that once the user filters countries by region, there's no way to get back to all countries, think about adding an 'all' button

    • you can improve accessibility by making your interactive elements focusable ( like your countries cards, the filters country button ...), it can be done by giving them a tabindex of 0

    • think about using the right html element for the right purpose ( your toggle theme button for instance is a paragraph!, think about making it a button, which is even naturally focusable)

    • the countries' borders in your app are cca3 codes which is not very informative for the user, you can use this function to get the real names of the corresponding borders

    const getBordersNames = function (arrayOfBordersCca3Codes, countries) {
   if (arrayOfBordersCca3Codes) 
       return countries
           .filter((country) => arrayOfBordersCca3Codes.includes(country.cca3))
           .reduce(
               (arrayOfBordersNames, currentObject) =>
                   arrayOfBordersNames.concat(currentObject.name.common),
               []
           )
   else return null}

    hope it helps

    0