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
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

The challenge is to build out a device generator app using the Advice Slip API.

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

My process

Built with

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

What I learned

I learned that Firefox can cache data obtained from the API. In this current app, this was a bad thing, so I had to set the "no-cache" option on fetch.

const APIResponse = await fetch(
  "https://api.adviceslip.com/advice", 
  {cache: "no-cache"}
);

I also learned to use the <picture> HTML tag to dynamically use images based on screen size. Thanks to Kevin Powell for teaching me how to use it in his shorts.

  <picture>
    <source 
      media="(min-width: 500px)" 
      srcset="./images/pattern-divider-desktop.svg">
    <img 
      src="./images/pattern-divider-mobile.svg" 
      alt="divider" 
      class="divider" />
  </picture>

Author

• Website - Bruno Alvarenga Colturato
• Frontend Mentor - @BrunoColturato