Frontend Mentor | Federico Nicoletti's profile

All comments

@elic4vetSubmitted over 1 year ago

I have a problem with the buttons, i cannot select just only one although i used useState and other methods. Once clicked every button is selected. Could you please help me ?

Rating app

Federico Nicoletti•0

@FedeNicolettiPosted over 1 year ago

Hi! It looks like the issue is with the isActive state. Currently, you are using a single isActive state for all buttons, which means that when you click on any button, all buttons will be toggled to the same state. To fix this, you need to have a separate state for each button to keep track of its selected status. Maybe you can try something like this:

import React, { useState } from "react";
import icon from "../assets/images/icon-star.svg";
import img from ".././assets/images/illustration-thank-you.svg";
import "../App.css";

const Rating = () => {
  const [selectedNumber, setSelectedNumber] = useState(0);
  const [success, setSuccess] = useState(false);

  const handleClick = (numberSelected) => {
    setSelectedNumber(numberSelected);
  };

  const handleSubmit = () => {
    if (selectedNumber === 0) {
      alert("Please select a rating!");
    } else {
      setSuccess(true);
    }
  };

  const ratingButtons = Array.from({ length: 5 }, (_, index) => index + 1);

  let successComponent = null;
  if (success) {
    successComponent = (
      <div>
        <img src={img} alt="Success" />
        <p className="result">You selected {selectedNumber} out of 5</p>
        <h1>Thank you!</h1>
        <p>
          We appreciate you taking the time to give a rating. If you ever need
          more support, don't hesitate to get in touch!
        </p>
      </div>
    );
  }

  return (
    <div className="container">
      <div className="card">
        <div className="successComponent">{successComponent}</div>
        <div className="rating_app">
          <img src={icon} className="icon" alt="icon" />

          <h1>How did we do?</h1>
          <p>
            Please let us know how we did with your support request. All
            feedback is appreciated to help us improve our offering!
          </p>

          <p className="results"></p>
          <div className="ratings">
            {ratingButtons.map((number) => (
              <div className="circle" key={number}>
                <button
                  className={selectedNumber === number ? "selected" : ""}
                  onClick={() => handleClick(number)}
                  value={number}
                >
                  {number}
                </button>
              </div>
            ))}
          </div>
        </div>
        <button className="submit-btn" onClick={handleSubmit}>
          Submit
        </button>
      </div>

      <div className="attribution">
        Challenge by{" "}
        <a
          href="https://www.frontendmentor.io?ref=challenge"
          target="_blank"
          rel="noreferrer"
        >
          Frontend Mentor
        </a>{" "}
        Coded by{" "}
        <a href="https://www.linkedin.com/in/eerkekoglou/">Elisabeth Erkekoglou</a>
      </div>
    </div>
  );
};

export default Rating;

BINTANG RIZQI PASHA•10

@BintangRPSubmitted over 1 year ago

i was difficult on writing css best practice and dont know the order of syntax like

.container {
 object-fit: cover;
 display: flex;
 flex-direction: row;
 margin: 5px
 width: 500px
 height: 1000px
}

I still don't understand the preparation of the best practice.

it's my first try on frontendmentor.

QR Code Components with HTML/CSS

Federico Nicoletti•0

@FedeNicolettiPosted over 1 year ago

Hi! I encourage you to read about CSS BEM. It can be helpful and provide you with a strong understanding and confidence about your CSS code. Feel free to adjust the order according to your preference, but ensure that you are consistent throughout the project. Maybe something like this: Display and Positioning (e.g., display, position, top, bottom, left, right) Box Model (e.g., width, height, margin, padding, border) Typography (e.g., font-family, font-size, color, text-align, line-height) Background and Borders (e.g., background-color, background-image, border-radius, border-color) Visual (e.g., opacity, z-index, box-shadow) Transition and Animation (e.g., transition, animation) Flexbox or Grid (if used)