@Asfer-dev
Responsive Countries API with react.js and tailwind css with dark mode
#react#react-router#tailwind-css#axios
Michael Godfrey
@michagodfreyAll comments
- @michagodfrey
Hi Asfer,
Great work on the challenge! It looks good and works well despite the difficulties you mentioned.
It sounds like you were having problems with rendering the data, I had a look at your code and I think you could try ternary operators to render the data. For example.
<p> <b>Capital: </b> {capital ? capital : null} </p>Without that condition, my React app would crash whenever the component was fed an object without a capital field.
Hope that helps :)
Marked as helpful - @AndersonKeller@michagodfrey
Oh and well done keeping the accessibility issues to just one. I see that one is about no <h1> element. But there is no clear place to put a <h1>, is there. A cool trick to get rid of that is:
h1 { font-size: 0px; }
This style will make it invisible to users, but screen readers will still see it and you won't get the pesky issue on your frontend mentor challenges.
Hope that's helpful. Good luck on your future challenges!
Marked as helpful - @AndersonKeller@michagodfrey
Hi Anderson,
A solid effort here. Well done. Imo, yours actually looks better than than the design due to the shadows and slightly larger text makes it more readable.
Feedback: The desktop design is good, but it's not mobile responsive. I don't think your css is verbose, but I can see why this challenge would be tricky to do with flexbox. A simpler way might be to use flexbox for the mobile display and grid and grid-template-columns at desktop size with media-queries.
Below is a link to my solution, it's definitely not the best example of this challenge, but it shows what I mean:
https://www.frontendmentor.io/solutions/testimonials-grid-T_Nxd_c5z
Marked as helpful - @britez13@michagodfrey
It's looking good Florencio!
As for feedback, on my firefox browser, the button does not generate a new advice. But when I checked on Opera, it is working fine.
This could be an issue on my end though, I'm using linux ubuntu. There's a lot I don't know, and it seems strange that fetch would not work with firefox, - the problem my end. Maybe give it a go on firefox on your device?
- @azhar1038@michagodfrey
Hi Md Azharuddin, this is looking great. The bouncy feature and dark mode are working perfectly I think. A great way to enhance this project.
As for using pseudo elements for the background, the feedback I got for this challenge was that is the best way to go. The background is the hardest part of this challenge (without doing extras) and not really newbie territory imo.
As for the dark mode on image, I don't know how darkmode could be applied to an image, you'd need a separate image I think, or directly edit the fill property of the svg.
Marked as helpful - @bmyab@michagodfrey
Hi Cesar, this calculator is looking very close to the design nice work!
One tip that I hope is helpful, I managed to eliminate the arrow buttons on the inputs with this code:
/* remove default input styles Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* remove default input styles Firefox */ input[type=number] { -moz-appearance: textfield; }
On my firefox those buttons appear by default, and when I checked on opera, they appear when the input is active.
- @sinjin25@michagodfrey
Hi ralonus, Solid effort here! Answering your question, the way I did it was with padding inside the card and margins of the cards' child elements. It's a bit of trial and error, but I think it results in something that is easier to style and still ends up being close enough to the design.
My solution is linked below, I hope it's helpful
https://www.frontendmentor.io/solutions/3column-preview-card-component-dq4M7vC5j
P.S. A nice little trick to deal with the h1 accessibility error is this h1 { font-size: 0px } I just learned it and it clears up that error without displaying on your live site.
Marked as helpful - @Ph3mmy69@michagodfrey
Well done completing your first challenge on Frontend Mentor!
As for feedback, there are some handy html and accessibility issues raised. These are useful since they pick up things that would be hard for a human to notice and can help us form good habbits.
There is a style-guide.md included in the zip file you downloaded. It gives you the exact fonts, font sizes and colors to use so we don't need to guess them. The style guide in this project has link to Google fonts, Outfit style, and Google fonts has instructions on how to use them in our projects.
Looking forward to your next solution!
- @alibouhrouche@michagodfrey
It looks very close the design, and with no issues - great work! Your code is clean and makes this one look easier than it is. I learned a lot from it, thanks.
Marked as helpful - @eTyradelli@michagodfrey
Hi Eleana,
On desktop view your page looks great and basically identical to the design. Great work! But when I shrink the screen to mobile size sometimes the content doesn't shrink with it, but when I refresh, it looks fine.
As for the accessibility issues, I don't think they are a deal breaker but just point out best practices. The links in the report explain them.
Marked as helpful - @eTyradelli@michagodfrey
It looks really good, very close to the design indeed.
