algorithm-visualizer/index.html at main · sjonesdev/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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="/assets/fontawesome5.15.3/css/all.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;400;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <link href="css/styles.css" rel="stylesheet">

    <title>Algorithm Visualizer</title>
</head>
<body>

    <div id="controls">
        <header>
            <div class="title">
                <h1>Algorithm Visualizer</h1>
            </div>
            <div id="algo-type-picker" class="dropdown">
                <label for="algo-type">Algorithm Type: </label>
                <select name="algo-type" id="algo-type">
                    <option value="pathfinding">Pathfinding</option>
                    <option value="sorting">Sorting</option>
                </select>
            </div>
            <div id="path-algo-picker" class="algo-picker dropdown"><label for=""></label>
                <label for="path-algo">Algorithm: </label>
                <select name="path-algo" id="path-algo">
                    <option value="dijkstra">Dijkstra's Algorithm</option>
                    <option value="astar">A* Algorithm</option>
                    <option value="breadth-first">Breadth-First Search</option>
                    <option value="depth-first">Depth-First Search</option>
                </select>
            </div>
            <div id="sort-algo-picker" class="algo-picker dropdown hidden"><label for=""></label>
                <label for="sort-algo">Algorithm: </label>
                <select name="sort-algo" id="sort-algo">
                    <option value="selection">Selection Sort</option>
                    <option value="bubble">Bubble Sort</option>
                    <option value="insertion">Insertion Sort</option>
                    <option value="merge">Merge Sort</option>
                    <!-- <option value="quick">Quick Sort</option>
                    <option value="heap">Heap Sort</option>
                    <option value="counting">Counting Sort</option>
                    <option value="radix">Radix Sort</option>
                    <option value="bucket">Bucket Sort</option>
                    <option value="shell">Shell Sort</option>
                    <option value="tim">Tim Sort</option>
                    <option value="comb">Comb Sort</option>
                    <option value="pigeonhole">Pigeonhole Sort</option>
                    <option value="cycle">Cycle Sort</option>
                    <option value="cocktail">Cocktail Sort</option>
                    <option value="strand">Strand Sort</option>
                    <option value="bitonic">Bitonic Sort</option>
                    <option value="pancake">Pancake Sort</option>
                    <option value="binaryInsert">Binary Insertion Sort</option>
                    <option value="bogo">Bogo Sort</option>
                    <option value="gnome">Gnome Sort</option>
                    <option value="sleep">Sleep Sort</option>
                    <option value="struct">Structure Sorting</option>
                    <option value="stooge">Stooge Sort</option>
                    <option value="tag">Tag Sort</option>
                    <option value="tree">Tree Sort</option>
                    <option value="cartTree">Cartesian Tree Sorting</option>
                    <option value="oddEven">Odd-Even Sort</option> -->
                </select>
            </div>
            <button type="button" class="btn btn-primary" id="run-btn">Run</button>
            <button type="button" class="btn btn-primary" id="reset-btn">Reset</button>
        </header>
    </div>

    <div id="info">
        <h3>Info: </h3>
        <div class="node-info explore-info">
            <h3 id="explore-count">Squares Explored: N/A</h3>
        </div>
        <div class="node-info explore-info">
            <div class="square visited"></div>
            <h3>Visited</h3>
        </div>
        <div class="node-info explore-info">
            <div class="square path"></div>
            <h3>Path</h3>
        </div>
        <div class="node-info hidden" id="swap-count-container">
            <h3 id="swap-count">Swaps Performed: N/A</h3>
        </div>
    </div>

    <div id="board-container">
        <div id="grid-place-opts">
            <h3>Placement Options: </h3>
            <div class="node-info place-opt selected">
                <div class="square start"></div>
                <h3>Start</h3>
            </div>
            <div class="node-info place-opt">
                <div class="square target"></div>
                <h3>Target</h3>
            </div>
            <div class="node-info place-opt">
                <div class="square wall"></div>
                <h3>Wall</h3>
            </div>
            <div class="node-info place-opt">
                <div class="square square--weighted"></div>
                <h3>Weighted</h3>
            </div>
            <select name="place-opt-select" id="place-opt-select" class="hidden">
                <option value="Start"></option>
                <option value="Target"></option>
                <option value="Wall"></option>
                <option value="Weighted"></option>
            </select>
        </div>
    </div>

    <div id="arrayGraph-container"></div>

    <script src="js/index.js" type="module"></script>
</body>
</html>