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

Desktop

Mobile

Links

• Solution URL: github
• Live Site URL: netlify

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library
• Styled Components - For styles

Some of the things that I learned include

• Preventing useEffect from infinte loop by using []

useEffect(() => {
  //funcion here
}, []);

• How to get the width of a DOM element

const footerRect = document.getElementById('id').getBoundingClientRect();
console.log(footerRect.width);

• No cahce storing when fetching from an API (extra useful when working with firefox)

fetch('api_url', {
  cache: 'no-store',
});

Continued development

Dive more into react hooks and working with APIs and localStorage usage among other things

Useful resources

• getBoundingClientRect - When in doubt MDN is your friend

Author

• Frontend Mentor - @serfoll
• Twitter - @sergio_fol