sorting-algorithms/bubbleSort.html at master · aKaravanov/sorting-algorithms · 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
131
132
133
134
135
<!DOCTYPE html>
<!--
  Andrei Karavanov
  October 16, 2019
  Gilmore AB

  This is the example page of how all pages containing algorithms will look
  like. It has some information about algorithm, but most importainly it also
  has an interactive vizualization.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css" />
    <script src="index.js"></script>
    <script src="sortPage.js"></script>
    <title>Sorting Algorithms - Visual Tool - Bubble Sort</title>
  </head>
  <body>
    <header>
      <h1>Sorting Algorithms</h1>
      <h3 class="algorithmName">Bubble Sort</h3>
      <nav>
        <ul style="list-style-type:none" class="container">
          <li><a href="index.html">Previous Algorithm</a></li>
          <li><a href="index.html">Main Page</a></li>
          <li><a href="index.html">Next Algorithm</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section>
        <h2>Description</h2>

        <p>
          Bubble sort works by swapping neighbour elements if they are in the
          wrong order.
        </p>
      </section>

      <section>
        <h2>Algorithm</h2>

        <section>
          <h4>Steps:</h4>
          <ol>
            <li>
              Starting from the first element, compare it with the next
              element.
            </li>
            <li>
              If current element is greater, swap them. Otherwise, do
              nothing.
            </li>
            <li>Move to the next element.</li>
            <li>Repeat <strong>Steps 2</strong> and <strong>3</strong> untill
              you reach the end.
            </li>
            <li>If no swaps were made per pass, you are
              <strong>done</strong>! Otherwise, start over form
              <strong>Step 1</strong>.
            </li>
          </ol>
        </section>
      </section>

      <section>
        <h2>Complexity</h2>

        <p>
          Since in the worst case you will have to perform <strong>n</strong>
            passes, where <strong>n</strong> is the number of elements, the
            complexity class of this algorithm is
            <strong>O(n<sup>2</sup>)</strong>.
        </p>
      </section>

      <section>
        <h2>Visualization</h2>

        <section class="side-to-side">
          <div id="visualization-options">
            <ul style="list-style-type:none">
              <li class="slider">
                <label>Problem Size</label>
                <input type="range" min="1" max="100" value="100" class="slider"
                id="problemSizeSlider">
              </li>

              <li class="slider">
                <label>Speed</label>
                <input type="range" min="1" max="100" value="1" class="slider"
                id="speedSlider">
              </li>
              <li class="options">
                <button id="sortButton">Sort</button>
                <button id="pauseButton">Pause</button>
                <button id="stepButton">Step</button>
                <button id="resetButton">Reset</button>
              </li>
            </ul>
          </div>

          <div id="visualization"></div>
        </section>

      </section>

      <section>
        <h2>Visualization Two</h2>
        <div id="vis"></div>
      </section>

      <section>
        <h2>List of Algorithms</h2>
        <ul class="algorithmsList">
          <li>
            <a href="bubbleSort.html">Bubble Sort</a>
          </li>
          <li>
            <a href="bubbleSort.html">Selection Sort</a>
          </li>
        </ul>
      </section>
    </main>

    <footer>
      <p>
        Portions of this page &copy; 2019 Andrei Karavanov, other attributions
        cited in document or page source
      </p>
    </footer>
  </body>
</html>