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.

This advice generator app using the Advice Slip API.

Table of contents

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

Note: Delete this note and update the table of contents based on what sections you keep.

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
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS Flexbox
• CSS BEM
• Mobile-first workflow

What I learned

Accessibility

• The use of aria-busy attribute in toggleLoadingState improves the accessibility of the button for screen readers, indicating to users that the button is currently processing an action.
• Use aria-live on the text elements to announce updates. This will notify screen readers when the advice text changes.

Continued development

• Improve SVG, fallback for non-supporting browsers.
• Enhance the loading indicator by adding animations.
• Add a skeleton screen to improve the user experience.
• Optimize Performance.
  • Preloading Advice, fetch the next piece of advice in the background while the user is reading the current one to reduce waiting time on the next button click.
• Add testing.

Useful resources

• Fetch API, do you really know how to handle errors?
• Fetch API is new old version of AJAX
• Error handling with promises

Author

• Website - Edward Pau
• Frontend Mentor - @edpau