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
  • Extra challenges
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

Extra challenges

As an extra challenge I will do the following things:

• Add smooth animations for better interactivity.
• Make the game accessible according to WCAG 2.1 standards, things like color contrast, clear element focus and the correct screen reader contexts.

Screenshot

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• WCAG 2.1 best practices
• CSS Animations
• Vanilla JavaScript
• Fetch API
• Animations.css library
• Astro - Astro Static Site Generator
• Accessible Astro Starter - My own starter template for Astro

What I learned

• I wanted to try out a CSS Animations library for a change, instead of writing it myself. I used Animations.css for this project. I really like the library, it's easy to use and has a lot of animations to choose from. I used the bounceIn animation for the dice icon and the fadeIn animation for the advice text.

• I had a problem in Firefox that I couldn't get the latest quote, which seemed to have something to do with caching. I solved this by adding a no-store option to the fetch request.

fetch('https://api.adviceslip.com/advice', { cache: 'no-store' })

Continued development

Nothing at the moment.

Useful resources

• Animations.css - This is a great library for CSS animations. It has a lot of animations to choose from and is easy to use.
• Stack Overflow - This is a great resource for finding solutions to problems. I used it to find a solution for the Firefox caching problem.

Author

• Personal Website
• Frontend Mentor Profile
• LinkedIn Profile
• Twitter Profile
• GitHub Repositories
• NPM Packages
• CodePen Creations