crowdedastronaut / advice-generator-app

Advice generator app is a deployed, mobile first, website that allows the user to click on a button and receive advice from an API.

Frontend Mentor - NFT preview card component solution

• Solution URL: Git Repo
• Live Site URL: Live Site

This is a solution to the Advice Generator App challenge on Frontend Mentor.

Table of contents

• About this project
• Screenshots
• Technologies
• Learning Experience
• Author
• Acknowledgments

About

Advice generator app is a deployed, mobile first, website that allows the user to click on a button and receive advice from an API. This project was an exercise in:

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Sass - Syntactically Awesome Style Sheets
• Retrieving data from an API using fetch
• Styling data from an API

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshots

Mobile Preview

Desktop Preview

Technologies

Front End Languages
Design
Utilities
Deployment

---

What I learned

This exercise tested pixel perfect design and adjusting font-size, line-height, and line-spacing for the mobile vs. desktop views. It also tested the very basics of rendering data using the JS fetch API. There is a CSS hover state on the desktop view that I'm still figuring out!

I used an anchor tag as opposed to a button for the click listener.

<a
  role="button"
  tabindex="0"
  class="green-button"
  onclick="getAdvice()"
  aria-label="click here to generate some advice"
  target="_blank"
  rel="noopener"
></a>

I used scss color variables to make things easy to read and easy to change.

.proud-of-this-scss {
  $dark-blue: #202733;
  $dark-grayish-blue: #313a48;
  $grayish-blue: #4f5d74;
  $light-cyan: #cee3e9;
  $neon-green: #53ffaa;
}

I used the JS fetch API to GET the data from the advice API and return the data as JSON.

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

Author

• Website - John Ross Phillips
• Frontend Mentor - @CrowdedAstronaut

Acknowledgments