loganwoolf/fm-advice

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

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Click the button and receive a random piece of advice from a public API.

Screenshots

• Desktop view:

• Mobile view:

Links

• Live Site URL: https://loganwoolf.github.io/fm-advice/
• Frontend Mentor Solution URL: https://www.frontendmentor.io/solutions/advice-generator-in-react-S1ZKd7bHq

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library
• create-react-app

What I learned

• Use JS to target effects to input type. CSS :hover pseudo-selector triggers on touch, and never releases and we don't want that!

  const addHoverEffect = (e) => {
    e.target.classList.add("button-hover");
  };
  const removeHoverEffect = (e) => {
    e.target.classList.remove("button-hover");
  };

  return (
    <button
      onMouseEnter={addHoverEffect}
      onMouseLeave={removeHoverEffect}
    >
  )

• Load an SVG as a React component

  import { ReactComponent as Icon } from "../images/icon-dice.svg";

  return (
    <button>
      <Icon>
    </button>
  )

Continued development

• Need to find a way to make the App resize smoothly when loading new advice text.

Author

• Website - Logan Woolf
• Frontend Mentor - @loganwoolf
• Twitter - @logan__woolf