codelawani/advice-generator-app-main

advice-generator-app-main

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

• Frontend Mentor - Advice generator app solution
  • 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: github
• Live Site URL: Live site

My process

I decided to start with js this time, as I wanted to be sure I could work with apis first. Then I proceeded to write the html and css.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow

What I learned

I learned how to work with apis in javascript. Ah Im so happy to finally start applying js to my site 😁

// const proudOfThisFunc = () => {
  fetch('https://api.adviceslip.com/advice')
  .then(response => response.json())
  .then(data => printslip(data.slip.id, data.slip.advice))
  .catch(error => console.error(error));
// }

Continued development

Not sure yet, but I think I will be working on my css skills.

Useful resources

Unfortunately I didn't use any resources this time, but I will be sure to add some in the future.

Author

• Website - Nico
• Frontend Mentor - @yourusername
• Twitter - @angelofdeity

Acknowledgments

I would like to thank my mentor, my friends and my family for their support and encouragement.🙂 Yes I couldn't do anything without them.😁