diff --git a/bubble.js b/bubble.js index 8280b91..31edb66 100644 --- a/bubble.js +++ b/bubble.js @@ -32,7 +32,9 @@ const bubbleSort = async function () { } barsEl.children[sz - i - 1].style.backgroundColor = "green"; } - document.getElementById("new-array").classList.remove("disabled"); + document.getElementById("random-array").classList.remove("disabled"); + document.getElementById("reversed-array").classList.remove("disabled"); + document.getElementById("sorted-array").classList.remove("disabled"); document.getElementById("size").classList.remove("disabled"); document.getElementById("bubble").classList.toggle("active-btn"); }; diff --git a/index.html b/index.html index c07297b..ea5b8df 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@

Rotate Your Phone

Rotate Your Phone
- +
+
+ +
+
+
diff --git a/insertion.js b/insertion.js index df07a89..54caff9 100644 --- a/insertion.js +++ b/insertion.js @@ -36,7 +36,9 @@ const insertionSort = async function () { barsEl.children[j + 1].style.backgroundColor = "green"; barsEl.children[i].style.removeProperty("border-color"); } - document.getElementById("new-array").classList.remove("disabled"); + document.getElementById("random-array").classList.remove("disabled"); + document.getElementById("reversed-array").classList.remove("disabled"); + document.getElementById("sorted-array").classList.remove("disabled"); document.getElementById("size").classList.remove("disabled"); document.getElementById("insertion").classList.toggle("active-btn"); }; diff --git a/merge.js b/merge.js index 03b9f6a..5e4b2c1 100644 --- a/merge.js +++ b/merge.js @@ -82,7 +82,9 @@ const mergeSort = async function () { const sz = Number(barsEl.childElementCount); await mergeS(0, Number(sz - 1)).then(() => doGreen(sz)); - document.getElementById("new-array").classList.remove("disabled"); + document.getElementById("random-array").classList.remove("disabled"); + document.getElementById("reversed-array").classList.remove("disabled"); + document.getElementById("sorted-array").classList.remove("disabled"); document.getElementById("size").classList.remove("disabled"); document.getElementById("merge").classList.toggle("active-btn"); }; diff --git a/quick.js b/quick.js index 03f7121..add4f7f 100644 --- a/quick.js +++ b/quick.js @@ -90,7 +90,9 @@ const quickSort = async function () { const sz = Number(barsEl.childElementCount); await quickS(0, Number(sz - 1)).then(() => doGreen(sz)); - document.getElementById("new-array").classList.remove("disabled"); + document.getElementById("random-array").classList.remove("disabled"); + document.getElementById("reversed-array").classList.remove("disabled"); + document.getElementById("sorted-array").classList.remove("disabled"); document.getElementById("size").classList.remove("disabled"); document.getElementById("quick").classList.toggle("active-btn"); }; diff --git a/selection.js b/selection.js index 5fcc951..6371af6 100644 --- a/selection.js +++ b/selection.js @@ -66,7 +66,9 @@ const selectionSort = async function () { ); barsEl.children[mxInd].style.borderColor = barDefaultBorderColor; } - document.getElementById("new-array").classList.remove("disabled"); + document.getElementById("random-array").classList.remove("disabled"); + document.getElementById("reversed-array").classList.remove("disabled"); + document.getElementById("sorted-array").classList.remove("disabled"); document.getElementById("size").classList.remove("disabled"); document.getElementById("selection").classList.toggle("active-btn"); }; diff --git a/sorting.js b/sorting.js index 84b759d..b2da2b4 100644 --- a/sorting.js +++ b/sorting.js @@ -3,7 +3,9 @@ const barsEl = document.getElementById("bars"); const sizeSlider = document.getElementById("size"); // const barsRect = barsEl.getBoundingClientRect(); -const btnNewArray = document.getElementById("new-array"); +const btnRandomArray = document.getElementById("random-array"); +const btnReversedArray = document.getElementById("reversed-array"); +const btnSortedArray = document.getElementById("sorted-array"); const btnReload = document.getElementById("reload"); // const barsWidth = barsRect.width; // const barsHeight = barsRect.height; @@ -13,14 +15,33 @@ const barsHeight = barsEl.offsetHeight; barsEl.innerHTML = ""; let bars = []; -const newArray = function () { - tempEnable(); - barsEl.innerHTML = ""; +const sortedArray = function () { bars = []; + for (let i = 1; i <= sizeSlider.value; ++i) { + bars.push(i); + } + plantArray() +} + +const reversedArray = function () { + bars = []; + for (let i = sizeSlider.value; i > 0; --i) { + bars.push(i); + } + plantArray() +} - for (let i = 0; i < Number(sizeSlider.value); ++i) +const randomArray = function () { + bars = []; + for (let i = 0; i < Number(sizeSlider.value); ++i) { bars.push(Math.floor(Math.random() * 99) + 1); + } + plantArray() +} +const plantArray = function () { + tempEnable(); + barsEl.innerHTML = ""; const newWidth = (Number(barsWidth) * 0.96) / Number(sizeSlider.value); for (let i = 0; i < Number(sizeSlider.value); ++i) { @@ -65,7 +86,9 @@ const swap = function (bar1, bar2) { }; const tempDisable = function () { - document.getElementById("new-array").classList.add("disabled"); + document.getElementById("random-array").classList.add("disabled"); + document.getElementById("reversed-array").classList.add("disabled"); + document.getElementById("sorted-array").classList.add("disabled"); document.getElementById("size").classList.add("disabled"); document.getElementById("bubble").classList.add("disabled"); document.getElementById("merge").classList.add("disabled"); @@ -75,7 +98,9 @@ const tempDisable = function () { }; const tempEnable = function () { - document.getElementById("new-array").classList.remove("disabled"); + document.getElementById("random-array").classList.remove("disabled"); + document.getElementById("reversed-array").classList.remove("disabled"); + document.getElementById("sorted-array").classList.remove("disabled"); document.getElementById("size").classList.remove("disabled"); document.getElementById("bubble").classList.remove("disabled"); document.getElementById("merge").classList.remove("disabled"); @@ -84,5 +109,7 @@ const tempEnable = function () { document.getElementById("selection").classList.remove("disabled"); }; -btnNewArray.addEventListener("click", newArray); +btnRandomArray.addEventListener("click", randomArray); +btnReversedArray.addEventListener("click", reversedArray); +btnSortedArray.addEventListener("click", sortedArray); btnReload.addEventListener("click", () => location.reload());