Sorting-Algorithm-Visualizer/index.html at main · Samrat-14/Sorting-Algorithm-Visualizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sorting Algorithm Visualizer</title>
    <link rel="icon" href="./favicon.png">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <button type="button" class="customize effect buttons" id="generate"><h3>Generate</h3></button>
        <div class="customize effect" id="scroll">
            <h3 class="text small">Size</h3>
            <input type="range" min="5" max="100" step="1" value="50" class="slider" id="size">
            <h3 class="text small">Speed</h3>
            <input type="range" min="20" max="300" step="10" value="200" class="slider" id="speed">
        </div>
        <div class="customize effect" id="algo">
            <button type="button" class="sort_algo effect buttons" id="bubble"><h3>Bubble Sort</h3></button>
            <button type="button" class="sort_algo effect buttons" id="quick"><h3>Quick Sort</h3></button>
            <button type="button" class="sort_algo effect buttons" id="merge"><h3>Merge Sort</h3></button>
            <button type="button" class="sort_algo effect buttons" id="insertion"><h3>Insertion Sort</h3></button>
            <button type="button" class="sort_algo effect buttons" id="selection"><h3>Selection Sort</h3></button>
        </div>
    </header>

    <div class="canvas" id="bars">
        <div class="intro">Welcome to Sorting Algorithm Visualizer! Here you can visualize several sorting algorithms and learn how they work. Just generate some bars with random heights and select the sorting algorithm, and watch the visualizer do the sorting for you!</div>
    </div>

    <script src="./js/sorting.js"></script>
    <script src="./js/bubble.js"></script>
    <script src="./js/quick.js"></script>
    <script src="./js/merge.js"></script>
    <script src="./js/insertion.js"></script>
    <script src="./js/selection.js"></script>
</body>
</html>