Rest countries API with colour theme switcher master Solution

Community feedback

• 

  Mojtaba Mosavi•3,760

  @MojtabaMosaviPosted over 2 years ago

  Good job, I working on this one as well. Take a look at the following points:

  • In my opinion the more interactive a UI is the better and therefor as frontend dev you should use at every at you disposal where it makes sence for example for simple link a hover state suffices but somewhere else you might wanna spice things up with custom animation/transitions.

    1. the toggle button for the theme needs a hover state to communicate to the users it could be changed.

    2. the card representing each contry needs a hover state as well to let the user know there is more.

    3. The border contries displayed in the footer of when you click on contry

  • Take a look at the issu rapport generated and correct them.

  • The mode toggle button is not keybord accessible and has a too wide of a clickable area by which I mean if you click in the middle of header you can change the theme, the clickable area should be a small rectangle covering the toggle button.

  • The queries that don't mapp to a real country, it should display a "no result" message to let the user know it does not exist.

  Happy coding :=)

  Marked as helpful

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Chinmay, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • add <title> to head of document
  • add header tag and wrap the navbar for improve the Accessibility
  • add main tag and wrap the cards for improve the Accessibility
  • img element must have an alt attribute, it's very important!
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of images of flag and html comments
  • use h2 for the name country into the card
  • you can use ul element instead multiple p for the text details of country
  • if I type a query that doesn't give any results, nothing happens, try adding a "no results" message
  • I would also add a query reset button, I find it very convenient

  Overall you did well 😁 Hope this help!

  Marked as helpful

  1