Skip to content

Bubble_Sort_Visualizer.md

Latest commit

 

History

History
21 lines (17 loc) · 1.3 KB

Bubble_Sort_Visualizer.md

File metadata and controls

21 lines (17 loc) · 1.3 KB
Raw

Basic Sorting Visualizer (Bubble Sort)

Create a single index.html file that demonstrates a real-time visualization of the Bubble Sort algorithm. The goal is to create a clean, functional tool that helps a user understand how this specific algorithm works through movement and color.

Core Requirements

  • Algorithm: Implement Bubble Sort. * Visuals:
    • Represent the array as a series of vertical bars (divs) where the height corresponds to the value.
    • Use three colors: one for the default state, one to highlight the two bars currently being compared, and one for bars that have reached their final sorted position.
    • A simple Dark Mode theme (dark background with bright, contrasting bars).
  • Essential Controls:
    • "Start Sort" Button: Begins the animation.
    • "Reset" Button: Generates a new random array and stops any current animation.
    • Speed Slider: A simple input to adjust the delay between steps.
  • Live Stats:
    • Display a simple counter for the number of comparisons made.

Technical Constraints

  • Everything must be contained in a single HTML file (HTML, CSS, and JavaScript).
  • Use standard Vanilla JavaScript (no external libraries or complex frameworks).
  • The code should be easy to read and well-commented.