Interactive array visualization playground for learning algorithms and data structures.

AI Generated Disclosure: This project was created with assistance from Claude AI. The code, documentation, and features were developed through collaborative prompting and iterative improvements.

A simple, interactive JavaScript application for visualizing and manipulating integer arrays. Perfect for learning array operations, algorithm visualization, or just playing around with data structures.

• Visual Array Display: See your array elements as interactive boxes
• Click to Edit: Click any element to change its value
• Drag & Drop Swapping: Drag elements onto each other to swap positions
• Dynamic Resizing: Change the array length on the fly
• Rotate Operations: Shift elements left or right by specified positions
• Real-time Status: Continuously shows if the array is sorted
• Swap Counter: Track the number of swaps performed with reset functionality
• Quick Actions: Randomize values, shuffle positions, reverse order, reset, or clear the entire array

1. Open the Application: Open index.html in any modern web browser
2. Set Array Length: Use the length input and click "Resize" to create your array
3. Edit Values: Click on any blue box to edit the number inside
4. Swap Elements: Click and drag one element onto another to swap their positions
5. Monitor Swaps: Watch the swap counter to see how many swaps you've performed
6. Use Quick Actions:
   • Randomize Values: Fill the array with random numbers (0-100)
   • Shuffle Array: Randomly rearrange the existing elements
   • Reverse Array: Flip the order of all elements
   • Rotate Left/Right: Shift elements by specified positions (circular shift)
   • Reset to 0,1,2...: Set array to sequential numbers starting from 0
   • Clear Array: Remove all elements
   • Reset Counter: Reset the swap counter back to 0
7. Monitor Status: Watch the real-time sorted status indicator below the array

1. Clone or download this repository
2. Open index.html in your web browser
3. Start with the default array or create your own!

• Pure JavaScript: No external dependencies required
• Responsive Design: Works on desktop and mobile devices
• Modern Browser Support: Uses HTML5 drag and drop API
• Visual Feedback: Hover effects, animations, and real-time status updates
• Algorithm Practice: Perfect for learning sorting and array manipulation concepts

Works in all modern browsers including:

• Chrome 4+
• Firefox 3.5+
• Safari 6+
• Edge 12+

array_playground/
├── index.html          # Main application file (HTML, CSS, and JavaScript)
└── README.md          # This file

• Algorithm Visualization: Manually step through sorting algorithms and track efficiency
• Data Structure Learning: Understand how arrays work
• Quick Prototyping: Test array manipulation ideas
• Educational Tool: Demonstrate array concepts to students
• Testing Permutations: Use shuffle to test different arrangements
• Performance Analysis: Compare the efficiency of different sorting approaches
• Rotation Practice: Learn circular array operations and their applications
• Sorting Verification: Real-time feedback on whether your array is sorted

• Randomize Values: Changes the numbers inside the array elements (generates new random values 0-100)
• Shuffle Array: Keeps the same numbers but rearranges their positions (permutes the existing elements)
• Reverse Array: Keeps the same numbers but flips their order (first becomes last, last becomes first)
• Rotate Left/Right: Shifts all elements by specified positions in circular fashion (elements that fall off one end appear at the other)

The swap counter tracks every swap operation performed, including:

• Manual drag-and-drop swaps between elements
• Swaps performed during shuffle operations
• Provides insight into algorithm efficiency and complexity

Use the "Reset Counter" button to start fresh when testing different approaches.

The rotate controls allow you to perform circular shifts on your array:

• Rotate Left: Moves elements toward index 0 (first element wraps to the end)
• Rotate Right: Moves elements toward the end (last element wraps to index 0)
• Steps Input: Specify how many positions to rotate (1-N)

Example: Array [0,1,2,3,4] rotated left by 2 becomes [2,3,4,0,1]

The status bar continuously monitors your array and shows:

• ✅ Green: "Array is sorted in ascending order"
• ❌ Red: "Array is not sorted"
• 🔍 Gray: Status unavailable (empty array)

Perfect for instant feedback while practicing sorting algorithms manually!

Enjoy playing with arrays! 🎉