Spin to Pick a Random Number Spin a virtual number wheel to pick a random number from any range with an animated spinning effect.

The Random Number Wheel utilizes React's useState and useRef hooks to manage its state and handle the spinning animation. When the user clicks the spin button, it calls the spin function, which first checks if the minimum value is greater than the maximum or if the wheel is already spinning. If either condition is true, it returns without executing further. The final number is determined at the start of each spin using Math.random(), and then a series of random numbers are generated over 30 ticks to create the spinning effect. This is achieved through the use of setTimeout, which is initially set to 60ms and gradually increases by 3ms with each tick, creating a deceleration effect.

The tool's history feature uses an array stored in state to keep track of previous spins, with a maximum capacity of 20 entries. When a new spin result is generated, it is added to the beginning of the array, and if the array already has 20 entries, the oldest entry is removed. The history is displayed as a series of glass-card elements, each containing a single number from the history array. To ensure that resources are properly cleaned up when the component is unmounted, useEffect is used to clear any pending timeouts.

The spinning animation itself relies on CSS classes and styles to create the visual effect of a spinning wheel. The animate-pulse class is applied to the wheel element when it is spinning, causing it to rapidly change size and appearance. As the spin progresses, the displayNum state variable is updated with each new random number, creating the illusion of the wheel slowing down as it approaches its final result. Once the final result has been determined, it is displayed prominently in the center of the wheel, along with a message indicating that the spin has completed.

In terms of data structures and algorithms, the tool relies on a combination of arrays and state variables to manage its history and current state. The Math.random() function is used to generate random numbers within the user-specified range, while setTimeout is used to create the spinning animation effect. Overall, the Random Number Wheel's implementation combines React's hooks and state management features with CSS styles and JavaScript algorithms to create an engaging and interactive experience for users.