Added Footer and Color Meanings

Author: sasank-tadepalli

src/App.js

@@ -4,6 +4,8 @@ import Chart from "./components/Chart/Chart";
 import Button from "./components/Button/Button";
 import Navbar from "./components/Navbar/Navbar";
 import Description from "./components/Description/Description";
+import ColorMeanings from "./components/ColorMeanings/ColorMeanings";
+import Footer from "./components/Footer/Footer";
 import { useEffect } from "react";
 
 import generateArray from "./helpers/generateArray";
@@ -109,8 +111,10 @@ function App() {
           isDisabled={isSorting}
           className="sort"
         />
+        <ColorMeanings />
         <Description algType={algType} />
       </div>
+      <Footer />
     </div>
   );
 }

src/components/ColorMeanings/ColorMeanings.css

@@ -0,0 +1,35 @@
+.color-meanings {
+  /* background-color: pink; */
+  width: 80%;
+  margin: 5% auto;
+  min-height: 3rem;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 25px;
+}
+
+.color-meanings div {
+  /* background-color: red; */
+  padding: 5%;
+  display: flex;
+  align-items: center;
+}
+
+.color-meanings div span {
+  display: block;
+  margin-right: 5%;
+  width: 30px;
+  height: 30px;
+}
+
+@media (max-width: 1000px) {
+  .color-meanings {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 800px) {
+  .color-meanings {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

src/components/ColorMeanings/ColorMeanings.js

@@ -0,0 +1,30 @@
+import "./ColorMeanings.css";
+
+const ColorMeanings = () => {
+  return (
+    <div className="color-meanings">
+      <div>
+        <span style={{ backgroundColor: "gray" }}></span>
+        <p>Unsorted</p>
+      </div>
+      <div>
+        <span style={{ backgroundColor: "red" }}></span>
+        <p>Comparing</p>
+      </div>
+      <div>
+        <span style={{ backgroundColor: "yellow" }}></span>
+        <p>Swapping</p>
+      </div>
+      <div>
+        <span style={{ backgroundColor: "orange" }}></span>
+        <p>Overwriting from Memory</p>
+      </div>
+      <div>
+        <span style={{ backgroundColor: "green" }}></span>
+        <p>Sorted</p>
+      </div>
+    </div>
+  );
+};
+
+export default ColorMeanings;

src/components/Footer/Footer.css

@@ -0,0 +1,21 @@
+.footer {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  text-align: left;
+  height: 4rem;
+  margin-top: 2%;
+  border-top: 1px solid rgb(214, 214, 214);
+  padding-top: 1%;
+  padding-left: 3%;
+}
+
+.footer h1 {
+  font-weight: 400;
+  font-size: 1.5rem;
+}
+
+.footer b {
+  font-family: "Times New Roman", Times, serif;
+}

src/components/Footer/Footer.js

@@ -0,0 +1,13 @@
+import "./Footer.css";
+
+const Footer = () => {
+  return (
+    <div className="footer">
+      <h1>
+        Built by <b>Sasank Tadepalli</b>
+      </h1>
+    </div>
+  );
+};
+
+export default Footer;

src/helpers/bubbleSort.js

@@ -6,9 +6,29 @@ const bubbleSort = (alterStateAfterTimeOut, data) => {
       alterStateAfterTimeOut(array, j, j + 1, count, j === 0, array.length - i);
       count++;
       if (array[j] > array[j + 1]) {
+        alterStateAfterTimeOut(
+          array,
+          j,
+          j + 1,
+          count,
+          j === 0,
+          array.length - i,
+          "yellow"
+        );
+        count++;
         let temp = array[j];
         array[j] = array[j + 1];
         array[j + 1] = temp;
+        alterStateAfterTimeOut(
+          array,
+          j,
+          j + 1,
+          count,
+          j === 0,
+          array.length - i,
+          "yellow"
+        );
+        count++;
         // console.log(arr);
       }
     }

src/helpers/insertionSort.js

@@ -5,13 +5,15 @@ const insertionSort = (alterStateAfterTimeOut, data) => {
     let key = array[i];
     let j = i - 1;
     while (j >= 0 && array[j] > key) {
-      alterStateAfterTimeOut(array, i, j, count);
+      alterStateAfterTimeOut(array, j + 1, j, count, false, 0, "yellow");
       count++;
       array[j + 1] = array[j];
       j--;
+      alterStateAfterTimeOut(array, j + 1, j, count, false, 0, "yellow");
+      count++;
     }
     array[j + 1] = key;
-    alterStateAfterTimeOut(array, -1, j + 1, count, false, -1, "yellow");
+    alterStateAfterTimeOut(array, -1, j + 1, count, false, -1, "orange");
     count++;
   }
   for (let i = 0; i < array.length; i++) {

src/helpers/selectionSort.js

@@ -11,9 +11,13 @@ const selectionSort = (alterStateAfterTimeOut, data) => {
         // console.log(arr);
       }
     }
+    alterStateAfterTimeOut(array, i, index, count, false, 0, "yellow");
+    count++;
     let temp = array[i];
     array[i] = array[index];
     array[index] = temp;
+    alterStateAfterTimeOut(array, i, index, count, false, 0, "yellow");
+    count++;
   }
   alterStateAfterTimeOut(
     array,