/advice-generator-app

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.

Primary LanguageSCSSMIT LicenseMIT

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

Note: Delete this note and update the table of contents based on what sections you keep.

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

Design preview for the EasyBank Landing Page coding challenge

Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • webpack - JS library
  • Advice slip JSON API - React framework

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

To day's challenge was a great was to learn how to work with JSON API to render datas, use fect(), async/await.

<h1>Some HTML code I'm proud of</h1>
// let's get our API url
let API_URL = 'https://api.adviceslip.com/advice';

// Now we fethc it to get a Json object
const get = async (url) => {
  const reponse = await fetch(url);
  return await reponse.json();
}

// Now we assign to an object the data we want
const API = {get}

// import our DOM elements
const quote = document.querySelector('.quote');
const id = document.querySelector('.id');

// Now, our function to get a random quote
const getRandomQuote = async () => {
  //we run the get() method in the API object wich is a JSON file
  API.get(API_URL).then(data => {
    // we assign the data to a variable
    const randomQuote = data.slip.advice;
    // we assign the id to a variable
    const randomId = data.slip.id;
    // we assign the quote to the DOM element
    quote.innerHTML = `"${randomQuote.toString()}"`;
    // we assign the id to the DOM element
    id.innerHTML = `Adivce #${randomId}`;
  })
}

Useful resources

  • Medium article - This helped me to understand the proces of fecthing data from a JSON API

Author

Acknowledgments

-Tej from HackClub - @tej