page8.html

<html>
  <head>
    <title>Heap Sort</title>
    <style>
      #listItem {
        position: relative;
        margin-top: 70px;
        background-color: rgb(206, 90, 90);
        height: 450px;
        width: 7000px;
        margin: auto;
      }
      .ElementBox {
        width: 20px;
        background-color: #050a30;
        position: absolute;
        bottom: 0px;
        transition: 0.2s all ease;
        margin: auto;
      }
      .box_nm {
        margin-top: -23px;
        width: 100%;
        text-align: center;
        position: absolute;
        color: black;
      }
      #btn1 {
        color: rgb(245, 239, 239);
        font-size: 20px;
        width: 170px;
        height: 50px;
        cursor: pointer;
        background-color: rgb(107, 107, 156);
      }
      #btn2 {
        color: rgb(213, 213, 218);
        font-size: 20px;
        width: 160px;
        height: 50px;
        cursor: pointer;
        background-color: rgb(11, 161, 49);
      }
      .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overfleft: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
      }
      .modal-content {
        background-color: #eb5884;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 70%;
        text-align: center;
        font-size: larger;
      }
      .close {
        color: #000000;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }
      .close:hover,
      .close:focus {
        color: rgb(250, 248, 248);
        text-decoration: none;
        cursor: pointer;
      }
    </style>
  </head>
  <body style="background-color: rgb(69, 221, 171)">
    <br />
    <h2 style="font-family: cursive; text-align: center">Heap Sort</h2>
    <button id="myBtn" style="font-size: larger; background-color: #f0c506">
      Complexity
    </button>
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>Worst Case Time Complexity = O(N*log(N))</p>
        <p>Average Case Time Complexity = O(N*log(N))</p>
        <p>Best Case Time Complexity = O(N*log(N))</p>
        <p>Space Complexity = O(1)</p>
      </div>
    </div>
    <script>
      var modal = document.getElementById("myModal");
      var btn = document.getElementById("myBtn");
      var span = document.getElementsByClassName("close")[0];
      btn.onclick = function () {
        modal.style.display = "block";
      };
      span.onclick = function () {
        modal.style.display = "none";
      };
      window.onclick = function (event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      };
    </script>
    <div id="listItem"></div>
    <br /><br />
    <div style="text-align: center">
      <button id="btn1" onclick="arrayDisplay()">
        Display Array <i class="fa fa-desktop"></i>
      </button>
      <button id="btn2" onclick="HSort()">
        Sort Array <i class="fa fa-sort"></i>
      </button>
      <br /><br />
      <h2 id="writeHere"></h2>
    </div>
    <script>
      const list = [];
      function arrayDisplay() {
        let ItemBox = document.getElementById("listItem");
        for (let i = 0; i < 50; i++) {
          list.push(Number(Math.ceil(Math.random() * 1000)));
        }
        for (let i = 0; i < 50; i++) {
          let currItem = list[i],
            element = document.createElement("div");
          element.classList.add("ElementBox");
          element.style.height = `${currItem / 2.3}px`;
          element.style.transform = `translate(${i * 30}px)`;
          let eleUsingLabel = document.createElement("label");
          eleUsingLabel.classList.add("box_nm");
          eleUsingLabel.textContent = currItem;
          eleUsingLabel.setAttribute("style", "font-weight: bold;");
          element.appendChild(eleUsingLabel);
          ItemBox.appendChild(element);
        }
      }
      function applyDesign(ElementBox, index) {}
      function Createtimeout(ms) {
        return new Promise((resolve) => setTimeout(resolve, ms));
      }
      async function heapify(num, index) {
        var ElementBox = document.querySelectorAll(".ElementBox");
        let high = index;
        let left = 2 * index + 1;
        let right = 2 * index + 2;
        if (
          left < num &&
          Number(ElementBox[left].childNodes[0].innerHTML) >
            Number(ElementBox[high].childNodes[0].innerHTML)
        )
          high = left;
        if (
          right < num &&
          Number(ElementBox[right].childNodes[0].innerHTML) >
            Number(ElementBox[high].childNodes[0].innerHTML)
        )
          high = right;
        if (high != index) {
          var ElementBox_height_temp = ElementBox[index].style.height;
          var ElementBox_label_value =
            ElementBox[index].childNodes[0].innerText;
          ElementBox[index].style.height = ElementBox[high].style.height;
          ElementBox[high].style.height = ElementBox_height_temp;
          ElementBox[index].childNodes[0].innerText =
            ElementBox[high].childNodes[0].innerText;
          ElementBox[high].childNodes[0].innerText = ElementBox_label_value;
          await Createtimeout(200);
          await heapify(num, high);
        }
      }
      const HeapSort = async () => {
        let ElementBox = document.querySelectorAll(".ElementBox");
        var num = 50;
        for (let index = num / 2 - 1; index >= 0; index--) {
          await heapify(num, index);
        }
        for (let index = num - 1; index >= 0; index--) {
          var ElementBox_height_temp = ElementBox[index].style.height;
          var ElementBox_label_value =
            ElementBox[index].childNodes[0].innerText;
          ElementBox[index].style.height = ElementBox[0].style.height;
          ElementBox[0].style.height = ElementBox_height_temp;
          ElementBox[index].childNodes[0].innerText =
            ElementBox[0].childNodes[0].innerText;
          ElementBox[0].childNodes[0].innerText = ElementBox_label_value;
          await Createtimeout(200);
          await heapify(index, 0);
        }
      };
      const HSort = async () => {
        var startTime = new Date().getTime();
        await HeapSort();
        document.getElementById("writeHere").innerHTML =
          "HeapSort applied Successfully.";
        var endTime = new Date().getTime();
        window.alert("Press Ok to see the running Time in milliseconds");
        window.alert(endTime - startTime);
      };
    </script>
  </body>
</html>