Skip to content

Commit c8a0196

Browse files
bytecode001bytecode001
authored
Add files via upload
1 parent c3b367c commit c8a0196

File tree

3 files changed

+1103
-0
lines changed

3 files changed

+1103
-0
lines changed

‎041-sorting-algorithm-visualizer/index.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Sorting Algorithm Visualizer</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<header>
13+
<h1 class="title">
14+
<span class="title-gradient">Sorting</span> Visualizer
15+
</h1>
16+
<p class="subtitle">Explore how sorting algorithms work</p>
17+
</header>
118

19+
<div class="controls">
20+
<div class="control-group">
21+
<label for="algorithm-select">Algorithm</label>
22+
<select id="algorithm-select" class="select-input">
23+
<option value="bubble">Bubble Sort</option>
24+
<option value="selection">Selection Sort</option>
25+
<option value="insertion">Insertion Sort</option>
26+
<option value="quick">Quick Sort</option>
27+
<option value="merge">Merge Sort</option>
28+
<option value="heap">Heap Sort</option>
29+
</select>
30+
</div>
31+
32+
<div class="control-group">
33+
<label for="array-size">Elements: <span id="size-value">50</span></label>
34+
<input type="range" id="array-size" min="10" max="100" value="50" class="slider">
35+
</div>
36+
37+
<div class="control-group">
38+
<label for="speed-control">Speed: <span id="speed-value">50</span>ms</label>
39+
<input type="range" id="speed-control" min="1" max="200" value="50" class="slider">
40+
</div>
41+
42+
<div class="button-group">
43+
<button id="generate-btn" class="btn btn-secondary">
44+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
45+
<path d="M1 4v6h6M23 20v-6h-6"/>
46+
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
47+
</svg>
48+
Generate Array
49+
</button>
50+
<button id="sort-btn" class="btn btn-primary">
51+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
52+
<polygon points="5 3 19 12 5 21 5 3"></polygon>
53+
</svg>
54+
Sort
55+
</button>
56+
<button id="pause-btn" class="btn btn-secondary" disabled>
57+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
58+
<rect x="6" y="4" width="4" height="16"></rect>
59+
<rect x="14" y="4" width="4" height="16"></rect>
60+
</svg>
61+
Pause
62+
</button>
63+
</div>
64+
</div>
65+
66+
<div class="stats-container">
67+
<div class="stat-card">
68+
<div class="stat-label">Comparisons</div>
69+
<div class="stat-value" id="comparisons">0</div>
70+
</div>
71+
<div class="stat-card">
72+
<div class="stat-label">Swaps</div>
73+
<div class="stat-value" id="swaps">0</div>
74+
</div>
75+
<div class="stat-card">
76+
<div class="stat-label">Time</div>
77+
<div class="stat-value" id="time">0.0s</div>
78+
</div>
79+
<div class="stat-card">
80+
<div class="stat-label">Complexity</div>
81+
<div class="stat-value" id="complexity">O(n²)</div>
82+
</div>
83+
</div>
84+
85+
<div class="visualization-container">
86+
<div id="bars-container" class="bars-container"></div>
87+
</div>
88+
89+
<div class="info-panel">
90+
<h3 class="info-title">How does <span id="algorithm-name">Bubble Sort</span> work?</h3>
91+
<p id="algorithm-description" class="info-description">
92+
Bubble Sort compares adjacent elements and swaps them if they are in the wrong order.
93+
This process is repeated until the array is sorted.
94+
</p>
95+
</div>
96+
</div>
97+
98+
<script src="script.js"></script>
99+
</body>
100+
</html>

0 commit comments

Comments
 (0)