rest countries api app using react js

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great job on this one. Layout in desktop looks nice, the responsive state could be improve since resizing, the cards gets squeezed, you could have just a different layout like 2x2, 3x3 on screen resize. This way, each card won't be squeezed, because it will have a right size. The mobile layout however makes the card thin, too much padding are used.

  Some suggestions would be:

  • "Where in the world" doesn't really look like an anchor tag for this one. So it could just be using heading tag or p tag instead of a tag.
  • Your color theme toggle works, but just using plain button does not provide any extra information about the on what this button does. On this one, or in such cases that there are color theme toggle, a good structure would be to use fieldset and legend along with the input type="radio" inside it. A structure would look like:

  <fieldset>
    <legend> { use a meaningful text, describe what the radio button does } <legend>
  # inside here are the label and input elements
  </fieldset>
  

  Take a look at my solution on this one, inspect on the structuring of my color theme toggle.

  • Always have a main element on a webpage. This will wrap the main content of the webpage. For this one, you could just replace the section element with the main. Along with an heading tag inside the main to which will be using screen-reader only stylings, describing the main section contains or all about.
  • The icon on the input could have just been used as a background-image of the input element. The input element as well needs to have a label element on it or an aria-label attribute, both describes what the input does.
  • Your interactive elements lacks visual indicator. If you remove the outline prop on an element, you remove the default indicator on it. Try using tab key in your keyboard, you won't see on where you are in your website, because there aren't any visual. If you remove it, make sure to add on the :focus-visible state, on the input and the select.
  • Also, the input for the search a country does not work.
  • The alt value for each of the country card should use the name of the country as the value.
  • Those overview information about the country, on the country card should be using ul element, since it is a "list" of informations.

  VISITING A COUNTRY

  • Again, the alt value for the country should be its name.
  • Those information as well should be using ul element.
  • Also, you forgot to add the border-countries section for each of the country.

  Aside from those, great job again on this one.

  Marked as helpful

  0
• 

  Mushfik F Rahman•25

  @darksbondPosted about 3 years ago

  Awesome

  Marked as helpful

  0