REST Countries API Challenge- HTML,CSS,JS & API,Grid,Flexbox
Design comparison
Solution retrospective
What I found difficult doing this project was displaying the REST countries API data and display it. I would like to know which is the best method to do it.
I was not able to do the clickable card part where it will show more details about the countries. I need help.
I also want to know which is the best way to do dark/light mode feature..
Community feedback
- @visualdennissPosted over 1 year ago
Hey there,
Your solution looks great as well as responsive! And functions well too. So congrats on completing the challenge succesfully.
Here is a one small suggestion related to a detail: Both of your modes, dark and light have the same icon of moon, i think it you have a sun icon for the light mode as moon is usually associated with dark mode. Other than that everything is top-notch!
Hope you find this feedback helpful!
Marked as helpful1 - @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
BUTTONS π΄:
- This solution generates accessibility error reports due to lack discernible text for
<button>
element
- The
<button>
must have discernible text that clearly describes the destination, purpose, function, or action for screen reader users.
- Screen reader users are not able to discern the purpose of elements with role="link", role="button", or role="menuitem" that do not have an accessible name.
- The
<button>
name rule has five markup patterns that pass test criteria:
<button id="al" aria-label="Name"></button> <button id="alb" aria-labelledby="labeldiv"></button> <div id="labeldiv">Button label</div> <button id="combo" aria-label="Aria Name">Name</button> <button id="buttonTitle" title="Title"></button>
-
Ensure that each
<button>
element and elements withrole="button"
have one of the following characteristics:- Inner text that is discernible to screen reader users.
- Non-empty
aria-label
attribute. aria-labelledby
pointing to element with text which is discernible to screen reader users.role="presentation"
orrole="none"
(ARIA 1.1) and is not in tab order (tabindex="-1"
).- To further know about this, read this article π
I hope you find it helpful ! π Above all, the solution you submitted is great
Happy coding!
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord