Design comparison
Solution retrospective
-This is my first project using API calls, I would like some feedback on my JavaScript so that I know if my code is efficient or not. -I am still struggling a bit on my media queries for mobile. I know to take a mobile approach first and any advice is welcomed.
Community feedback
- @elyyysePosted about 1 year ago
Hi, Jonfernando - Your project looks great! And your API call is clear and easy to read.
You mentioned media queries — if you're taking a mobile first approach (meaning all of your CSS above the media query is your mobile design), then I think you want to switch your media query to read: min-width: 600px. So all of your styling applies to a smaller screen, and then as soon as the viewport hits 600px or wider, the styles wrapped in the media query will apply.
One other thing you might consider — right now, the only way to get a new bit of advice is to hard refresh the whole page. If you add a click event listener to the big green button, you can re-call the API when a user clicks it.
// wrap your fetch() call in a function function generateAdvice () { // API call goes here } // call it once on page load generateAdvice(); // call it again whenever the button is clicked bigGreenBtn.addEventListener('click', generateAdvice);
I hope this all makes sense. Feel free to reply back if anything is unclear.
1
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