Advice-Generator-App

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

Links

• Solution URL: Solution
• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Data from API

What I learned

function fetchNewAdvice() {
  fetch("https://api.adviceslip.com/advice")
    .then((response) => response.json())
    .then((data) => {
      const advice = data.slip.advice;
      contentElement.textContent = "\"" + advice + "\"";
      const id = data.slip.id;
      slipid.textContent = "advice #" + id
    })
    .catch((error) => {
      console.log("Error fetching data:", error);
    });
}

Continued development

This is my first project using API data and it is only a newbie level challenge. I hope to take on harder and more complex projects using APIs before I begin my react tutorial for solid background

Author

• Frontend Mentor - @lamba01
• Twitter - @lambacodes

Acknowledgments

I thank myself for not giving up despite the difficulties learning from Nigeria.