This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Generate a new piece of advice by clicking the dice icon
- Solution URL: GitHub
- Live Site URL: Advice Generator App
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Javascript
- Advice Slip API
The main thing I learned from this challenge was how to generate a new advice from the Advice Slip API using fetch()
, as this is the first time I was able to use it in JS.
- Would like to add a Loading animation after button press
- Have tried to use
clamp
here for thefont-size
property, so I would like to learn more about this and its best practices - Also added a
transition
for the box shadow on button hover, would like to explore animation and CSS transitions more in the future
- Utopia - This helped in generating
clamp
for font sizes - An Interactive Guide to CSS Transitions by Josh Comeau - A good read on CSS transitions, with examples and explanation on implementation and performance
- Helpful docs on the Fetch API:
- Frontend Mentor - @mbdelarosa