🔄 Step-by-Step Array Shift (Animated)
A mini practice project that visualizes left and right array shifts step by step using smooth animations. Built with HTML, CSS, and JavaScript (no frameworks).
✨ Features
🎨 Clean UI with animated array boxes.
⬅️➡️ Shift array elements left or right one step at a time.
🔢 Adjustable k (number of shifts).
🔄 Reset button to restore the original array.
🟦 Highlighted swap animations for clarity.
🎬 Button click animations for interactivity.
📸 Preview
🚀 How to Use
Open the project in a browser.
Enter the shift value k.
Click Right Shift or Left Shift to see step-by-step swaps.
Use Reset to restore the original array.
🛠️ Tech Stack
HTML5 – structure
CSS3 – styling & transitions
JavaScript (ES6) – logic & animations
📚 Learning Goals
Practice array manipulation in JavaScript.
Understand step-by-step visualization of shifting.
Improve DOM manipulation & animation skills.