thinkswell · PBJI · Oct 9, 2023 · Oct 8, 2023 · Oct 8, 2023 · Oct 8, 2023
diff --git a/SortingVisualizer/Abhineshjha/README.md b/SortingVisualizer/Abhineshjha/README.md
@@ -0,0 +1,39 @@
+# Sorting Visualizer Project Readme
+
+## Overview
+
+This Sorting Visualizer project is a JavaScript-based web application that allows users to visualize various sorting algorithms in action. Sorting algorithms are fundamental in computer science and understanding how they work can be both educational and fun. This project provides a visual representation of sorting algorithms, helping users grasp their inner workings through interactive animations.
+
+![Sorting Visualizer Demo](demo.gif)
+
+## Table of Contents
+
+- [Features](#features)
+- [Demo](#demo)
+- [Getting Started](#getting-started)
+- [Usage](#usage)
+- [Available Sorting Algorithms](#available-sorting-algorithms)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+
+- Visualize sorting algorithms such as Bubble Sort, Merge Sort, Quick Sort, and more.
+- Adjustable array size to demonstrate sorting with different data sets.
+- Customizable sorting speed for better visualization.
+- Clear visualization of the sorting process with color-coded bars.
+- Step-by-step animation of the sorting algorithms.
+- Easy-to-use interface for users to interact with the visualization.
+
+## Demo
+
+Check out the live demo of the Sorting Visualizer: [Sorting Visualizer Demo](https://example.com)
+
+## Getting Started
+
+To get started with this Sorting Visualizer project on your local machine, follow these steps:
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/your-username/sorting-visualizer.git
diff --git a/SortingVisualizer/Abhineshjha/index.html b/SortingVisualizer/Abhineshjha/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Sorting Visualizer</title>
+</head>
+
+<body>
+    <div class="main_container">
+        <button class="title_btn">🌟 Sorting Visualizer 🌟</button>
+        <div id="container"></div>
+        <div>
+            <button class="btn" onClick="init()">Generate Array ✨</button>
+            <button class="btn" onClick="play()">Sort 🔥</button>
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/SortingVisualizer/Abhineshjha/script.js b/SortingVisualizer/Abhineshjha/script.js
@@ -0,0 +1,66 @@
+const n = 9; //number of bars to sort
+const array = [];
+init();
+
+//generate random numbers
+function init() {
+  for (let i = 0; i < n; i++) {
+    array[i] = Math.floor(Math.random() * (11 - 1) + 1);
+  }
+  showBars();
+}
+
+function play() {
+  const copy = [...array];
+  const moves = bubbleSort(copy);
+  animate(moves);
+}
+
+//function for animating the bars
+function animate(moves) {
+  if (moves.length == 0) {
+    showBars();
+    return;
+  }
+  const move = moves.shift();
+  const [i, j] = move.indices;
+  if (move.type == 'swap') {
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  showBars(move);
+  setTimeout(function () {
+    animate(moves);
+  }, 200);
+}
+
+//implement the bubble sort function
+function bubbleSort(array) {
+  const moves = [];
+  do {
+    var swapped = false;
+    for (let i = 1; i < array.length; i++) {
+      moves.push({ indices: [i - 1, i], type: 'comp' }); //we require type swap because we need to differentiate when we are comparing and when we are swapping to show respective move color.
+      if (array[i - 1] > array[i]) {
+        swapped = true;
+        moves.push({ indices: [i - 1, i], type: 'swap' }); //we require type swap because we need to differentiate when we are comparing and when we are swapping to show respective move color.
+        [array[i - 1], array[i]] = [array[i], array[i - 1]];
+      }
+    }
+  } while (swapped);
+  return moves;
+}
+
+//render the bars dynamically in the index html file
+function showBars(move) {
+  container.innerHTML = '';
+  for (let i = 0; i < array.length; i++) {
+    const bar = document.createElement('div');
+    bar.style.height = array[i] * 10 + '%';
+    bar.classList.add('bar');
+    bar.innerHTML = Math.floor(array[i] * 10);
+    if (move && move.indices.includes(i)) {
+      bar.style.backgroundColor = move.type == 'swap' ? 'red' : 'green'; //red if swapping green if comparing
+    }
+    container.appendChild(bar);
+  }
+}
diff --git a/SortingVisualizer/Abhineshjha/style.css b/SortingVisualizer/Abhineshjha/style.css
@@ -0,0 +1,78 @@
+.bar {
+  padding: 10px 12px;
+  display: flex;
+  justify-content: center;
+  width: 25px;
+  background: rgb(224, 81, 172);
+  margin: 3px;
+  border: 3.5px solid rgb(23, 23, 24);
+  color: whitesmoke;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: rgb(70, 68, 68);
+  font-family: 'Montserrat', sans-serif;
+}
+body .main_container {
+  padding: 3rem;
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+body .main_container #container {
+  padding: 5rem 0rem;
+  height: 80%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.btn {
+  border-radius: 30px;
+  font-size: 17px;
+  font-weight: 400;
+  padding: 1rem;
+  margin: 0rem 1rem;
+  border: 0;
+  cursor: pointer;
+  transition: ease-in 0.2s;
+  box-shadow: 0.3rem 0.35rem 0 rgb(23, 23, 24);
+  border: 3.5px solid rgb(23, 23, 24);
+}
+
+.btn:hover {
+  font-size: 15px;
+  color: whitesmoke;
+  background-color: rgb(224, 81, 172);
+  padding: 1rem;
+  box-shadow: 0rem 0rem 0 rgb(23, 23, 24);
+  border: 3.5px solid rgb(23, 23, 24);
+}
+
+.title_btn {
+  border-radius: 30px;
+  font-size: 25px;
+  font-weight: 700;
+  padding: 1rem 4rem;
+  margin: 0rem 1rem;
+  border: 0;
+  transition: ease-in 0.2s;
+  box-shadow: 0.3rem 0.35rem 0 rgb(23, 23, 24);
+  border: 3.5px solid rgb(23, 23, 24);
+  background-color: white;
+}
+
+@media screen and (width <= 400px) {
+  .title_btn {
+    padding: 0.6rem 2rem;
+    font-size: 18px;
+  }
+}