diff --git a/bubble.js b/bubble.js index f5f1b2a..6bbaced 100644 --- a/bubble.js +++ b/bubble.js @@ -2,6 +2,9 @@ async function bubble() { const e = document.querySelectorAll(".bar"); for (let i = 0; i < e.length - 1; i++) { for (let j = 0; j < e.length - i - 1; j++) { + if(paused==1){ + await pauser() + } e[j].style.background = "blue"; e[j + 1].style.background = "red"; diff --git a/index.html b/index.html index 05cfd54..8edd00c 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@
- +
@@ -60,7 +60,7 @@
Sorting Options
- +
@@ -68,9 +68,12 @@
Sorting Options
-
+
+ + +
@@ -78,5 +81,6 @@
Sorting Options
- + + diff --git a/insertion.js b/insertion.js index 6408b34..d68c7be 100644 --- a/insertion.js +++ b/insertion.js @@ -2,12 +2,18 @@ async function insertion() { const e = document.querySelectorAll(".bar"); e[0].style.background = "green"; for (let i = 1; i < e.length; i++) { + if(paused==1){ + await pauser() + } let j = i - 1; let x = e[i].style.height; e[i].style.background = "blue"; await waitForMe(delay); while (j > -1 && parseInt(e[j].style.height) > parseInt(x)) { + if(paused==1){ + await pauser() + } e[j].style.background = "blue"; e[j + 1].style.height = e[j].style.height; j--; diff --git a/merge.js b/merge.js index 6603a0a..2f295ab 100644 --- a/merge.js +++ b/merge.js @@ -6,12 +6,18 @@ async function merging(e, l, mid, r) { for (let i = 0; i < n1; i++) { await waitForMe(delay); + if(paused==1){ + await pauser() + } e[i + l].style.background = "orange"; left[i] = e[l + i].style.height; } for (let i = 0; i < n2; i++) { await waitForMe(delay); + if(paused==1){ + await pauser() + } e[i + mid + 1].style.background = "yellow"; right[i] = e[mid + 1 + i].style.height; } @@ -23,7 +29,9 @@ async function merging(e, l, mid, r) { while (i < n1 && j < n2) { await waitForMe(delay); - + if(paused==1){ + await pauser() + } if (parseInt(left[i]) <= parseInt(right[j])) { if ((n1 + n2) === e.length) { e[k].style.background = "green"; @@ -46,6 +54,9 @@ async function merging(e, l, mid, r) { } while (i < n1) { + if(paused==1){ + await pauser() + } if ((n1 + n2) === e.length) { e[k].style.background = "green"; } else { @@ -56,6 +67,9 @@ async function merging(e, l, mid, r) { k++; } while (j < n2) { + if(paused==1){ + await pauser() + } if ((n1 + n2) === e.length) { e[k].style.background = "green"; } else { diff --git a/quick.js b/quick.js index e255bd9..da3ab2d 100644 --- a/quick.js +++ b/quick.js @@ -6,7 +6,9 @@ async function partion(e,l,r){ { e[j].style.background = 'yellow'; await waitForMe(delay); - + if(paused==1){ + await pauser() + } if(parseInt(e[j].style.height) < parseInt(e[r].style.height)){ i++; swap(e[i],e[j]); diff --git a/selection.js b/selection.js index 910fc44..ed0bf66 100644 --- a/selection.js +++ b/selection.js @@ -5,6 +5,9 @@ async function selection() { let k = i; e[i].style.background = "blue"; for (let j = i + 1; j < e.length; j++) { + if(paused==1){ + await pauser() + } e[j].style.background = "yellow"; await waitForMe(delay); if (parseInt(e[j].style.height) < parseInt(e[k].style.height)) { diff --git a/sort.js b/sort.js index 46c0040..4323874 100644 --- a/sort.js +++ b/sort.js @@ -1,3 +1,42 @@ +paused=0; +let checkClass; +document.getElementById("pause").addEventListener("click",(e)=>{ + paused=1; + document.getElementById("pause").textContent="Resume" +}) + +function pauser() { + return new Promise(resolve => { + let pauseclick = function () { + paused= 0; + document.getElementById("pause").textContent="Pause" + // Remove the event from play button + // after clicking play button + document.getElementById("pause") + .removeEventListener("click", pauseclick); + + resolve("resolved"); + } + + // Here is the event listener for play + // button (instead of setTimeout) which + // will wait for the element to get click + // to get resolved until then it will be + // remain stucked inside Promise + document.getElementById("pause") + .addEventListener("click", pauseclick) + }) +} +document.querySelector(".navbar-toggler").addEventListener("click",(e)=>{ + document.getElementById("pause").style.display="none"; + checkClass=window.setInterval(checkClassList,100) +}); +function checkClassList(){ + if(document.getElementById("offcanvasNavbar").classList.contains("hiding")){ + document.getElementById("pause").style.display="block" + window.clearInterval(checkClass) + } +} function swap(i, j) { let temp = i.style.height; i.style.height = j.style.height;