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

  • Screenshot
  • Links

• My process

  • Built with
  • What I learned
  • Continued development
  • Useful resources

Overview

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• JavaScript

What I learned

I learned how to fetch data from a JSON API, also I learned about the <picture> and <q> tags for HTML5

To see how you can add code snippets, see below:

<picture>
  <source media="(max-width: 768px)" srcset="" />
  <img src="images/pattern-divider-desktop.svg" alt="dividerSVG"
/></picture>

<q id="advice"></q>

const fetchAdvice = async () => {
  const res = await fetch("https://api.adviceslip.com/advice");
  const data = await res.json();

  document.getElementById("advice-id").innerHTML = `Advice # ${data.slip.id}`;
  document.getElementById("advice").innerHTML = `${data.slip.advice}`;
};

fetchAdvice();

Continued development

I would like to continue developing this app using new methods.

Useful resources

• Resource 1 - This helped me with the quotes section. I really liked this pattern and will use it going forward.
• Resource 2 - This helped learn the <picture> tag and the JavaScript involved in this app.