GomezJuanEfe/interactive-rating-component

Interactive rating component with React JS. This exercise is part of the Make It Real bootcamp.

interactive-rating-component

Interactive rating component with React JS. This exercise is part of the Make It Real bootcamp.

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge is to build a rating component and try to make it as similar as possible with the design.

The challenge

Use the next image as reference and build a rating component.

Screenshot

That was the result.

My process

Built with

• React JS
• SASS
• Flexbox
• Mobile-first workflow
• Pixel perfect tool = Pixel parallel

What I learned

I learned how to manage the state in React JS.

  const rageRate = [1, 2, 3, 4, 5];

  const [rate, setRate] = useState(0);
  const [hover, setHover] = useState(0)
  const [show, setShow] = useState(false);

  const handleClick = (event) => {
    const rateUpdated = event.target.getAttribute('data-rate-id');
    setRate(rateUpdated);
  }

  const handleMouseOver = (event) => {
    const numberUpdated = event.target.getAttribute('data-rate-id');
    setHover(numberUpdated);
  }

  const handleMouseOut = () => {
    console.log('Mouse over');
    setHover(0);
  }

  const handleClickModal = () => {
    setShow(false);
    setRate(0);
  }

Useful resources

• How to create a Modal Component in React from basic to advanced? - This guide helped me to create a modal card. It was pretty clair and descriptive.

Author

• Website - Juan Felipe