/Advice-Generator

Advice Generator developed by REACT using "Advice Slip API"

Primary LanguageJavaScript

Advice Generator

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.

Demo

Demo: https://advicegenerator-react.netlify.app/

Table of contents

Overview

"Advice Generator" is a React based API project that takes data from the "Advice Slip API" and generate random advices on the screen everytime a user taps the dice icon.

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

screenshot screenshot screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • React
  • Mobile-first workflow
  • React - JS library
  • Styled Components - For styles

What I learned

Development of this project indeed helped me in API fetching. I always struggle with this portion and I beleive this project did improve it.

A new thing that I tried:

.dice-container:hover{
  box-shadow:
  0 0 20px 10px #52ffa8,
  0 0 50px 30px #8ceebd
}

If you want more help with box-shadows, I'd recommend checking out Box-Shadow to learn more.

Useful resources

  • Box-Shadow Resource - This helped me for Box-Shadow. I really liked this pattern and will use it going forward.

Author