From 6384ccccd315a204cd2868717a4eb728509b18e2 Mon Sep 17 00:00:00 2001 From: "Najmul H. Bappy" Date: Sun, 1 Aug 2021 08:26:01 +0600 Subject: [PATCH 01/34] Create README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..3a57943 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# algorithm-visualizer + +# Live Demo From a7325b613fc11e3bc546637815d7e2202e3b94af Mon Sep 17 00:00:00 2001 From: "Najmul H. Bappy" Date: Mon, 2 Aug 2021 02:29:22 +0600 Subject: [PATCH 02/34] Refactor bar swapping function and added color at sorted bar --- base.js | 5 +---- function.js | 21 +++++++++------------ 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/base.js b/base.js index be58444..a2a01f5 100644 --- a/base.js +++ b/base.js @@ -95,10 +95,7 @@ function createChart(data) { // bar visualization while sorting. Bar Swapping function swapBar(data) { - var dOrder = data.map(function (d) { - return d; - }); - bandScale.domain(dOrder); + bandScale.domain(data); svg .transition() .duration(750) diff --git a/function.js b/function.js index 71ad81e..1a68bc1 100644 --- a/function.js +++ b/function.js @@ -8,7 +8,8 @@ var svg, time = 300, traverseColor = "#ffcaa1", smallestColor = "#ab87ff", - unsortedColor = "#add8e6"; + unsortedColor = "#add8e6", + sortedColor = "#56b4d3"; // generating random data var data = randomData(maxElement, dataRange); @@ -52,19 +53,15 @@ Sort.selectionSort = function () { data[i] = smallest; data[pos] = temp; - var swooshAudio = new Audio( - "/algorithm-visualizer/sound-effects/swoosh.mp3" - ); + var swooshAudio = new Audio("./sound-effects/swoosh.mp3"); swooshAudio.play(); } - changeBarColor(smallest, "#56b4d3"); + changeBarColor(smallest, sortedColor); swapBar(data); await timer(time); // then the created Promise can be awaited } - svg.selectAll("rect").style("fill", "#56b4d3"); - var completeAudio = new Audio( - "/algorithm-visualizer/sound-effects/complete.mp3" - ); + svg.selectAll("rect").style("fill", sortedColor); + var completeAudio = new Audio("./sound-effects/complete.mp3"); completeAudio.play(); } sort(); @@ -95,11 +92,11 @@ Sort.bubbleSort = function () { } changeBarColor(data[j], unsortedColor); } + changeBarColor(data[j], sortedColor); } + svg.selectAll("rect").style("fill", "#56b4d3"); - var completeAudio = new Audio( - "/algorithm-visualizer/sound-effects/complete.mp3" - ); + var completeAudio = new Audio("./sound-effects/complete.mp3"); completeAudio.play(); } sort(); From 3c677aaa4520af3529ba987364ec2b2c4f1015fc Mon Sep 17 00:00:00 2001 From: "Najmul H. Bappy" Date: Mon, 2 Aug 2021 02:37:33 +0600 Subject: [PATCH 03/34] git fixed text position --- base.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/base.js b/base.js index a2a01f5..6db4ee5 100644 --- a/base.js +++ b/base.js @@ -86,7 +86,7 @@ function createChart(data) { .attr("y", function (d) { return areaHeight - 15; }) - .style("width", bandScale.bandwidth) + .style("width", bandScale.bandwidth()) .style("fill", "black") .style("font-size", areaWidth / data.length / 3) .style("font-family", "sans-serif") @@ -108,6 +108,6 @@ function swapBar(data) { .duration(750) .selectAll("text") .attr("x", function (d) { - return bandScale(d) + 5; + return bandScale(d) + 10; }); } From 305a9f64dac5f3b03f19127116803f1a6410225b Mon Sep 17 00:00:00 2001 From: "Najmul H. Bappy" Date: Mon, 2 Aug 2021 06:28:32 +0600 Subject: [PATCH 04/34] added pause --- function.js | 140 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 137 insertions(+), 3 deletions(-) diff --git a/function.js b/function.js index 1a68bc1..1f5f96d 100644 --- a/function.js +++ b/function.js @@ -24,7 +24,7 @@ var heightScale = d3 // initialized a chart with random value createChart(data); - +/* let Sort = new sortData(data); Sort.selectionSort = function () { const timer = (ms) => new Promise((res) => setTimeout(res, ms)); @@ -101,12 +101,145 @@ Sort.bubbleSort = function () { } sort(); }; +*/ +const selectionS = { + selectionSort() { + const timer = (ms) => new Promise((res) => setTimeout(res, ms)); + + async function sort(self) { + for (let i = 0; i < data.length; i++) { + if (self.abort) { + self.abort = false; + return; + } + smallest = data[i]; + pos = i; + changeBarColor(smallest, smallestColor); + await timer(time); + for (var j = i + 1; j < data.length; j++) { + if (self.abort) { + self.abort = false; + return; + } + changeBarColor(data[j], traverseColor); + if (smallest > data[j]) { + await timer(time); + changeBarColor(smallest, unsortedColor); + smallest = data[j]; + pos = j; + } + + changeBarColor(smallest, smallestColor); + await timer(time); + changeBarColor(data[j], unsortedColor); + } + if (data[i] != smallest) { + temp = data[i]; + data[i] = smallest; + data[pos] = temp; + + var swooshAudio = new Audio("./sound-effects/swoosh.mp3"); + swooshAudio.play(); + } + changeBarColor(smallest, sortedColor); + swapBar(data); + await timer(time); // then the created Promise can be awaited + } + } + + sort(this); + }, + + selectionSortStop() { + this.abort = true; + }, +}; +const bubbleS = { + bubbleSort() { + const timer = (ms) => new Promise((res) => setTimeout(res, ms)); + + async function sort(self) { + var temp; + for (let i = 0; i < data.length - 1; i++) { + console.log(self.abort); + if (self.abort) { + self.abort = false; + return; + } + + changeBarColor(data[0], smallestColor); + await timer(time); + for (j = 0; j < data.length - i - 1; j++) { + if (self.abort) { + self.abort = false; + changeBarColor(data[j], unsortedColor); + return; + } + await timer(time); + changeBarColor(data[j + 1], traverseColor); + await timer(time); + if (data[j] > data[j + 1]) { + temp = data[j]; + data[j] = data[j + 1]; + data[j + 1] = temp; + changeBarColor(data[j + 1], smallestColor); + var swooshAudio = new Audio("./sound-effects/swoosh.mp3"); + swooshAudio.play(); + swapBar(data); + await timer(time); + } else { + changeBarColor(data[j + 1], smallestColor); + } + changeBarColor(data[j], unsortedColor); + } + changeBarColor(data[j], sortedColor); + } + } + + sort(this); + }, + + bubbleSortStop() { + this.abort = true; + }, +}; + +function stopSorting() { + const stopBubbleSort = bubbleS.bubbleSortStop.bind(bubbleS); + const stopSelectionSort = selectionS.selectionSortStop.bind(selectionS); + + stopBubbleSort(); + stopSelectionSort(); +} +function startSorting() { + if (getAlgo() == "bubble-sort") { + const bubbleSortStarted = bubbleS.bubbleSort.bind(bubbleS); + console.log("clicked buble"); + bubbleSortStarted(); + } else if (getAlgo() == "selection-sort") { + const selectionSortStarted = selectionS.selectionSort.bind(selectionS); + console.log("clicked Selection"); + selectionSortStarted(); + } +} + +document.getElementById("sort").addEventListener("click", function () { + startSorting(); +}); + +document.getElementById("random-data").addEventListener("click", function () { + stopSorting(); + svg.remove(); + var data = randomData(maxElement, dataRange); + createChart(data); +}); +/* document.getElementById("sort").addEventListener("click", function () { if (getAlgo() == "selection-sort") { - Sort.selectionSort(); + selectionS.selectionSort.bind(bubbleS); } else if (getAlgo() == "bubble-sort") { - Sort.bubbleSort(); + bubbleS.bubbleSort.bind(bubbleS); } }); @@ -116,3 +249,4 @@ document.getElementById("random-data").addEventListener("click", function () { svg.remove(); createChart(data); }); +*/ From 6f015325116ffbd86992bd20a1662104a31ca1a0 Mon Sep 17 00:00:00 2001 From: "Najmul H. Bappy" Date: Mon, 2 Aug 2021 07:55:27 +0600 Subject: [PATCH 05/34] Added stop button and fixed some issue with generating new data while sorting --- base.js | 12 +++++ function.js | 138 +++++++++++++++------------------------------------- index.html | 1 + style.css | 11 +++++ 4 files changed, 63 insertions(+), 99 deletions(-) diff --git a/base.js b/base.js index 6db4ee5..8586765 100644 --- a/base.js +++ b/base.js @@ -111,3 +111,15 @@ function swapBar(data) { return bandScale(d) + 10; }); } + +function togglePlay() { + var sortElement = document.getElementById("sort"); + var stopElement = document.getElementById("stop"); + if (isSorted) { + sortElement.classList.add("none"); + stopElement.classList.add("none"); + } else { + sortElement.classList.toggle("none"); + stopElement.classList.toggle("none"); + } +} diff --git a/function.js b/function.js index 1f5f96d..35a3cb5 100644 --- a/function.js +++ b/function.js @@ -9,7 +9,9 @@ var svg, traverseColor = "#ffcaa1", smallestColor = "#ab87ff", unsortedColor = "#add8e6", - sortedColor = "#56b4d3"; + sortedColor = "#56b4d3", + isSorting = false, + isSorted = false; // generating random data var data = randomData(maxElement, dataRange); @@ -24,84 +26,7 @@ var heightScale = d3 // initialized a chart with random value createChart(data); -/* -let Sort = new sortData(data); -Sort.selectionSort = function () { - const timer = (ms) => new Promise((res) => setTimeout(res, ms)); - async function sort() { - // We need to wrap the loop into an async function for this to work - for (var i = 0; i < data.length; i++) { - smallest = data[i]; - pos = i; - changeBarColor(smallest, smallestColor); - await timer(time); - for (var j = i + 1; j < data.length; j++) { - changeBarColor(data[j], traverseColor); - if (smallest > data[j]) { - await timer(time); - changeBarColor(smallest, unsortedColor); - smallest = data[j]; - pos = j; - } - - changeBarColor(smallest, smallestColor); - await timer(time); - changeBarColor(data[j], unsortedColor); - } - if (data[i] != smallest) { - temp = data[i]; - data[i] = smallest; - data[pos] = temp; - - var swooshAudio = new Audio("./sound-effects/swoosh.mp3"); - swooshAudio.play(); - } - changeBarColor(smallest, sortedColor); - swapBar(data); - await timer(time); // then the created Promise can be awaited - } - svg.selectAll("rect").style("fill", sortedColor); - var completeAudio = new Audio("./sound-effects/complete.mp3"); - completeAudio.play(); - } - sort(); -}; - -Sort.bubbleSort = function () { - const timer = (ms) => new Promise((res) => setTimeout(res, ms)); - async function sort() { - var temp; - for (i = 0; i < data.length - 1; i++) { - changeBarColor(data[0], smallestColor); - await timer(time); - for (j = 0; j < data.length - i - 1; j++) { - await timer(time); - changeBarColor(data[j + 1], traverseColor); - await timer(time); - if (data[j] > data[j + 1]) { - temp = data[j]; - data[j] = data[j + 1]; - data[j + 1] = temp; - changeBarColor(data[j + 1], smallestColor); - var swooshAudio = new Audio("./sound-effects/swoosh.mp3"); - swooshAudio.play(); - swapBar(data); - await timer(time); - } else { - changeBarColor(data[j + 1], smallestColor); - } - changeBarColor(data[j], unsortedColor); - } - changeBarColor(data[j], sortedColor); - } - svg.selectAll("rect").style("fill", "#56b4d3"); - var completeAudio = new Audio("./sound-effects/complete.mp3"); - completeAudio.play(); - } - sort(); -}; -*/ const selectionS = { selectionSort() { const timer = (ms) => new Promise((res) => setTimeout(res, ms)); @@ -145,6 +70,12 @@ const selectionS = { swapBar(data); await timer(time); // then the created Promise can be awaited } + svg.selectAll("rect").style("fill", "#56b4d3"); + var completeAudio = new Audio("./sound-effects/complete.mp3"); + completeAudio.play(); + isSorting = false; + isSorted = true; + togglePlay(); } sort(this); @@ -152,6 +83,7 @@ const selectionS = { selectionSortStop() { this.abort = true; + isSorting = false; }, }; @@ -162,7 +94,6 @@ const bubbleS = { async function sort(self) { var temp; for (let i = 0; i < data.length - 1; i++) { - console.log(self.abort); if (self.abort) { self.abort = false; return; @@ -195,6 +126,12 @@ const bubbleS = { } changeBarColor(data[j], sortedColor); } + svg.selectAll("rect").style("fill", "#56b4d3"); + var completeAudio = new Audio("./sound-effects/complete.mp3"); + completeAudio.play(); + isSorting = false; + isSorted = true; + togglePlay(); } sort(this); @@ -202,51 +139,54 @@ const bubbleS = { bubbleSortStop() { this.abort = true; + isSorting = false; }, }; function stopSorting() { const stopBubbleSort = bubbleS.bubbleSortStop.bind(bubbleS); const stopSelectionSort = selectionS.selectionSortStop.bind(selectionS); - - stopBubbleSort(); - stopSelectionSort(); + if (running == "bubble") { + stopBubbleSort(); + } else if (running == "selection") { + stopSelectionSort(); + } } function startSorting() { if (getAlgo() == "bubble-sort") { const bubbleSortStarted = bubbleS.bubbleSort.bind(bubbleS); - console.log("clicked buble"); + running = "bubble"; bubbleSortStarted(); } else if (getAlgo() == "selection-sort") { const selectionSortStarted = selectionS.selectionSort.bind(selectionS); - console.log("clicked Selection"); + running = "selection"; selectionSortStarted(); } } document.getElementById("sort").addEventListener("click", function () { + isSorting = true; startSorting(); + togglePlay(); }); -document.getElementById("random-data").addEventListener("click", function () { - stopSorting(); - svg.remove(); - var data = randomData(maxElement, dataRange); - createChart(data); -}); -/* -document.getElementById("sort").addEventListener("click", function () { - if (getAlgo() == "selection-sort") { - selectionS.selectionSort.bind(bubbleS); - } else if (getAlgo() == "bubble-sort") { - bubbleS.bubbleSort.bind(bubbleS); +document.getElementById("stop").addEventListener("click", function () { + if (isSorting) { + stopSorting(); + togglePlay(); } }); document.getElementById("random-data").addEventListener("click", function () { - var data = randomData(maxElement, dataRange); - Sort.stopSort(); + if (isSorting) { + stopSorting(); + togglePlay(); + } + if (isSorted) { + isSorted = false; + document.getElementById("sort").classList.remove("none"); + } svg.remove(); + var data = randomData(maxElement, dataRange); createChart(data); }); -*/ diff --git a/index.html b/index.html index e10623d..191f618 100644 --- a/index.html +++ b/index.html @@ -47,6 +47,7 @@

