Update search algorithm by notification at bottom

Author: Bappy4u

base.js

@@ -99,7 +99,7 @@ function swapBar(data) {
 function togglePlay() {
   var sortElement = document.getElementById("sort");
   var stopElement = document.getElementById("stop");
-  if (isSorted) {
+  if (isFound) {
     sortElement.classList.add("none");
     stopElement.classList.add("none");
   } else {

function.js

@@ -11,7 +11,7 @@ var svg,
   unsortedColor = "#add8e6",
   sortedColor = "#56b4d3",
   isSorting = false,
-  isSorted = false;
+  isFound = false;
 
 var swooshAudio = new Audio("./sound-effects/swoosh.mp3");
 var completeAudio = new Audio("./sound-effects/complete.mp3");
@@ -83,7 +83,7 @@ const SortAlgo = {
 
       completeAudio.play();
       isSorting = false;
-      isSorted = true;
+      isFound = true;
       togglePlay();
     }
 
@@ -143,7 +143,7 @@ const SortAlgo = {
 
       completeAudio.play();
       isSorting = false;
-      isSorted = true;
+      isFound = true;
       togglePlay();
     }
     // calling sort function here
@@ -221,7 +221,7 @@ const SortAlgo = {
       svg.selectAll("rect").style("fill", "#56b4d3");
       completeAudio.play();
       isSorting = false;
-      isSorted = true;
+      isFound = true;
       togglePlay();
     }
 
@@ -272,8 +272,8 @@ document.getElementById("random-data").addEventListener("click", function () {
     stopSorting();
     togglePlay();
   }
-  if (isSorted) {
-    isSorted = false;
+  if (isFound) {
+    isFound = false;
     document.getElementById("sort").classList.remove("none");
   }
   svg.remove();

searching-algorithm/base.js

@@ -101,7 +101,7 @@ function swapBar(data) {
 function togglePlay() {
   var sortElement = document.getElementById("sort");
   var stopElement = document.getElementById("stop");
-  if (isSorted) {
+  if (isFound) {
     sortElement.classList.add("none");
     stopElement.classList.add("none");
   } else {

searching-algorithm/function.js

@@ -11,7 +11,7 @@ var svg,
   unsortedColor = "#add8e6",
   sortedColor = "green",
   isSorting = false,
-  isSorted = false;
+  isFound = false;
 
 var swooshAudio = new Audio("./../sound-effects/swoosh.mp3");
 var completeAudio = new Audio("./../sound-effects/complete.mp3");
@@ -63,7 +63,7 @@ const SearchAlgo = {
 
       completeAudio.play();
       isSorting = false;
-      isSorted = true;
+      isFound = true;
     }
 
     // calling async function here
@@ -88,7 +88,9 @@ const SearchAlgo = {
         changeBarColor(data[mid], traverseColor);
         if (data[mid] == target) {
           changeBarColor(data[mid], sortedColor);
-          console.log("found");
+          isFound = true;
+          let text = target + " Found at position " + (mid + 1);
+          document.getElementById("foundNotice").innerHTML = text;
           await timer(time);
           break;
         } else if (data[mid] < target) {
@@ -100,12 +102,15 @@ const SearchAlgo = {
 
         await timer(time);
       }
+      if (!isFound) {
+        document.getElementById("foundNotice").innerHTML =
+          target + " doesn't exist.";
+      }
 
       // after complete sorting complete making all the bar green and playing complete sound effects
 
       completeAudio.play();
       isSorting = false;
-      isSorted = true;
     }
 
     // calling async function here
@@ -114,7 +119,7 @@ const SearchAlgo = {
 };
 
 function startSearching() {
-  algo = document.getElementById("get-algo").value;
+  let algo = document.getElementById("get-algo").value;
   if (algo == "linear-search") {
     const linearSearchStarted = SearchAlgo.liearSearch.bind(SearchAlgo);
     linearSearchStarted();

searching-algorithm/index.html

@@ -103,7 +103,7 @@ <h2>Searching Algorithm Visualizer</h2>
         <hr />
       </div>
     </div>
-    <div class="container foundNotice"></div>
+    <div id="foundNotice" class="container text-success text-center"></div>
 
     <footer>
       <div class="footer-text">