Advice generator application - Solution

This is a solution to the Advice generator app challenge on NewTech Github.

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

The challenge

My challange was to create an app that generates a random advice for the user.

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 cliking on the dice icon.

Screenshot

My process

Built with

• Semantic HTML5 markup;
• CSS custom properties;
• Flexbox;
• Mobile-first workflow;
• JavaScript.

What I learned

Working on this project I learned about using the Fetch API for JavaScript.

fetch("https://api.adviceslip.com/advice")
    .then((response) => response.json())
    .then((data) => {
        adviceID.textContent = "Advice #" + data.slip.id;
        adviceQuote.textContent = data.slip.advice;
    });

Useful resources

• Fetch API - This helped me understand what is Fetch API.
• Using the Fetch API - This is an amazing article which helped me finally understand using the Fetch API.