First-Front-End-Project
"DSA Visualizer"
An interactive Data Structures & Algorithms Visualizer built using HTML, CSS, Bootstrap, and JavaScript. This project helps users understand how sorting algorithms and fundamental data structures work through real-time animations and visual feedback.
Features:
Sorting Algorithms:
1.Bubble Sort
2.Selection Sort
3.Insertion Sort
4.Merge Sort
Data Structures:
Linked List:
Append / Prepend nodes
Delete head & tail
Visual node connections
Stack (LIFO:
Push / Pop / Peek
Top element indication
Queue (FIFO):
Enqueue / Dequeue / Peek
Front & Rear visualization
UI Highlights
Modern dark-themed interface
Responsive design using Bootstrap
Smooth animations and transitions
Color-coded operations (compare, swap, sorted, etc.)
Tech Stack:
HTML5
CSS3
Bootstrap 5
JavaScript (ES6)
Purpose:
This project is designed for students and beginners to:
Visualize algorithm behavior step-by-step
Understand core data structures easily
Learn DSA concepts interactively
How to Run:
Download or clone the repository
Open index.html in your browser
Future Improvements:
Add more algorithms (Quick Sort, Heap Sort)
Performance comparison graphs
Dark/Light theme toggle
Step-by-step manual control
Contribution:
Feel free to fork, improve, and contribute!