advice generator using grid and axios.

Solution retrospective
I used css grid for structuring the html. For fetching data from the api endpoint axios has been used. There are 224 advice slips in advice slip api. For every click from the user a function is called. In the function call a random number is generated using Math.random() function of javascript which ranges between 1 to 224. for every random generated number serves as an Id and using the Id corresponding advice is fetched. I hope learn further from others solutions. 🙂
Please log in to post a comment
Log in with GitHubCommunity feedback
- @sandro21-glitch
Hi akhilchary
Here are a few suggestions for improvement on your code:
Use semantic HTML elements where appropriate, such as <header>, <nav>, <main>, <article>, <aside>, and <footer>.
Provide alternative text for the
<img>
elements using thealt
attribute, to make the content accessible for people using screen readers.Use CSS variables to store values that are used repeatedly throughout your styles, such as colors or font-sizes. This will make it easier to make global changes to your styles.
Try to avoid using inline styles and instead use CSS classes for styling.
Use descriptive and meaningful class names, such as .advice-card instead of .main to make your code more readable and understandable.
Use CSS Flexbox or Grid for layout instead of position absolute where possible, as they are more versatile and easier to use for most layout tasks.
Happy Coding
Marked as helpful
Join 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