mbdelarosa / advice-generator-app

Solution for the Advice Generator App challenge on Frontend Mentor

Frontend Mentor - Advice generator app solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

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

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Advice Generator App

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Javascript
• Advice Slip API

What I learned

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.

Continued development

• Would like to add a Loading animation after button press
• Have tried to use clamp here for the font-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

Useful resources

• 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:
  • Using the Fetch API - MDN Web Docs
  • JavaScript fetch() Method - GeeksforGeeks

Author

• Frontend Mentor - @mbdelarosa