Sorting Visualizer


+ diff --git a/style.css b/style.css index 7457299..1a3ab47 100644 --- a/style.css +++ b/style.css @@ -76,3 +76,14 @@ input { rect:hover { cursor: pointer; } +.none { + display: none; +} +.stop { + background-image: linear-gradient( + to right, + #ad4a04 0%, + #d36756 51%, + #8f5a34 100% + ); +} From 113466da1b9a9cf57088ac8c1c4bf13a556dba49 Mon Sep 17 00:00:00 2001 From: "Najmul H. Bappy" Date: Tue, 3 Aug 2021 06:42:05 +0600 Subject: [PATCH 06/34] Refactor code and added sound off option --- function.js | 158 +++++++++++++++++++++++++++++----------------------- index.html | 16 +++++- style.css | 43 +++++++++++++- 3 files changed, 143 insertions(+), 74 deletions(-) diff --git a/function.js b/function.js index 35a3cb5..e6a78a7 100644 --- a/function.js +++ b/function.js @@ -3,7 +3,7 @@ var svg, text, maxElement = 15, dataRange = maxElement * 2, - areaHeight = 150, + areaHeight = 250, areaWidth = 800, time = 300, traverseColor = "#ffcaa1", @@ -13,6 +13,11 @@ var svg, isSorting = false, isSorted = false; +var swooshAudio = new Audio("./sound-effects/swoosh.mp3"); +var completeAudio = new Audio("./sound-effects/complete.mp3"); +swooshAudio.volume = 0.3; +completeAudio.volume = 0.3; + // generating random data var data = randomData(maxElement, dataRange); function setSpeed() { @@ -27,139 +32,141 @@ var heightScale = d3 // initialized a chart with random value createChart(data); -const selectionS = { - selectionSort() { +// javascript objects for performing different sorting algorithm +const SortAlgo = { + // bubble sort methods to perform bubble sort algorithm + bubbleSort() { + // promise for async bubble sort with delay + const timer = (ms) => new Promise((res) => setTimeout(res, ms)); + // async function for bubble sort async function sort(self) { - for (let i = 0; i < data.length; i++) { + var temp; + for (let i = 0; i < data.length - 1; i++) { + // If user click on stop button then this function will stop performing here. if (self.abort) { self.abort = false; return; } - smallest = data[i]; - pos = i; - changeBarColor(smallest, smallestColor); + // changing initial smallest bar color + changeBarColor(data[0], smallestColor); await timer(time); - for (var j = i + 1; j < data.length; j++) { + for (j = 0; j < data.length - i - 1; j++) { + // If user click on stop button then this function will stop performing here. if (self.abort) { self.abort = false; + changeBarColor(data[j], unsortedColor); return; } - changeBarColor(data[j], traverseColor); - if (smallest > data[j]) { + await timer(time); + changeBarColor(data[j + 1], traverseColor); + await timer(time); + if (data[j] > data[j + 1]) { + temp = data[j]; + data[j] = data[j + 1]; + data[j + 1] = temp; + changeBarColor(data[j + 1], smallestColor); + swooshAudio.play(); + swapBar(data); await timer(time); - changeBarColor(smallest, unsortedColor); - smallest = data[j]; - pos = j; + } else { + changeBarColor(data[j + 1], smallestColor); } - - changeBarColor(smallest, smallestColor); - await timer(time); changeBarColor(data[j], unsortedColor); } - if (data[i] != smallest) { - temp = data[i]; - data[i] = smallest; - data[pos] = temp; - - var swooshAudio = new Audio("./sound-effects/swoosh.mp3"); - swooshAudio.play(); - } - changeBarColor(smallest, sortedColor); - swapBar(data); - await timer(time); // then the created Promise can be awaited + changeBarColor(data[j], sortedColor); } + + // after complete sorting complete making all the bar green and playing complete sound effects svg.selectAll("rect").style("fill", "#56b4d3"); - var completeAudio = new Audio("./sound-effects/complete.mp3"); + completeAudio.play(); isSorting = false; isSorted = true; togglePlay(); } + // calling async function here sort(this); }, - selectionSortStop() { - this.abort = true; - isSorting = false; - }, -}; - -const bubbleS = { - bubbleSort() { + // selection sort methods + selectionSort() { + // promise for async selection sort with delay const timer = (ms) => new Promise((res) => setTimeout(res, ms)); + // async function for selection sort algorithm async function sort(self) { - var temp; - for (let i = 0; i < data.length - 1; i++) { + for (let i = 0; i < data.length; i++) { + // Stoping execution here if users wants to stop. if (self.abort) { self.abort = false; return; } - - changeBarColor(data[0], smallestColor); + smallest = data[i]; + pos = i; + changeBarColor(smallest, smallestColor); await timer(time); - for (j = 0; j < data.length - i - 1; j++) { + for (var j = i + 1; j < data.length; j++) { if (self.abort) { self.abort = false; - changeBarColor(data[j], unsortedColor); return; } - await timer(time); - changeBarColor(data[j + 1], traverseColor); - await timer(time); - if (data[j] > data[j + 1]) { - temp = data[j]; - data[j] = data[j + 1]; - data[j + 1] = temp; - changeBarColor(data[j + 1], smallestColor); - var swooshAudio = new Audio("./sound-effects/swoosh.mp3"); - swooshAudio.play(); - swapBar(data); + changeBarColor(data[j], traverseColor); + if (smallest > data[j]) { await timer(time); - } else { - changeBarColor(data[j + 1], smallestColor); + changeBarColor(smallest, unsortedColor); + smallest = data[j]; + pos = j; } + + changeBarColor(smallest, smallestColor); + await timer(time); changeBarColor(data[j], unsortedColor); } - changeBarColor(data[j], sortedColor); + if (data[i] != smallest) { + temp = data[i]; + data[i] = smallest; + data[pos] = temp; + // playing swapping sound + swooshAudio.play(); + } + // swapping bar and changing smallest color + changeBarColor(smallest, sortedColor); + swapBar(data); + await timer(time); // then the created Promise can be awaited } + + // After complete sorting algorithm making all the bar green. svg.selectAll("rect").style("fill", "#56b4d3"); - var completeAudio = new Audio("./sound-effects/complete.mp3"); + completeAudio.play(); isSorting = false; isSorted = true; togglePlay(); } - + // calling sort function here sort(this); }, - bubbleSortStop() { + // If user wants to stop the sorting process then this function will be called and sorting algorithm will be stopped immediately. + sortStop() { this.abort = true; isSorting = false; }, }; function stopSorting() { - const stopBubbleSort = bubbleS.bubbleSortStop.bind(bubbleS); - const stopSelectionSort = selectionS.selectionSortStop.bind(selectionS); - if (running == "bubble") { - stopBubbleSort(); - } else if (running == "selection") { - stopSelectionSort(); - } + const stopSorting = SortAlgo.sortStop.bind(SortAlgo); + stopSorting(); } function startSorting() { if (getAlgo() == "bubble-sort") { - const bubbleSortStarted = bubbleS.bubbleSort.bind(bubbleS); - running = "bubble"; + const bubbleSortStarted = SortAlgo.bubbleSort.bind(SortAlgo); bubbleSortStarted(); } else if (getAlgo() == "selection-sort") { - const selectionSortStarted = selectionS.selectionSort.bind(selectionS); - running = "selection"; + const selectionSortStarted = SortAlgo.selectionSort.bind(SortAlgo); selectionSortStarted(); } } @@ -190,3 +197,14 @@ document.getElementById("random-data").addEventListener("click", function () { var data = randomData(maxElement, dataRange); createChart(data); }); + +document.getElementById("sound").addEventListener("click", function () { + if (this.classList.contains("line-through")) { + swooshAudio.volume = 0.3; + completeAudio.volume = 0.3; + } else { + swooshAudio.volume = 0; + completeAudio.volume = 0; + } + this.classList.toggle("line-through"); +}); diff --git a/index.html b/index.html index 191f618..67ec9f2 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +

Sound 🎵

Sorting Visualizer

@@ -36,20 +37,29 @@

Sorting Visualizer

id="speed" name="speed" min="100" - max="1000" + max="800" + value="300" onchange="setSpeed()" /> + +

- -
+ diff --git a/style.css b/style.css index 1a3ab47..ba1d9b6 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,16 @@ * { font-family: sans-serif; } +body { + min-height: 100vh; +} .container { display: flex; justify-content: center; align-items: center; } .bar-chart { - margin-top: 40px; + margin-top: 5vh; background-color: #eee; padding: 50px 20px 30px 20px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; @@ -87,3 +90,41 @@ rect:hover { #8f5a34 100% ); } +footer { + width: 100%; + color: #8c8c8c; + + margin: auto; + margin-top: 5vh; +} + +footer p { + display: block; + margin: 0 auto; + text-align: center; +} + +footer .footer-text { + margin: auto; +} + +footer .love { + color: red; +} +footer a { + color: #2e2e2e; +} +.sound { + text-align: right; +} +.sound a { + background: rgb(165, 115, 115); + padding: 5px; + border-radius: 5px; + color: #fff; + cursor: pointer; + text-decoration: none; +} +.line-through { + text-decoration: line-through !important; +} From 609aee3ae01b8f74bc842d45b1db33da81163597 Mon Sep 17 00:00:00 2001 From: "Najmul H. Bappy" Date: Tue, 3 Aug 2021 06:52:20 +0600 Subject: [PATCH 07/34] Added some readme and changed some ui --- README.md | 10 +++++++++- index.html | 29 +++++++++++++++++------------ 2 files changed, 26 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 3a57943..c0d7b52 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,11 @@ # algorithm-visualizer -# Live Demo +# Live Link + +

So far I've implemented two Sorting Algorithm only.

+ +
    +
  1. Bubble Sort

  2. +
  3. Selection Sort

  4. + +
diff --git a/index.html b/index.html index 67ec9f2..b9e1b75 100644 --- a/index.html +++ b/index.html @@ -4,30 +4,35 @@ - Sorting Visualizer + + Sorting Algorithm Visualizer | Najmul H. Bappy

Sound 🎵

-

Sorting Visualizer

+

Sorting Algorithm Visualizer

- - +