DSDmark
diff --git a/‎assets/js/.index.js.swn‎ ‎.index.html.swo‎assets/js/.index.js.swn renamed to .index.html.swo
12 KB b/‎assets/js/.index.js.swn‎ ‎.index.html.swo‎assets/js/.index.js.swn renamed to .index.html.swo
12 KB
diff --git a/‎.index.html.swp‎
12 KB b/‎.index.html.swp‎
12 KB
diff --git a/‎assets/js/.index.js.swo‎
0 Bytes b/‎assets/js/.index.js.swo‎
0 Bytes
diff --git a/‎assets/js/index.js‎
Lines changed: 2 additions & 1 deletion b/‎assets/js/index.js‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎assets/style/style.css‎
Lines changed: 21 additions & 7 deletions b/‎assets/style/style.css‎
Lines changed: 21 additions & 7 deletions
diff --git a/‎index.html‎
Lines changed: 58 additions & 2 deletions b/‎index.html‎
Lines changed: 58 additions & 2 deletions
@@ -4,6 +4,8 @@ const CH = (canvas.height = 300)
 const CW = (canvas.width = 600)
 canvas.style.background = 'black'
 
+
+
 const BubbleSort = {
   i: 0,
   j: 0,
@@ -18,7 +20,6 @@ const BubbleSort = {
     ctx.clearRect(0, 0, CH, CW)
     const lineSpacing = 10
     ctx.lineWidth = 5
-          
     for (let j = 0; j < this.seedValue.length; j++) {
       const y = j * lineSpacing
     ctx.beginPath()
 
@@ -1,8 +1,22 @@
 body{
-    background-color: gray;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    overflow: hidden;
-}
+        display:grid;
+        place-items:center;
+        min-height:100vh;
+        background:gray;
+}
+.tab {
+ display:flex;
+  width: auto;
+  height: 300px;
+}
+.inputField{
+ display:flex;
+ align-items:left;
+ padding:3px;
+ flex-direction:column;
+  border: 1px solid #ccc;
+  background-color: #f1f1f1;
+  line-height:1.5rem;
+  width: auto;
+  height:auto;
+} 
@@ -8,8 +8,64 @@
     <link rel="stylesheet" href="./assets/style/style.css" />
   </head>
   <body>
-          <!-- The main section when all things will heppening -->
-    <canvas id="cvs"></canvas>
+    <div class="tab">
+            <div class="inputField">
+      <label for="sizeoflines">
+        Size of lines:<br />
+        <input
+          class="tablinks"
+          type="range"
+          id="sizeoflines"
+          min="0"
+          max="100"
+          value="50"
+        />
+      </label>
+      <label for="numberoflines">
+        Number of lines:<br />
+        <input
+          class="tablinks"
+          id="numberoflines"
+          type="range"
+          min="0"
+          max="100"
+          value="50"
+        />
+      </label>
+             <button
+          class="tablinks"
+          id="stopbutton"
+                   />Stop Sorting</button>       <br />
+      <label for="sizeofcanvas">
+        Size of canvas(lenght):<br />
+        <input
+          class="tablinks"
+          id="sizeofcanvas"
+          type="range"
+          min="0"
+          max="100"
+          value="50"
+        /> </label
+      ><br /> 
+ <label for="sortedlinecolor">
+        Sorted line color:<br />
+        <input
+          class="tablinks"
+          id="sortedlinecolor"
+          value="red"
+                  /> </label><br />
+      <label for="lienescolors">
+        colors of lines:<br />
+        <input
+          class="tablinks"
+          id="linescolors"
+          type="text" value="white"
+                  /> </label
+      ><br /> 
+            </div>
+      <canvas id="cvs"></canvas>
+    </div>
+        <!-- The main section when all things will heppening -->
     <script src="./assets/js/index.js"></script>
   </body>
 </html>