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
-
+
+
+ Reversed Array
+
+
+
+
+ Sorted Array
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());