Modified ui and code refactored

Author: Bappy4u

base.js

@@ -5,6 +5,9 @@ class sortData {
   }
   selectionSort() {}
   bubbleSort() {}
+  stopSort() {
+    return false;
+  }
 }
 
 //get selected algorithm

function.js

@@ -12,7 +12,9 @@ var svg,
 
 // generating random data
 var data = randomData(maxElement, dataRange);
-
+function setSpeed() {
+  time = document.getElementById("speed").value;
+}
 //a d3 function for scaling height for all the data this function
 var heightScale = d3
   .scaleLinear()
@@ -84,7 +86,8 @@ Sort.bubbleSort = function () {
           data[j] = data[j + 1];
           data[j + 1] = temp;
           changeBarColor(data[j + 1], smallestColor);
-
+          var swooshAudio = new Audio("./sound-effects/swoosh.mp3");
+          swooshAudio.play();
           swapBar(data);
           await timer(time);
         } else {
@@ -112,6 +115,7 @@ document.getElementById("sort").addEventListener("click", function () {
 
 document.getElementById("random-data").addEventListener("click", function () {
   var data = randomData(maxElement, dataRange);
+  Sort.stopSort();
   svg.remove();
   createChart(data);
 });

index.html

@@ -27,6 +27,19 @@ <h1>Sorting Visualizer</h1>
             checked
           />Bubble Sort</label
         >
+        <br />
+        <br />
+        <label>
+          Speed:
+          <input
+            type="range"
+            id="speed"
+            name="speed"
+            min="100"
+            max="1000"
+            onchange="setSpeed()"
+          />
+        </label>
       </form>
     </div>
     <div class="container">

style.css

@@ -4,28 +4,36 @@
 .container {
   display: flex;
   justify-content: center;
-  height: 90vh;
   align-items: center;
 }
+.bar-chart {
+  margin-top: 40px;
+  background-color: #eee;
+  padding: 50px 20px 30px 20px;
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
 
 h1 {
   text-align: center;
   font-family: sans-serif;
+  padding: 0;
+  margin: 30px 0 0 0;
 }
 button {
   display: block;
   margin: auto;
-  margin-top: 30px;
+
   padding: 5px 20px;
   background: steelblue;
   color: rgb(218, 238, 105);
-  font-size: 20px;
+  font-size: 15px;
   cursor: pointer;
+  font-weight: 600;
 }
 button {
   margin: auto;
-  margin-top: 50px;
-  padding: 7px 30px;
+  margin-top: 20px;
+  padding: 2px 30px;
   border: none;
 }
 
@@ -38,7 +46,7 @@ button {
   );
 }
 button {
-  padding: 15px 45px;
+  padding: 10px 30px;
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
@@ -55,13 +63,16 @@ button:hover {
   text-decoration: none;
 }
 form {
-  margin-top: 30px;
+  margin-top: 20px;
   text-align: center;
 }
 label {
   font-size: 20px;
   cursor: pointer;
 }
+input {
+  cursor: pointer;
+}
 rect:hover {
   cursor: pointer;
 }