Skip to content

Commit bcc2113

Browse files
sumedhmhatre01sumedhmhatre01
committed
Initial release of AlgoVision
0 parents  commit bcc2113

29 files changed

Lines changed: 4447 additions & 0 deletions

‎README.md‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
# 🚀 AlgoVision
2+
3+
An interactive web application for visualizing **Sorting Algorithms** and **Pathfinding Algorithms** in real time. This project helps users understand how algorithms work through step-by-step animations, dynamic controls, and responsive visualizations.
4+
5+
---
6+
7+
## ✨ Features
8+
9+
### 📊 Sorting Visualizer
10+
11+
Visualize and compare popular sorting algorithms:
12+
13+
- Bubble Sort
14+
- Selection Sort
15+
- Insertion Sort
16+
- Merge Sort
17+
- Quick Sort
18+
19+
### Features
20+
21+
- Adjustable array size
22+
- Adjustable animation speed
23+
- Generate random arrays
24+
- Start, Pause, Resume, and Reset controls
25+
- Real-time algorithm animation
26+
- Dynamic algorithm information panel
27+
- Time and space complexity display
28+
29+
---
30+
31+
### 🗺️ Pathfinding Visualizer
32+
33+
Visualize graph traversal and shortest path algorithms:
34+
35+
- Breadth First Search (BFS)
36+
- Depth First Search (DFS)
37+
- Dijkstra's Algorithm
38+
- A* Search Algorithm
39+
40+
### Features
41+
42+
- Interactive grid
43+
- Draw and remove walls
44+
- Random maze generation
45+
- Clear path
46+
- Clear grid
47+
- Real-time pathfinding animation
48+
- Dynamic algorithm information panel
49+
50+
---
51+
52+
### 🎨 User Interface
53+
54+
- Modern responsive design
55+
- Dark mode support
56+
- Mobile-friendly layout
57+
- Smooth animations
58+
- Interactive controls
59+
- Professional dashboard-style UI
60+
61+
---
62+
63+
## 🛠️ Technologies Used
64+
65+
- HTML5
66+
- CSS3
67+
- JavaScript (ES6 Modules)
68+
69+
No external frameworks or libraries were used.
70+
71+
---
72+
73+
## 📁 Project Structure
74+
75+
```text
76+
Algorithm-Visualizer/
77+
│
78+
├── index.html
79+
│
80+
├── css/
81+
│ ├── main.css
82+
│ ├── sorting.css
83+
│ ├── pathfinding.css
84+
│ └── darkmode.css
85+
│
86+
├── js/
87+
│ ├── app.js
88+
│ ├── state.js
89+
│ │
90+
│ ├── sorting/
91+
│ ├── pathfinding/
92+
│ ├── utils/
93+
│
94+
└── README.md
95+
```
96+
97+
---
98+
99+
## 📈 Algorithm Complexities
100+
101+
### Sorting Algorithms
102+
103+
| Algorithm | Time Complexity | Space Complexity | Stable |
104+
|------------|----------------|------------------|---------|
105+
| Bubble Sort | O(n²) | O(1) | Yes |
106+
| Selection Sort | O(n²) | O(1) | No |
107+
| Insertion Sort | O(n²) | O(1) | Yes |
108+
| Merge Sort | O(n log n) | O(n) | Yes |
109+
| Quick Sort | O(n log n) Average | O(log n) | No |
110+
111+
### Pathfinding Algorithms
112+
113+
| Algorithm | Complexity |
114+
|------------|------------|
115+
| BFS | O(V + E) |
116+
| DFS | O(V + E) |
117+
| Dijkstra | O((V + E) log V) |
118+
| A* | O((V + E) log V) |
119+
120+
---
121+
122+
## 🎯 Learning Objectives
123+
124+
This project was built to:
125+
126+
- Understand algorithm visualization
127+
- Learn DOM manipulation
128+
- Practice JavaScript animations
129+
- Implement graph traversal algorithms
130+
- Improve frontend architecture skills
131+
- Build responsive user interfaces
132+
133+
---
134+
135+
## 📸 Screenshots
136+
137+
Add screenshots after deployment:
138+
139+
- Sorting Visualizer
140+
- Pathfinding Visualizer
141+
- Dark Mode
142+
143+
---
144+
145+
## 👨‍💻 Author
146+
147+
**Sumedh Mhatre**
148+
149+
Built as a frontend algorithm visualization project using modern JavaScript and responsive web design principles.
150+
151+
---
152+
153+
## ⭐ Support
154+
155+
If you found this project useful, consider giving it a ⭐ on GitHub.

‎css/darkmode.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/* ==========================================
2+
DARK MODE
3+
========================================== */
4+
5+
body.dark {
6+
7+
--bg: #0f172a;
8+
9+
--surface: #1e293b;
10+
11+
--text: #f8fafc;
12+
13+
--text-secondary: #94a3b8;
14+
15+
--border: #334155;
16+
}
17+
18+
/* ==========================================
19+
Buttons
20+
========================================== */
21+
22+
body.dark .tab-btn,
23+
body.dark .dark-mode-btn {
24+
25+
background: #334155;
26+
27+
color: white;
28+
29+
border-color: #475569;
30+
}
31+
32+
body.dark .button-grid button {
33+
34+
background: #2563eb;
35+
}
36+
37+
body.dark .button-grid button:hover {
38+
39+
background: #1d4ed8;
40+
}
41+
42+
/* ==========================================
43+
Grid
44+
========================================== */
45+
46+
body.dark .grid-cell {
47+
48+
border-color: #475569;
49+
}
50+
51+
/* ==========================================
52+
Inputs
53+
========================================== */
54+
55+
body.dark select,
56+
body.dark input {
57+
58+
background: #334155;
59+
60+
color: white;
61+
62+
border: 1px solid #475569;
63+
}
64+
65+
/* ==========================================
66+
Scrollbars
67+
========================================== */
68+
69+
body.dark::-webkit-scrollbar {
70+
71+
width: 10px;
72+
}
73+
74+
body.dark::-webkit-scrollbar-thumb {
75+
76+
background: #475569;
77+
78+
border-radius: 10px;
79+
}

0 commit comments

Comments
 (0)