Jay• 695
@Junjiequan
Submitted
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.
Jean Chris
@john-coderpro
All comments
- Jean Chris• 160
@john-coderpro
Posted
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 @fvlly
Submitted
Hello, I have the following questions:
- How can I improve fetching data from API
- I would also like to know how to get the whole country name of the border countries on the detailed page. I really appreciate any help you can provide.
Jean Chris• 160@john-coderpro
Posted
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
@Djarma12
Submitted
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!
Jean Chris• 160@john-coderpro
Posted
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 -
- Kofi Akyea• 150
@Takeda-harsh
Submitted
I had issues replacing the desktop image with the mobile one when i was coding for the mobile version. I ended up resizing the desktop image and it didnt look so good. Any help? Thanks
Jean Chris• 160@john-coderpro
Posted
hello kofi , congratulations for completing this challenge! here are some points you can look at to improve: -it's generally a good idea to follow the mobile first workflow, where you start to think about the mobile look first and use media queries to code style for greater screen sizes
-media queries are great but you can use relatives units (em, rem, vw, vh ...) to benefit from natural responsiveness, that will ensure that your site looks great on any screen size rather than only on specific sizes, for instance , for screen sizes between 480px and 700px your card won't look great because an horizontal scrollbar will appear
-for the problem of your image you can use the srcset attribute which allows the browser to choose the image with respect to the screen size, you can learn more about this attribute at https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
-for accessibility, the accessibility report has surely given you a lot of feedbacks to take into account lol :)
by the way I'm still learning to make comments on front end mentor, I'm not acquainted yet on how to use it properly
hope it helps
0
