index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" initial-scale="1.0">
  <title>Sorting Visualizer</title>

  <!-- BOOTSTRAP CSS-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

  <!-- BOOTSTRAP ICONS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

  <!-- STYLE AND SCRIPT -->
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>

</head>

<body class="bg-dark">
  <!-- MAIN BOX   -->
  <div class="container-fluid mx-auto bg-dark p-md-4 d-flex flex-column" id="mainBox">

    <!-- BUTTONS AND STUFF -->
    <div class="row mb-3">

      <div class="d-flex flex-row justify-content-between align-items-center">
        <!-- RANDOM NUMBERS BUTTON  -->
        <div class="flex-grow-1 mx-2 row">
          <label for="randomNumbers" class="col-form-label text-white col-md-2 col-xs-6">Elements: </label>
          <div class="col-md-10 col-xs-6">
            <input type="number" class="form-control bg-secondary text-white" id="randomNumbers" value="20" min="1"
              max="200" onkeyup="enforceMinMax(this)">
          </div>
        </div>

        <!-- SORT BUTTON  -->
        <div class="mx-2">
          <button class="btn btn-outline-primary" id="prevBtn"><i class="bi bi-chevron-double-left"></i></button>
          <button class="btn btn-outline-success" id="startBtn"><i class="bi bi-play-fill"></i></button>
          <button class="btn btn-outline-success hide" id="pauseBtn"><i class="bi bi-pause-fill"></i></button>
          <button class="btn btn-outline-danger hide" id="stopBtn"><i class="bi bi-stop-fill"></i></button>
          <button class="btn btn-outline-primary" id="nextBtn"><i class="bi bi-chevron-double-right"></i></button>

        </div>


        <!-- SPEED BUTTON  -->
        <div class="flex-grow-1 mx-2">
          <select class="form-select bg-secondary text-white" aria-label="Choose visualization speed" id="speed">
          </select>
        </div>

        <!-- ALGORITHM BUTTON  -->
        <div class="flex-grow-1 mx-2">
          <select class="form-select bg-secondary text-white" aria-label="Choose visualization algorithm"
            id="algorithm">
          </select>
        </div>


      </div>
    </div>

    <!-- CANVAS -->

    <div class="row flex-grow-1" id="drawDiv">
      <canvas id="canvas" class="border"></canvas>
    </div>

  </div>

  <!-- BOOTSTRAP SCRIPT -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

</body>

</html>