Rajduino · Rajduino · Dec 3, 2019 · Nov 29, 2019 · Nov 29, 2019 · Nov 29, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+demo.html
diff --git a/README.md b/README.md
@@ -3,10 +3,14 @@ A javascript web application to visualise all the algorithms you encounter every
 
 Made with p5.js
 
+## View the App build at
+
+https://rajduino.github.io/Algorithm-Visualiser/index.html
+
 ## Getting Started
 
-Download the ZIP file or Clone this repository from you Command Prompt or Terminal
+Download the ZIP file or Clone this repository from your Command Prompt or Terminal.
 
 ```
-$git clone https://github.com/Rajduino/Visualiser-Project
+$git clone https://github.com/Rajduino/Algorithm-Visualiser.git
 ```
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,60 @@
+body {
+    padding: 30px;
+    margin: 0;
+    text-align: center;
+    font-family: 'Open Sans', serif;
+    color: #868e96;
+}
+
+canvas {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    z-index: -1
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: 'Saira Extra Condensed', serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #343a40;
+}
+
+h1 {
+    font-size: 4rem;
+    line-height: 5rem;
+}
+
+h2 {
+    font-size: 3.5rem;
+}
+
+#btns {
+    margin-top: 150px;
+    text-align: center;
+}
+
+.subheading {
+    text-transform: uppercase;
+    font-weight: 500;
+    font-family: 'Saira Extra Condensed', serif;
+    font-size: 1.35rem
+}
+
+.footer {
+    display: block;
+    padding: 10px;
+    text-align: justify;
+    margin-top: 200px
+}
+
+.footer .text {
+    font-size: 15px;
+    font-style: oblique;
+    text-align: center
+}
diff --git a/index.html b/index.html
@@ -1,14 +1,74 @@
 <!DOCTYPE html>
-<html lang="">
-  <head>
+<html lang="en">
+
+<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>p5.js example</title>
-    <style> body {padding: 0; margin: 0;} </style>
+    <title>Algorithm Visualizer | Project</title>
+    <!--Bootstrap CSS Linking-->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <!--   Adding our custom style sheet from CSS folder-->
+    <link rel="stylesheet" href="./css/style.css" crossorigin="anonymous">
+    <style>
+        /*Write them inside style.css file */
+    </style>
     <script src="p5.js"></script>
     <script src="p5.sound.js"></script>
     <script src="main.js"></script>
-  </head>
-  <body>
-  </body>
-</html>
+    <script src="./js/merge-sort.js"></script>
+</head>
+
+<body>
+    <div class="container">
+
+        <!-- DIV containing heading and sub heading-->
+        <div id="" class="row">
+            <div id="" class="col-md-12">
+                <h1 align="center" id="heading"></h1>
+                <h4 align="center" id="subheading"></h4>
+            </div>
+        </div>
+        <!-- DIV containing all buttons-->
+        <div id="btns" class="row">
+            <div class="col-md-12">
+                <div id="myMenuBtns" class="btn-group btn-group-toggle" data-toggle="buttons">
+                    <label id="sort" class="btn btn-secondary btn-lg">
+                            <input type="radio" name="options"  autocomplete="off" checked> Sorting
+                        </label>
+                    <label id="search" class="btn btn-secondary btn-lg">
+                            <input type="radio" name="options"  autocomplete="off"> Searching
+                        </label>
+                    <label id="tree" class="btn btn-secondary btn-lg">
+                            <input type="radio" name="options"  autocomplete="off"> Tree Travarsal
+                        </label>
+                </div>
+            </div>
+        </div>
+        <!--DIV for all sort page buttons-->
+        <div id="allSortButtons" class="row">
+            <div class="col-md-12">
+                <div id="myMenuBtns" class="btn-group btn-group-toggle" data-toggle="buttons">
+                    <label id="selectionSort" class="btn btn-secondary btn-lg">
+                            <input type="radio" name="options"  autocomplete="off" checked> Selection Sort
+                        </label>
+                    <label id="mergeSort" class="btn btn-secondary btn-lg">
+                            <input type="radio" name="options"  autocomplete="off"> Merge Sort
+                        </label>
+                    <label id="bubbleSort" class="btn btn-secondary btn-lg">
+                            <input type="radio" name="options"  autocomplete="off"> Bubble Sort
+                        </label>
+                </div>
+            </div>
+            <div class="row">
+                <div id="btnForArrayGeneration" class="col-md-12" offset-md-1 style="padding:5px">
+                    <button type="button" class="btn btn-primary btn-lg">Generate Array</button>
+                </div>
+            </div>
+        </div>
+        <div id="firstPageFooter" class="footer" style="text-align: center;">
+            <i class="subheading text">A project by: GROUP 66 | Anirban, Rajdeep, Rudranil, Sayantan, Sanket and Trishit | Team SEAL-6</i>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/js/merge-sort.js b/js/merge-sort.js
@@ -0,0 +1,32 @@
+var unsortedArr = [340, 1, 3, 3, 76, 23, 4, 12, 122, 7642, 646];
+
+function merge(leftArr, rightArr) {
+    var sortedArr = [];
+    while (leftArr.length && rightArr.length) {
+        if (leftArr[0] <= rightArr[0]) {
+            sortedArr.push(leftArr[0]);
+            leftArr = leftArr.slice(1)
+        } else {
+            sortedArr.push(rightArr[0]);
+            rightArr = rightArr.slice(1)
+        }
+    }
+    while (leftArr.length)
+        sortedArr.push(leftArr.shift());
+    while (rightArr.length)
+        sortedArr.push(rightArr.shift());
+    return sortedArr;
+}
+
+function mergesort(arr) {
+    if (arr.length < 2) {
+        return arr;
+    } else {
+        var midpoint = parseInt(arr.length / 2);
+        var leftArr = arr.slice(0, midpoint);
+        var rightArr = arr.slice(midpoint, arr.length);
+        return merge(mergesort(leftArr), mergesort(rightArr));
+    }
+}
+console.log('sorted array=')
+console.log(mergesort(unsortedArr));