Как ChatGPT может помочь джуну: практический гайд

В реальной работе: покушал там, посмотрел ютуб там, полежал на диванчике пошел написал 3 строчки, удалил 500 строк выше.
Подскажите плиз хоть 1 задачу про которые все говорят?

Как ChatGPT может помочь джуну: практический гайд

Код компонента

import React, { useState } from "react";
import "./Roulette.css"; // Подключаем стили

const images = [
  "image1.jpg",
  "image2.jpg",
  "image3.jpg",
  "image4.jpg",
  "image5.jpg",
  "image6.jpg",
  "image7.jpg",
  "image8.jpg",
  "image9.jpg",
  "image10.jpg",
  "image11.jpg",
];

const Roulette = () => {
  const [angle, setAngle] = useState(0);

  const spin = () => {
    const newAngle = angle + Math.floor(Math.random() * 360 + 720); // Случайное вращение на минимум 2 оборота
    setAngle(newAngle);
  };

  return (
    <div className="roulette-container">
      <div
        className="roulette"
        style={{ transform: `rotate(${angle}deg)` }}
      >
        {images.map((image, index) => {
          const angleStep = (360 / images.length) * index; // Угол для каждого элемента
          const x = 150 * Math.cos((angleStep * Math.PI) / 180); // Позиция X
          const y = 150 * Math.sin((angleStep * Math.PI) / 180); // Позиция Y

          return (
            <div
              key={index}
              className="roulette-item"
              style={{
                transform: `translate(${x}px, ${y}px)`,
              }}
            >
              <img src={image} alt={`Item ${index + 1}`} />
            </div>
          );
        })}
      </div>
      <button className="spin-button" onClick={spin}>
        Spin
      </button>
    </div>
  );
};

export default Roulette;

Стили (Roulette.css)

.roulette-container {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden; /* Прячем элементы, которые выходят за пределы экрана */
}

.roulette {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin-top: -150px; /* Центруем круг */
  margin-left: -150px;
  transform-origin: center; /* Устанавливаем центр вращения */
  transition: transform 2s ease-out; /* Анимация вращения */
}

.roulette-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 250px;
  margin-top: -125px; /* Сдвигаем элемент по центру */
  margin-left: -175px; /* Сдвигаем элемент по центру */
}

.roulette-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spin-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.spin-button:hover {
  background-color: #0056b3;
}

Подскажи те решила ли твою задачу "кастомизированная версия ChatGPT" - Universal Primer?