It was a long journey to make it work even though it isn't the hardest challenge here but I retook some lectures from the course of Jonas Schmedtmann. I hope It'll look responsive in your device!
Omar M
@omonteonAll comments
- @milimynameSubmitted over 3 years ago@omonteonPosted over 3 years ago
Hey Mili,
Congrats on finishing the challenge, I just submitted this one a few days ago too. Below I share my findings, I hope these are helpful :)
Highlights:
- It's cool that you made the calculator display editable.
Possible improvements:
- There are accessibility errors in your report, you might want to take a look at those first. You need to use at least one main element and one h1. I would suggest to use the h1 by replacing the h2 you already have.
- The number buttons are divs, I would suggest to use buttons so that you could navigate through them using a keyboard.
- The theme switcher does not work when you click below the number of the theme. In my opinion, it should work by clicking there too.
- The display lets you input letters and other characters that are not numbers.
- There are no hover states on buttons nor theme switch.
- The size of text does not seem correct nor the background color of the buttons, you might want to take a look again to the figma file.
Marked as helpful0 - @richardcyrusSubmitted over 3 years ago
Feedback welcome. Uses React Query and Axios to handle the data, search and filtering. Also uses Cypress (first time using) for some basic tests.
@omonteonPosted over 3 years agoHey Richard !
This is my first time providing feedback in the community, I hope my comments are helpful.
First of all, in my opinion, all the requirements are met both in desktop and in mobile. Congrats on that !
However, I did found some possible issues:
-
There is a 404 when erasing the search text. If you write something in the search input and then you erase all of it, multiple requests are sent with 404 response status code. After a few of these requests fail, a message error "Request failed with status code 404" is displayed. A possible alternative I would suggest is handling this by requesting all countries, same as the request when the app loads.
-
There is a quick flicker when you have selected the dark mode and you refresh the page. I solved this problem by using a script that handled setting the default theme before loading the app bundle. https://dev.to/ayc0/light-dark-mode-avoid-flickering-on-reload-1567
-
If you run an audit using chrome dev tools, some performance issues are shown. I think it might be related with the images. Maybe that was not your focus with this solution, just something I noticed that I thought it might help.
That's it, I hope this is useful for your future learning.
BTW I think it's cool that you started using cypress, it's one of my favorite testing tools.
Marked as helpful2 -