diff --git a/SortingVisualizer/Abhii-07/README.md b/SortingVisualizer/Abhii-07/README.md new file mode 100644 index 000000000..ab8f46436 --- /dev/null +++ b/SortingVisualizer/Abhii-07/README.md @@ -0,0 +1,4 @@ +# Sorting-Algo-Visualizer +Algorithm Visualizer lets you visualize various algorithms and data structures. This project mainly focuses on three types of sorting algorithms + +Deployed : https://benevolent-peony-3fcf43.netlify.app/ diff --git a/SortingVisualizer/Abhii-07/index.html b/SortingVisualizer/Abhii-07/index.html new file mode 100644 index 000000000..d2b661bf9 --- /dev/null +++ b/SortingVisualizer/Abhii-07/index.html @@ -0,0 +1,35 @@ + + + + Sort Visualizer + + + + + + + +

Sorting Algorithm Visualizer

+
+
+

Comparision:

+

Swap:

+
+
+
+ +
+ +

+ +

+ +

+ + + +
+ + + + \ No newline at end of file diff --git a/SortingVisualizer/Abhii-07/main.js b/SortingVisualizer/Abhii-07/main.js new file mode 100644 index 000000000..167c336cb --- /dev/null +++ b/SortingVisualizer/Abhii-07/main.js @@ -0,0 +1,171 @@ +const container = document.querySelector(".data-container"); +var comp = 0; +document.getElementById("comp").innerHTML = comp; +var sw = 0; +document.getElementById("swap").innerHTML = sw; +function generate() { + const num = 20; + for (let i = 0; i < num; i++) { + const val = (Math.floor(Math.random() * 100) % 100) + 1; + const bar = document.createElement("div"); + bar.classList.add("bar"); + bar.style.height = `${val * 3}px`; + bar.style.transform = `translateX(${i * 30}px)`; + const barLabel = document.createElement("label"); + barLabel.classList.add("bar_id"); + barLabel.innerHTML = val; + bar.appendChild(barLabel); + container.appendChild(bar); + } +} +function reset() { + window.location.reload(); +} +function swap(val1, val2) { + return new Promise((resolve) => { + var temp = val1.style.transform; + val1.style.transform = val2.style.transform; + val2.style.transform = temp; + sw++; + document.getElementById("swap").innerHTML = sw; + window.requestAnimationFrame(() => { + setTimeout(() => { + container.insertBefore(val2, val1); + resolve(); + }, 150); + }); + }); +} + +async function bubblesort() { + const delay = 150; + var bars = document.querySelectorAll(".bar"); + const size = bars.length; + for (let i = 0; i < size; i++) { + for (let j = 0; j < size - i - 1; j++) { + bars[j].style.backgroundColor = "red"; + bars[j + 1].style.backgroundColor = "red"; + await new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, delay); + }); + var val1 = parseInt(bars[j].childNodes[0].innerHTML); + var val2 = parseInt(bars[j + 1].childNodes[0].innerHTML); + comp++; + document.getElementById("comp").innerHTML = comp; + if (val1 > val2) { + await swap(bars[j], bars[j + 1]); + bars = document.querySelectorAll(".bar"); + } + + bars[j].style.backgroundColor = " rgb(24, 190, 255)"; + bars[j + 1].style.backgroundColor = " rgb(24, 190, 255)"; + } + bars[size - i - 1].style.backgroundColor = "green"; + } +} + +async function selectionsort() { + const delay = 300; + let bars = document.querySelectorAll(".bar"); + const size = bars.length; + var min_ind = 0; + for (let i = 0; i < size; i++) { + min_ind = i; + //bars[i].style.backgroundColor = "darkblue"; + for (let j = i + 1; j < size; j++) { + bars[j].style.backgroundColor = "red"; + bars[min_ind].style.backgroundColor = "red"; + await new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, 300); + }); + + var val1 = parseInt(bars[j].childNodes[0].innerHTML); + var val2 = parseInt(bars[min_ind].childNodes[0].innerHTML); + comp++; + document.getElementById("comp").innerHTML = comp; + if (val1 < val2) { + // if(min_ind!=i) + // { + // bars[i].style.backgroundColor = " rgb(24, 190, 255)"; + + // } + bars[min_ind].style.backgroundColor = " rgb(24, 190, 255)"; + min_ind = j; + } else bars[j].style.backgroundColor = " rgb(24, 190, 255)"; + } + if (min_ind != i) { + sw++; + document.getElementById("swap").innerHTML = sw; + } + var temp1 = bars[min_ind].style.height; + var temp2 = bars[min_ind].childNodes[0].innerText; + bars[min_ind].style.height = bars[i].style.height; + bars[i].style.height = temp1; + bars[min_ind].childNodes[0].innerText = bars[i].childNodes[0].innerText; + bars[i].childNodes[0].innerText = temp2; + //swap(bars[min_ind], bars[i]) + await new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, 150); + }); + + bars[min_ind].style.backgroundColor = " rgb(24, 190, 255)"; + bars[i].style.backgroundColor = "green"; + } +} + +async function insertionsort() { + let bars = document.querySelectorAll(".bar"); + const size = bars.length; + bars[0].style.backgroundColor = " rgb(49, 226, 13)"; + for (let i = 1; i < size; i++) { + var j = i - 1; + var key = parseInt(bars[i].childNodes[0].innerHTML); + var barheight = bars[i].style.height; + bars[i].style.backgroundColor = "red"; + await new Promise((resolve) => { + setTimeout(() => resolve(), 150); + }); + while (j >= 0 && parseInt(bars[j].childNodes[0].innerHTML) > key) { + sw++; + document.getElementById("swap").innerHTML = sw; + comp++; + document.getElementById("comp").innerHTML = comp; + bars[j].style.backgroundColor = "red"; + bars[j + 1].style.height = bars[j].style.height; + bars[j + 1].childNodes[0].innerHTML = bars[j].childNodes[0].innerHTML; + j--; + await new Promise((resolve) => { + setTimeout(() => resolve(), 250); + }); + for (var k = i; k >= 0; k--) { + bars[k].style.backgroundColor = " rgb(49, 226, 13)"; + } + } + comp++; + document.getElementById("comp").innerHTML = comp; + bars[j + 1].style.height = barheight; + bars[j + 1].childNodes[0].innerHTML = key; + + await new Promise((resolve) => { + setTimeout(() => resolve(), 250); + }); + + bars[i].style.backgroundColor = " rgb(49, 226, 13)"; + } +} +function dis() { + document.getElementById("btn1").disabled = "true"; + document.getElementById("btn1").style.backgroundColor = "rgb(214, 209, 209);"; + document.getElementById("btn2").disabled = "true"; + document.getElementById("btn2").style.backgroundColor = "rgb(214, 209, 209);"; + document.getElementById("btn5").disabled = "true"; + document.getElementById("btn5").style.backgroundColor = "rgb(214, 209, 209);"; + document.getElementById("btn3").disabled = "true"; + document.getElementById("btn3").style.backgroundColor = "rgb(214, 209, 209);"; +} diff --git a/SortingVisualizer/Abhii-07/style.css b/SortingVisualizer/Abhii-07/style.css new file mode 100644 index 000000000..88bbf2de5 --- /dev/null +++ b/SortingVisualizer/Abhii-07/style.css @@ -0,0 +1,118 @@ +.mySlides { + display: none; +} + +body { + background-color: rgb(252, 250, 247); + font-family: Verdana, sans-serif; +} +h1{ + text-align: center; + background-color: rgb(121, 57, 180); + padding: 10px; + color: white; +} +.head { + margin-top: 1vw; + margin-right: 2vw; + margin-left: 2vw; + text-align: center; + font-size: 30px; + font-weight: bolder; +} + +.data-container { + width: 600px; + height: 384px; + position: relative; + margin: 0 auto; +} + +.bar { + width: 28px; + position: absolute; + left: 0; + bottom: 0; + background-color: rgb(0, 183, 255); + transition: 0.2s all ease; +} + +.bar__id { + position: absolute; + top: -24px; + width: 100%; + text-align: center; + font-size: 1vw; +} +.btn1 { + padding: 12px; + font-weight: bolder; + background-color: #da981f; + border-radius: 10px; + color: white; + font-size: 16px; + border: white; + margin-left: 37vw; + margin-top: 4vw; + margin-right: 1vw; +} +.btn2 { + padding: 12px; + font-weight: bolder; + background-color: #2f1980; + border-radius: 10px; + color: white; + font-size: 16px; + border: white; + margin-left: 2vw; + margin-top: 1vw; + margin-right: 1vw; +} +.btn3 { + padding: 12px; + font-weight: bolder; + margin-left: 2vw; + margin-top: 1vw; + margin-right: 1vw; + background-color: rgb(14, 116, 14); + border-radius: 10px; + color: white; + font-size: 16px; + border: white; +} + +.btn4 { + padding: 12px; + font-weight: bolder; + background-color: rgb(121, 57, 180); + border-radius: 10px; + color: white; + font-size: 16px; + border: white; +} + +.btn5 { + padding: 12px; + font-weight: bolder; + margin-left: 2vw; + margin-top: 1vw; + margin-right: 1vw; + background-color:rgb(224, 62, 62); + border-radius: 10px; + color: white; + font-size: 16px; + border: white; +} +.sort +{ + position: fixed; + z-index: 1; + top: 0; + left: 0; + overflow-x: hidden; + margin-left: 2vw; + margin-top: 12vw; + margin-right: 1vw; + padding-top: 2vw; + +}