diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f68943b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,25 @@
+# Sorting_Visualizer
+
+A web application showcasing the inner workings of sorting algorithms.
+
+Implemented algorithms:
+1) Bubble sort
+2) Selection sort
+3) Insertion sort
+4) Merge sort
+5) Quick sort
+6) Heap sort
+
+Features:
+1) Colored representation of step being executed.
+  1.1) Blue:default
+  1.2) Yellow: Being compared
+  1.3) Red: Identified as in incorrect position and to be moved
+  1.4) Green: In correct position
+2) 3 Controls for visualizations
+  2.1) Speed of visualization (5 speed levels)
+  2.2) Data size ()
+  2.3) Generation of new data (Randomly generate new data).
+4) Time and Space complexity of algorithm being visualized.
+
+Take a look at live version: 
diff --git a/VS_Sorting_Visualizer.code-workspace b/VS_Sorting_Visualizer.code-workspace
new file mode 100644
index 0000000..876a149
--- /dev/null
+++ b/VS_Sorting_Visualizer.code-workspace
@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..dd1d118
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,230 @@
+
+* {
+  margin: 0px;
+  padding: 0px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: large;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+nav {
+  background-color: #3b3a3a;
+  color: white;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 30% 60%;
+      grid-template-columns: 30% 60%;
+  -webkit-column-gap: 10%;
+          column-gap: 10%;
+  padding: 0% 5%;
+}
+
+nav .array-inputs {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 60% 40%;
+      grid-template-columns: 60% 40%;
+  place-content: center;
+  padding: 5% 0%;
+}
+
+nav .array-inputs #a_size {
+  padding: 5% 0%;
+}
+
+nav .array-inputs #a_speed {
+  padding: 5% 0%;
+}
+
+nav .array-inputs #a_generate {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: white;
+  padding: 4% 0% 0% 0%;
+  padding-left: 20%;
+}
+
+nav .array-inputs #a_generate:hover {
+  cursor: pointer;
+}
+
+nav .header_right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+nav .header_right .nav-heading {
+  display: inline-block;
+  font-size: xxx-large;
+  padding: 3% 0%;
+}
+
+nav .header_right .algos{
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  justify-content: center; 
+  padding: 2% 0%;
+
+}
+
+nav .header_right .algos button {
+  background-color: transparent;
+  border: none;
+  color: white;
+  outline: none;
+  padding: 5% 0%;
+  font-size: x-large;
+}
+
+nav .header_right .algos button:hover {
+  background-color: blue;
+  cursor: pointer;
+}
+
+nav .header_right .algos .butt_locked {
+  background-color: transparent;
+  cursor: pointer;
+}
+
+nav .header_right .algos .butt_locked:hover {
+  background-color: transparent;
+  cursor: pointer;
+}
+
+nav .header_right .algos .butt_selected {
+  background-color: white;
+  color: green;
+}
+
+nav .header_right .algos .butt_selected:hover {
+  background-color: white;
+  cursor: pointer;
+}
+
+nav .header_right .algos .butt_unselected:hover {
+  background-color: blue;
+  cursor: pointer;
+}
+
+section {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 20% 60% 20%;
+      grid-template-columns: 20% 60% 20%;
+}
+
+section .Complexity_Containers {
+  margin-top: 20%;
+}
+
+section .Complexity_Containers .Pair_Definitions {
+  margin-top: 20%;
+}
+
+section .Complexity_Containers .Pair_Definitions p {
+  display: inline;
+}
+
+section .Complexity_Containers .Pair_Definitions p.Sub_Heading {
+  font-size: medium;
+  text-transform: none;
+}
+
+section #Info_Cont1 {
+  padding: 20% 10%;
+}
+
+section #Info_Cont1 h3 {
+  text-decoration: underline;
+}
+
+section #array_container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  height: 70vh;
+}
+
+section #Info_Cont2 {
+  padding: 20% 10%;
+}
+
+section #Info_Cont2 h3 {
+  text-decoration: underline;
+}
+
+.hide {
+  display: none;
+}
+
+
+@media (max-width: 480px)
+{
+    nav {
+        grid-template-columns: 100%;
+        text-align: center;
+    }
+
+    nav .header_right .nav-heading {
+        font-size: xx-large;
+    }
+
+    nav .header_right .algos {
+        grid-template-columns: 100%;
+    }
+
+    section {
+        grid-template-columns: 100%;
+        padding: 10%;
+    }
+
+    #array_container {
+        height: 50vh;
+    }
+}
+
+@media (min-width: 481px) and (max-width: 1250px)
+{
+    nav {
+        grid-template-columns: 40% 60%;
+        font-size: medium;
+    }
+
+    nav .header_right .nav-heading {
+        font-size: x-large;
+    }
+
+    section {
+        grid-template-columns: 10% 80% 10%;
+    }
+
+    #array_container {
+        height: 60vh;
+    }
+}
+
+@media (min-width: 1251px) 
+{
+    nav {
+        grid-template-columns: 30% 60%;
+        font-size: large;
+    }
+
+    section {
+        grid-template-columns: 20% 60% 20%;
+    }
+
+    #array_container {
+        height: 70vh;
+    }
+}
+
+
diff --git a/css/style.css.map b/css/style.css.map
new file mode 100644
index 0000000..cbe0ab4
--- /dev/null
+++ b/css/style.css.map
@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "../Sorting_Visualizer/style.scss"
+    ],
+    "names": [],
+    "file": "style.css"
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..dc41052
--- /dev/null
+++ b/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+
+
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sorting Visualizer</title>
+
+    <link rel="stylesheet" href="./css/style.css">
+
+</head>
+<body>
+
+    <header>
+        <nav>
+            <div class="array-inputs">
+                <p>Size of the array:</p>
+                <input id="a_size" type="range" min=20 max=150 step=1 value=80>
+                <p>Speed of the algorithm:</p>
+                <input id="a_speed" type="range" min=1 max=5 step=1 value=4>
+                <button id="a_generate">Generate New Array!</button>
+            </div>
+
+            <div class="header_right">
+                <p class="nav-heading">Sorting visualizer</p>
+
+                <div class="algos">
+                    <button >Bubble</button>
+                    <button >Selection</button>
+                    <button >Insertion</button>
+                    <button >Merge</button>
+                    <button >Quick</button>
+                    <button style="margin-right: 0px;">Heap</button>
+                </div>
+            </div>
+
+        </nav>
+    </header>
+
+    <section>
+
+        <div id="Info_Cont1">
+
+            <h3>TIME COMPLEXITY</h3>
+
+            <div class="Complexity_Containers" id="Time_Complexity_Types_Container">
+
+                <div class="Pair_Definitions">
+                    <p class="Sub_Heading">Worst case:</p>
+                    <p id="Time_Worst"></p>
+                </div>
+                
+                <div class="Pair_Definitions">
+                    <p class="Sub_Heading">Average case:</p>
+                    <p id="Time_Average"></p>
+                </div>
+                
+                <div class="Pair_Definitions">
+                    <p class="Sub_Heading">Best case:</p>
+                    <p id="Time_Best"></p>
+                </div>
+
+            </div>
+
+        </div>
+
+        <div id="array_container">
+            
+        </div>
+
+        <div id="Info_Cont2">
+
+            <h3>SPACE COMPLEXITY</h3>
+
+            <div class="Complexity_Containers" id="Space_Complexity_Types_Container">
+
+                <div class="Pair_Definitions">
+                    <p class="Sub_Heading">Worst case:</p>
+                    <p id="Space_Worst"></p>
+                </div>
+                
+            </div>
+
+        </div>
+
+    </section>
+
+    <footer>
+
+    </footer>
+
+    <script src="./scripts/main.js"></script>   
+    <script src="./scripts/visualizations.js"></script>  
+
+    <script src="./scripts/bubble_sort.js"></script>
+    <script src="./scripts/selection_sort.js"></script>
+    <script src="./scripts/insertion_sort.js"></script>
+    <script src="./scripts/merge_sort.js"></script>
+    <script src="./scripts/quick_sort.js"></script>
+    <script src="./scripts/heap_sort.js"></script>
+</body>
+
+
+
+</html>
\ No newline at end of file
diff --git a/scripts/bubble_sort.js b/scripts/bubble_sort.js
new file mode 100644
index 0000000..827fe50
--- /dev/null
+++ b/scripts/bubble_sort.js
@@ -0,0 +1,40 @@
+
+function Bubble()
+{
+    //Setting Time complexities
+    document.getElementById("Time_Worst").innerText="O(N^2)";
+    document.getElementById("Time_Average").innerText="Θ(N^2)";
+    document.getElementById("Time_Best").innerText="Ω(N)";
+
+    //Setting Space complexity
+    document.getElementById("Space_Worst").innerText="O(1)";
+
+    c_delay=0;
+
+    for(var i=0;i<array_size-1;i++)
+    {
+        for(var j=0;j<array_size-i-1;j++)
+        {
+            div_update(divs[j],div_sizes[j],"yellow");//Color update
+
+            if(div_sizes[j]>div_sizes[j+1])
+            {
+                div_update(divs[j],div_sizes[j], "red");//Color update
+                div_update(divs[j+1],div_sizes[j+1], "red");//Color update
+
+                var temp=div_sizes[j];
+                div_sizes[j]=div_sizes[j+1];
+                div_sizes[j+1]=temp;
+
+                div_update(divs[j],div_sizes[j], "red");//Height update
+                div_update(divs[j+1],div_sizes[j+1], "red");//Height update
+            }
+            div_update(divs[j],div_sizes[j], "blue");//Color updat
+        }
+        div_update(divs[j],div_sizes[j], "green");//Color update
+    }
+    div_update(divs[0],div_sizes[0], "green");//Color update
+
+    enable_buttons();
+}
+
diff --git a/scripts/heap_sort.js b/scripts/heap_sort.js
new file mode 100644
index 0000000..74f67a1
--- /dev/null
+++ b/scripts/heap_sort.js
@@ -0,0 +1,93 @@
+
+function Heap()
+{
+    //Setting Time complexities
+    document.getElementById("Time_Worst").innerText="O(N log N)";
+    document.getElementById("Time_Average").innerText="Θ(N log N)";
+    document.getElementById("Time_Best").innerText="Ω(N log N)";
+
+    //Setting Space complexity
+    document.getElementById("Space_Worst").innerText="O(1)";
+
+    c_delay=0;
+
+    heap_sort();
+    
+    enable_buttons();
+}
+
+function swap(i,j)
+{
+    div_update(divs[i],div_sizes[i],"red");//Color update
+    div_update(divs[j],div_sizes[j],"red");//Color update
+
+    var temp=div_sizes[i];
+    div_sizes[i]=div_sizes[j];
+    div_sizes[j]=temp;
+
+    div_update(divs[i],div_sizes[i],"red");//Height update
+    div_update(divs[j],div_sizes[j],"red");//Height update
+
+    div_update(divs[i],div_sizes[i],"blue");//Color update
+    div_update(divs[j],div_sizes[j],"blue");//Color update
+}
+
+function max_heapify(n,i)
+{
+    var largest=i;
+    var l=2*i+1;
+    var r=2*i+2;
+
+    if(l<n && div_sizes[l]>div_sizes[largest])
+    {
+        if(largest!=i)
+        {
+            div_update(divs[largest],div_sizes[largest],"blue");//Color update
+        }
+
+        largest=l;
+
+        div_update(divs[largest],div_sizes[largest],"red");//Color update
+    }
+
+    if(r<n && div_sizes[r]>div_sizes[largest])
+    {
+        if(largest!=i)
+        {
+            div_update(divs[largest],div_sizes[largest],"blue");//Color update
+        }
+
+        largest=r;
+
+        div_update(divs[largest],div_sizes[largest],"red");//Color update
+    }
+
+    if(largest!=i)
+    {
+        swap(i,largest);
+
+        max_heapify(n,largest);
+    }
+}
+
+function heap_sort()
+{
+    for(var i=Math.floor(array_size/2)-1;i>=0;i--)
+    {
+        max_heapify(array_size,i);
+    }
+
+    for(var i=array_size-1;i>0;i--)
+    {
+        swap(0,i);
+        div_update(divs[i],div_sizes[i],"green");//Color update
+        div_update(divs[i],div_sizes[i],"yellow");//Color update
+
+        max_heapify(i,0);
+
+        div_update(divs[i],div_sizes[i],"blue");//Color update
+        div_update(divs[i],div_sizes[i],"green");//Color update
+    }
+    div_update(divs[i],div_sizes[i],"green");//Color update
+}
+
diff --git a/scripts/insertion_sort.js b/scripts/insertion_sort.js
new file mode 100644
index 0000000..5d3ea86
--- /dev/null
+++ b/scripts/insertion_sort.js
@@ -0,0 +1,53 @@
+
+
+function Insertion()
+{
+    //Setting Time complexities
+    document.getElementById("Time_Worst").innerText="O(N^2)";
+    document.getElementById("Time_Average").innerText="Θ(N^2)";
+    document.getElementById("Time_Best").innerText="Ω(N)";
+
+    //Setting Space complexity
+    document.getElementById("Space_Worst").innerText="O(1)";
+
+    c_delay=0;
+
+    for(var j=0;j<array_size;j++)
+    {
+        div_update(divs[j],div_sizes[j],"yellow");//Color update
+
+        var key= div_sizes[j];
+        var i=j-1;
+        while(i>=0 && div_sizes[i]>key)
+        {
+            div_update(divs[i],div_sizes[i],"red");//Color update
+            div_update(divs[i+1],div_sizes[i+1],"red");//Color update
+
+            div_sizes[i+1]=div_sizes[i];
+
+            div_update(divs[i],div_sizes[i],"red");//Height update
+            div_update(divs[i+1],div_sizes[i+1],"red");//Height update
+    
+            div_update(divs[i],div_sizes[i],"blue");//Color update
+            if(i==(j-1))
+            {
+                div_update(divs[i+1],div_sizes[i+1],"yellow");//Color update
+            }
+            else
+            {
+                div_update(divs[i+1],div_sizes[i+1],"blue");//Color update
+            }
+            i-=1;
+        }
+        div_sizes[i+1]=key;
+
+        for(var t=0;t<j;t++)
+        {
+            div_update(divs[t],div_sizes[t],"green");//Color update
+        }
+    }
+    div_update(divs[j-1],div_sizes[j-1],"green");//Color update
+
+    enable_buttons();
+}
+
diff --git a/scripts/main.js b/scripts/main.js
new file mode 100644
index 0000000..221029a
--- /dev/null
+++ b/scripts/main.js
@@ -0,0 +1,84 @@
+
+var inp_as=document.getElementById('a_size');
+var array_size=inp_as.value;
+var inp_gen=document.getElementById("a_generate");
+var inp_aspeed=document.getElementById("a_speed");
+//var array_speed=document.getElementById('a_speed').value;
+
+var butts_algos=document.querySelectorAll(".algos button");
+
+var div_sizes=[];
+var divs=[];
+var margin_size;
+var cont=document.getElementById("array_container");
+cont.style="flex-direction:row";
+
+//Array generation and updation.
+
+inp_gen.addEventListener("click",generate_array);
+inp_as.addEventListener("input",update_array_size);
+
+function generate_array()
+{
+    cont.innerHTML="";
+
+    for(var i=0;i<array_size;i++)
+    {
+        div_sizes[i]=Math.floor(Math.random() * 0.5*(inp_as.max - inp_as.min) ) + 10;
+        divs[i]=document.createElement("div");
+        cont.appendChild(divs[i]);
+        margin_size=0.1;
+        divs[i].style=" margin:0% " + margin_size + "%; background-color:blue; width:" + (100/array_size-(2*margin_size)) + "%; height:" + (div_sizes[i]) + "%;";
+    }
+}
+
+function update_array_size()
+{
+    array_size=inp_as.value;
+    generate_array();
+}
+
+window.onload=update_array_size();
+
+//Running the appropriate algorithm.
+for(var i=0;i<butts_algos.length;i++)
+{
+    butts_algos[i].addEventListener("click",runalgo);
+}
+
+function disable_buttons()
+{
+    for(var i=0;i<butts_algos.length;i++)
+    {
+        butts_algos[i].classList=[];
+        butts_algos[i].classList.add("butt_locked");
+
+        butts_algos[i].disabled=true;
+        inp_as.disabled=true;
+        inp_gen.disabled=true;
+        inp_aspeed.disabled=true;
+    }
+}
+
+function runalgo()
+{
+    disable_buttons();
+
+    this.classList.add("butt_selected");
+    switch(this.innerHTML)
+    {
+        case "Bubble":Bubble();
+                        break;
+        case "Selection":Selection_sort();
+                        break;
+        case "Insertion":Insertion();
+                        break;
+        case "Merge":Merge();
+                        break;
+        case "Quick":Quick();
+                        break;
+        case "Heap":Heap();
+                        break;
+    }
+}
+
diff --git a/scripts/merge_sort.js b/scripts/merge_sort.js
new file mode 100644
index 0000000..6726f25
--- /dev/null
+++ b/scripts/merge_sort.js
@@ -0,0 +1,69 @@
+
+function Merge()
+{
+    //Setting Time complexities
+    document.getElementById("Time_Worst").innerText="O(N log N)";
+    document.getElementById("Time_Average").innerText="Θ(N log N)";
+    document.getElementById("Time_Best").innerText="Ω(N log N)";
+
+    //Setting Space complexity
+    document.getElementById("Space_Worst").innerText="O(N)";
+
+    c_delay=0;
+
+    merge_partition(0,array_size-1);
+
+    enable_buttons();
+}
+
+function merge_sort(start,mid,end)
+{
+    var p=start,q=mid+1;
+
+    var Arr=[],k=0;
+
+    for(var i=start; i<=end; i++)
+    {
+        if(p>mid)
+        {
+            Arr[k++]=div_sizes[q++];
+            div_update(divs[q-1],div_sizes[q-1],"red");//Color update
+        }
+        else if(q>end)
+        {
+            Arr[k++]=div_sizes[p++];
+            div_update(divs[p-1],div_sizes[p-1],"red");//Color update
+        }
+        else if(div_sizes[p]<div_sizes[q])
+        {
+            Arr[k++]=div_sizes[p++];
+            div_update(divs[p-1],div_sizes[p-1],"red");//Color update
+        }
+        else
+        {
+            Arr[k++]=div_sizes[q++];
+            div_update(divs[q-1],div_sizes[q-1],"red");//Color update
+        }
+    }
+
+    for(var t=0;t<k;t++)
+    {
+        div_sizes[start++]=Arr[t];
+        div_update(divs[start-1],div_sizes[start-1],"green");//Color update
+    }
+}
+
+function merge_partition(start,end)
+{
+    if(start < end)
+    {
+        var mid=Math.floor((start + end) / 2);
+        div_update(divs[mid],div_sizes[mid],"yellow");//Color update
+
+        merge_partition(start,mid);
+        merge_partition(mid+1,end);
+
+        merge_sort(start,mid,end);
+    }
+}
+
diff --git a/scripts/quick_sort.js b/scripts/quick_sort.js
new file mode 100644
index 0000000..3553fbd
--- /dev/null
+++ b/scripts/quick_sort.js
@@ -0,0 +1,76 @@
+
+
+function Quick()
+{
+    //Setting Time complexities
+    document.getElementById("Time_Worst").innerText="O(N^2)";
+    document.getElementById("Time_Average").innerText="Θ(N log N)";
+    document.getElementById("Time_Best").innerText="Ω(N log N)";
+
+    //Setting Space complexity
+    document.getElementById("Space_Worst").innerText="O(log N)";
+
+    c_delay=0;
+
+    quick_sort(0,array_size-1);
+
+    enable_buttons();
+}
+
+function quick_partition (start, end)
+{
+    var i = start + 1;
+    var piv = div_sizes[start] ;//make the first element as pivot element.
+    div_update(divs[start],div_sizes[start],"yellow");//Color update
+
+        for(var j =start + 1; j <= end ; j++ )
+        {
+            //re-arrange the array by putting elements which are less than pivot on one side and which are greater that on other.
+            if (div_sizes[ j ] < piv)
+            {
+                div_update(divs[j],div_sizes[j],"yellow");//Color update
+
+                div_update(divs[i],div_sizes[i],"red");//Color update
+                div_update(divs[j],div_sizes[j],"red");//Color update
+
+                var temp=div_sizes[i];
+                div_sizes[i]=div_sizes[j];
+                div_sizes[j]=temp;
+
+                div_update(divs[i],div_sizes[i],"red");//Height update
+                div_update(divs[j],div_sizes[j],"red");//Height update
+
+                div_update(divs[i],div_sizes[i],"blue");//Height update
+                div_update(divs[j],div_sizes[j],"blue");//Height update
+
+                i += 1;
+            }
+    }
+    div_update(divs[start],div_sizes[start],"red");//Color update
+    div_update(divs[i-1],div_sizes[i-1],"red");//Color update
+    
+    var temp=div_sizes[start];//put the pivot element in its proper place.
+    div_sizes[start]=div_sizes[i-1];
+    div_sizes[i-1]=temp;
+
+    div_update(divs[start],div_sizes[start],"red");//Height update
+    div_update(divs[i-1],div_sizes[i-1],"red");//Height update
+
+    for(var t=start;t<=i;t++)
+    {
+        div_update(divs[t],div_sizes[t],"green");//Color update
+    }
+
+    return i-1;//return the position of the pivot
+}
+
+function quick_sort (start, end )
+{
+    if( start < end )
+    {
+        //stores the position of pivot element
+        var piv_pos = quick_partition (start, end ) ;     
+        quick_sort (start, piv_pos -1);//sorts the left side of pivot.
+        quick_sort (piv_pos +1, end) ;//sorts the right side of pivot.
+    }
+ }
diff --git a/scripts/selection_sort.js b/scripts/selection_sort.js
new file mode 100644
index 0000000..ca57102
--- /dev/null
+++ b/scripts/selection_sort.js
@@ -0,0 +1,56 @@
+
+
+function Selection_sort()
+{
+    //Setting Time complexities
+    document.getElementById("Time_Worst").innerText="O(N^2)";
+    document.getElementById("Time_Average").innerText="Θ(N^2)";
+    document.getElementById("Time_Best").innerText="Ω(N^2)";
+
+    //Setting Space complexity
+    document.getElementById("Space_Worst").innerText="O(1)";
+
+    c_delay=0;
+
+    for(var i=0;i<array_size-1;i++)
+    {
+        div_update(divs[i],div_sizes[i],"red");//Color update
+
+        index_min=i;
+
+        for(var j=i+1;j<array_size;j++)
+        {
+            div_update(divs[j],div_sizes[j],"yellow");//Color update
+
+            if(div_sizes[j]<div_sizes[index_min])
+            {
+                if(index_min!=i)
+                {
+                    div_update(divs[index_min],div_sizes[index_min],"blue");//Color update
+                }
+                index_min=j;
+                div_update(divs[index_min],div_sizes[index_min],"red");//Color update
+            }
+            else
+            {
+                div_update(divs[j],div_sizes[j],"blue");//Color update
+            }
+        }
+        
+        if(index_min!=i)
+        {
+            var temp=div_sizes[index_min];
+            div_sizes[index_min]=div_sizes[i];
+            div_sizes[i]=temp;
+
+            div_update(divs[index_min],div_sizes[index_min],"red");//Height update
+            div_update(divs[i],div_sizes[i],"red");//Height update
+            div_update(divs[index_min],div_sizes[index_min],"blue");//Color update
+        }
+        div_update(divs[i],div_sizes[i],"green");//Color update
+    }
+    div_update(divs[i],div_sizes[i],"green");//Color update
+
+    enable_buttons();
+}
+
diff --git a/scripts/visualizations.js b/scripts/visualizations.js
new file mode 100644
index 0000000..d898fb5
--- /dev/null
+++ b/scripts/visualizations.js
@@ -0,0 +1,51 @@
+
+var speed=1000;
+
+inp_aspeed.addEventListener("input",vis_speed);
+
+function vis_speed()
+{
+    var array_speed=inp_aspeed.value;
+    switch(parseInt(array_speed))
+    {
+        case 1: speed=1;
+                break;
+        case 2: speed=10;
+                break;
+        case 3: speed=100;
+                break;
+        case 4: speed=1000;
+                break;
+        case 5: speed=10000;
+                break;
+    }
+    
+    delay_time=10000/(Math.floor(array_size/10)*speed);        //Decrease numerator to increase speed.
+}
+
+var delay_time=10000/(Math.floor(array_size/10)*speed);        //Decrease numerator to increase speed.
+var c_delay=0;//This is updated ov every div change so that visualization is visible.
+
+function div_update(cont,height,color)
+{
+    window.setTimeout(function(){
+        cont.style=" margin:0% " + margin_size + "%; width:" + (100/array_size-(2*margin_size)) + "%; height:" + height + "%; background-color:" + color + ";";
+    },c_delay+=delay_time);
+}
+
+function enable_buttons()
+{
+    window.setTimeout(function(){
+        for(var i=0;i<butts_algos.length;i++)
+        {
+            butts_algos[i].classList=[];
+            butts_algos[i].classList.add("butt_unselected");
+
+            butts_algos[i].disabled=false;
+            inp_as.disabled=false;
+            inp_gen.disabled=false;
+            inp_aspeed.disabled=false;
+        }
+    },c_delay+=delay_time);
+}
+
diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000..dd10e7d
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,221 @@
+
+
+$no_algos: 6;
+
+*
+{
+    margin: 0px;
+    padding: 0px;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: large;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+nav
+{
+    background-color: rgb(59, 58, 58);
+    color: white;
+    display: grid;
+    grid-template-columns: 30% 60%;
+    column-gap: 10%;
+    padding: 0% 5%;
+    .array-inputs
+    {
+        display: grid;
+        grid-template-columns: 60% 40%;
+        place-content: center;
+        padding: 5% 0%;
+        
+        #a_size
+        {
+            padding: 5% 0%;
+        }
+        #a_speed
+        {
+            padding: 5% 0%;
+        }
+        #a_generate
+        {
+            background-color: transparent;
+            border: none;
+            outline: none;
+            color: white;
+            padding: 4% 0% 0% 0%;
+            padding-left: 20%;
+            &:hover
+            {
+                cursor: pointer;
+            }
+        }
+    }
+    .header_right
+    {
+        display: flex;
+        flex-direction: column;
+
+        .nav-heading
+        {
+            display: inline-block;
+            //text-align: center;
+            font-size: xxx-large;
+            padding: 3% 0%;
+        }
+        .algos
+        {
+            display: grid;
+            grid-template-columns: repeat($no_algos,(100%/$no_algos));
+            place-content: center;
+            padding: 2% 0%;
+            button
+            {
+                background-color: transparent;
+                border: none;
+                color: white;
+                outline: none;
+                padding: 5% 0%;
+                font-size: x-large;
+                &:hover
+                {
+                    background-color: blue;
+                    cursor: pointer;
+                }
+            }
+
+            .butt_locked
+            {
+                background-color: transparent;
+                cursor: pointer;
+                &:hover
+                {
+                    background-color: transparent;
+                    cursor: pointer;
+                }
+            }
+            .butt_selected
+            {
+                background-color: white;
+                color:green;
+                &:hover
+                {
+                    background-color: white;
+                    cursor: pointer;
+                }
+            }
+            .butt_unselected
+            {
+                &:hover
+                {
+                    background-color: blue;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+}
+
+section
+{
+    display: grid;
+    grid-template-columns: 20% 60% 20%;
+
+    .Complexity_Containers {
+
+        margin-top: 20%;
+
+        .Pair_Definitions {
+
+            margin-top: 20%;
+
+            p {
+                display: inline;
+            }
+
+            p.Sub_Heading {
+                font-size:medium;
+                text-transform: none;
+            }
+
+        }
+
+    }
+
+    #Info_Cont1
+    {
+        padding: 20% 10%;
+
+        h3 {
+            text-decoration: underline;
+        }
+        
+    }
+    #array_container
+    {
+        display: flex;
+        width: 100%;
+        height: 70vh;
+    }
+    #Info_Cont2
+    {
+        padding: 20% 10%;
+
+        h3 {
+            text-decoration: underline;
+        }
+
+    }
+}
+
+.hide
+{
+    display: none;
+}
+
+@media (max-width: 480px) //Mobiles
+{
+    nav {
+        grid-template-columns: 100%;
+        text-align: center;
+    }
+
+    section {
+        grid-template-columns: 100%;
+        padding: 10%;
+    }
+
+    #array_container {
+        height: 50vh;
+    }
+}
+
+@media (min-width: 481px) and (max-width: 1250px) //Tablets
+{
+    nav {
+        grid-template-columns: 30% 60%;
+        font-size: medium;
+    }
+
+    section {
+        grid-template-columns: 10% 80% 10%;
+    }
+
+    #array_container {
+        height: 60vh;
+    }
+}
+
+@media (min-width: 1251px) //Laptops and up
+{
+    nav {
+        grid-template-columns: 30% 60%;
+        font-size: large;
+    }
+
+    section {
+        grid-template-columns: 20% 60% 20%;
+    }
+
+    #array_container {
+        height: 70vh;
+    }
+}