sorting-visualizer/index.html at main · mohitrajput2002/sorting-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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!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 rel="shortcut icon" href="logo.png" type="image/x-icon" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link
      href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Jura:wght@600&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="sorting.css" />
    <link rel="stylesheet" href="base_sort.css" />

    <title>Sorting Visualizer</title>
  </head>

  <body>
    <div class="nav-container">
      <h1 class="title" onclick="window.location.reload()">
        <img src="img/logo.png" alt="Sorting Visualizer" />
      </h1>
      <div class="navbar" id="navbar">
        <a id="random" onclick="RenderScreen()">Generate array</a>
        <span class="options">
          <select name="select sort algorithm" id="menu" class="algo-menu">
            <option value="0">Choose algorithm</option>
            <option value="1">Bubble Sort</option>
            <option value="2">Selection Sort</option>
            <option value="3">Insertion Sort</option>
            <option value="4">Merge Sort</option>
            <option value="5">Quick Sort</option>
          </select>
        </span>
        <span class="options">
          <select name="select array size" id="menu" class="size-menu">
            <option value="0">Array size</option>
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
            <option value="60">60</option>
            <option value="70">70</option>
            <option value="80">80</option>
            <option value="90">90</option>
            <option value="100">100</option>
          </select>
        </span>
        <span class="options">
          <select name="speed of visualization" id="menu" class="speed-menu">
            <option value="0">Speed</option>
            <option value="0.5">0.50x</option>
            <option value="0.75">0.75x</option>
            <option value="1">1.00x</option>
            <option value="2">2.00x</option>
            <option value="4">4.00x</option>
          </select>
        </span>
        <a class="start">Sort</a>
        <a class="icon"><i class="fa fa-bars"></i></a>
      </div>
    </div>
    <div class="center">
      <div class="array">Select Array Size</div>
    </div>
    <br />
    <!-- Algorithm Information -->
    <div class="algorithm-info container">
      <h2 class="algorithm-name">Sorting Algorithms</h2>
      <hr />
      <p class="algorithm-description">
        Sorting algorithms are used to sort a data structure according to a
        specific order relationship, such as numerical order or lexicographical
        order. <br />

        This operation is one of the most important and widespread in computer
        science. For a long time, new methods have been developed to make this
        procedure faster and faster. <br />

        There are currently hundreds of different sorting algorithms, each with
        its own specific characteristics. They are classified according to two
        metrics: space complexity and time complexity. <br />

        Those two kinds of complexity are represented with asymptotic notations,
        mainly with the symbols O, Θ, Ω, representing respectively the upper
        bound, the tight bound, and the lower bound of the algorithm's
        complexity, specifying in brackets an expression in terms of n, the
        number of the elements of the data structure. <br />

        Most of them fall into two categories: <br /><br />

        &#x2022; <strong>Logarithmic</strong> <br />
        The complexity is proportional to the binary logarithm (i.e to the base
        2) of n. <br />
        An example of a logarithmic sorting algorithm is Quick sort, with space
        and time complexity O(n × log n). <br /><br />
        &#x2022; <strong>Quadratic</strong> <br />
        The complexity is proportional to the square of n. <br />
        An example of a quadratic sorting algorithm is Bubble sort, with a time
        complexity of O(n2). <br />
        Space and time complexity can also be further subdivided into 3
        different cases: best case, average case and worst case. <br />

        Sorting algorithms can be difficult to understand and it's easy to get
        confused. We believe visualizing sorting algorithms can be a great way
        to better understand their functioning while having fun!
      </p>
      <div class="row">
        <div class="col-md-6" style="border-right: 1px solid #888">
          <p class="time-complexity"></p>
        </div>
        <div class="col-md-6">
          <p class="space-complexity"></p>
        </div>
      </div>
    </div>

    <!-- footer starts -->
    <footer class="site-footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-6">
            <h6>About</h6>
            <p style="text-align: justify">
              Sorting Visualizer is a web application designed to better
              understand sorting algorithms by displaying and visualizing them.
              In the website you can find information and implementations in
              multiple programming languages of more than 5 sorting algorithms,
              categorized by their time and space complexity.
            </p>
          </div>

          <div class="col-xs-6 col-md-3">
            <h6>Quick Links</h6>
            <a href="https://mohit-singh-rajput.vercel.app/">
              <i class="fas fa-globe"></i> Portfolio</a
            ><br />
            <a href="mailto:mohit.s.rajput032997@gmail.com">
              <i class="fas fa-envelope"></i> Mail me</a
            ><br />
            <a href="https://github.com/mohitrajput2002">
              <i class="fab fa-github"></i> GitHub</a
            ><br />
            <a href="https://www.linkedin.com/in/mohitsinghrajput/">
              <i class="fab fa-linkedin"></i> LinkedIn</a
            >
          </div>

          <div class="col-sm-6 col-md-3">
            <h6 class="connect">CONNECT</h6>
            <ul class="social-icons">
              <li>
                <a
                  class="facebook"
                  href="https://www.facebook.com/Mohit997"
                  target="_blank"
                  ><i class="fab fa-facebook-f"></i
                ></a>
              </li>
              <li>
                <a
                  class="twitter"
                  href="https://twitter.com/mohit032997?t=hIZv-UGQLeyCtqUfNo8u9w&s=08"
                  target="_blank"
                  ><i class="fab fa-twitter"></i
                ></a>
              </li>
              <li>
                <a
                  class="github"
                  href="https://github.com/mohitrajput2002"
                  target="_blank"
                  ><i class="fab fa-github"></i
                ></a>
              </li>
              <li>
                <a
                  class="linkedin"
                  href="https://linkedin.com/in/mohitsinghrajput"
                  target="_blank"
                  ><i class="fab fa-linkedin-in"></i
                ></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
    <div class="copyright-text">
      <p>
        &copy;2023 - Sorting Visualizer <br />
        Made with ❤️ by
        <a
          href="https://www.linkedin.com/in/mohitsinghrajput/"
          style="text-decoration: none"
          >Mohit Singh Rajput</a
        >
      </p>
    </div>
    <!--footer ends-->

    <script src="js_files/app.js"></script>
    <script src="js_files/helper.js"></script>
    <script src="js_files/sort-algorithms.js"></script>
    <script src="js_files/base_sort.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
      integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
      crossorigin="anonymous"
    ></script>
  </body>
</html>