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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
    • CSS
    • JavaScript
  • Continued development
  • Useful resources
• Author

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

• Solution URL: Advice-App Github Repository
• Live Site URL: Advice-App Live Site

• Semantic HTML5 markup
• CSS custom properties
• Media Query
• Google Fonts
• CSS Variables
• Vanilla JavaScript
• Fetch API

When I began the challenge, I listed every language/tech to use for this project. I thought it would require stuffs like NodeJS, Express and the likes. So, I did a little digging and I figured that FOR SMALL PROJECTS, USE SMALL THINGS and this is the end result with only HTML, CSS & JavaScript.

For the dice button hover state, creating the glow effect was difficult and trickish for me and I was King Kong joyful when I did it. I am proud of this piece of code:

:root {
  --l_cyan: hsl(193, 38%, 86%);
  --n_green: hsl(150, 100%, 66%);
  --g_blue: hsl(217, 19%, 38%);
  --dg_blue: hsl(217, 19%, 24%);
  --d_blue: hsl(218, 23%, 16%);
}

.dice-bg:hover {
  box-shadow: 0px 0px 40px 0px var(--n_green);
  cursor: pointer;
}

This is my first time using the Fetch API for a GET request. I learnt APIs with NodeJS so this was tough. Cheers to Fetch API, Async and Await and Promises. I'm proud of you!

// store async function in a variable
const getAdvice = async () => {
    // get request through fetch
    const response = await fetch('https://api.adviceslip.com/advice');
    // parse json
    const adviceJSON = await response.json();
    // console.log(adviceJSON);
    document.querySelector('.id').innerHTML = adviceJSON.slip.id;
    document.querySelector('.quote').innerHTML = '"'+ adviceJSON.slip.advice +'"';
}

In future projects, I'd love to know how to use jQuery to make get/post requests. See all my projects on Github.

Yeah, I'd also have to sharpen my knowledge of promises, asynchronous functions & callbacks, async & await and many more.

• Flavio Copes JavaScript E-Book - This is Flavio Copes' website. You can find e-books on various subjects which includes JavaScript. His book helped me understand arrow functions together with the Fetch API. I really liked this pattern and will use it going forward.

• Rapid API Guides - This is an amazing article which helped me finally understand Fetch API with Async-Await. I'd recommend it to anyone still learning this concept.

• Dmitri Pavlutin - This article explains everything Fetch API from A-(Z)X. Not Z, because I have to improve.

• Website - Efosa Collins EVBOWE
• Frontend Mentor - @efecollins
• Twitter - @EfeCollins7
• Github - @efecollins