Merge pull request #6 from DSDmark/test

Test

Author: DSDmark

README.md

@@ -6,8 +6,7 @@
 ![GitHub last commit](https://img.shields.io/github/last-commit/DSDmark/TodoList)
 [![pages-build-deployment](https://github.com/DSDmark/TodoList/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/DSDmark/TodoList/actions/workflows/pages/pages-build-deployment)
 
-#  Your First Application 🤟
-## Walcome to Webdev 😊
+# BubbleSort-Visualization
 
 <div>
 
@@ -31,20 +30,20 @@ Once you are done  you can close the application in your terminal to quit the ap
 
 ---
 
-## Try Out TodoList Demo
+## BubbleSort-Visualization
 
 <a href="https://dsdmark.github.io/TodoList/" alt="TodoList Demo">TodoList Demo</a>
 
 </div>
 
-### Todo List
+### BubbleSort-Visualization
 
-![Todo List perview](public/images/perview.gif "Todo List")
+![BubbleSort-Visualization](public/images/perview.gif "BubbleSort-Visualization")
 
 </div>
 
 > If you have any issues with that Application feel free to let me know!
 
-> If you are more interested, check out the collection of [ **CLIsapplications**](https://github.com/DSDmark/CLIsapplications"CLIsapplications").
+> If you are more interested, check out the collection of [ **DSDmark**](https://github.com/DSDmark/BubbleSort-Visualization").
 ---
 

assets/js/index.js

@@ -1,4 +1,5 @@
 const canvas = document.getElementById('cvs')
+const stopButton = document.getElementById('stopbutton')
 const ctx = canvas.getContext('2d')
 const CH = (canvas.height = 300)
 const CW = (canvas.width = 600)
@@ -18,10 +19,14 @@ const BubbleSort = {
     ctx.clearRect(0, 0, CH, CW)
     const lineSpacing = 10
     ctx.lineWidth = 5
+<<<<<<< HEAD
+    for (let j = 1; j < this.seedValue.length; j++) {
+=======
 
     for (let j = 0; j < this.seedValue.length; j++) {
+>>>>>>> 141ad495338db7854c07ee1ae9ffeeb6ebc6f429
       const y = j * lineSpacing
-    ctx.beginPath()
+      ctx.beginPath()
       ctx.moveTo(y, CH)
       ctx.lineTo(y, CH - this.seedValue[j])
       ctx.closePath()
@@ -37,14 +42,15 @@ const BubbleSort = {
     }
   },
   update() {
+
     if (this.seedValue[this.j] > this.seedValue[this.j + 1]) {
       ;[this.seedValue[this.j], this.seedValue[this.j + 1]] = [
         this.seedValue[this.j + 1],
         this.seedValue[this.j],
       ]
       this.sortedLine = this.seedValue[this.j + 1]
     }
-    if (this.i < this.seedValue.length) {
+    if (this.i < this.seedValue.length || isClick) {
       this.j++
       if (this.j >= this.seedValue.length - this.i - 1) {
         this.color = 'red'
@@ -53,7 +59,9 @@ const BubbleSort = {
       }
     } else {
       this.isLoop = false
+      clearInterval()
     }
+
     this.draw()
   },
   startup() {
@@ -63,18 +71,31 @@ const BubbleSort = {
       this.seedValue[this.i] = Math.random() * (CH - 0 + 1) + 0
     }
     this.i = 0
+
+    // Hendling Evnets.
   },
+  stopLoop() {
+          clearInterval();
+           },
 }
 
 // You could use window.requestAnimationFrame as well. but, for simplicity i'm using setInterval.
-
+        let cleaer;
+   stopButton.addEventListener('click',()=>{
+// p
+         //  clearInterval(cleaer);
+   }   )
 function render() {
   BubbleSort.startup()
-  if (BubbleSort.isLoop) {
-    setInterval(() => {
+             if (BubbleSort.isLoop) { 
+
+    cleaer = setInterval(() => {
       BubbleSort.update(BubbleSort.seedValue)
+             
     }, BubbleSort.loopSpeed)
-  }
+                    }else{
+                     console.log("final");
+             } 
 }
 
 render() // calling the main functions.

assets/style/style.css

@@ -1,8 +1,31 @@
 body{
+<<<<<<< HEAD
+        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;
+  width: auto;
+  height:auto;
+} 
+=======
     background-color: gray;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     overflow: hidden;
-}
+}
+>>>>>>> 141ad495338db7854c07ee1ae9ffeeb6ebc6f429

index.html

@@ -8,8 +8,75 @@
     <link rel="stylesheet" href="./assets/style/style.css" />
   </head>
   <body>
+<<<<<<< HEAD
+    <div class="tab">
+      <div class="inputField">
+        <button class="tablinks" id="stopbutton">Stop Sorting</button> <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 />
+        <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>
+        <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="sizeofcanvas">
+          Size of canvas(lenght):<br />
+          <input
+            class="tablinks"
+            id="sizeofcanvas"
+            type="range"
+            min="0"
+            max="100"
+            value="50"
+          /> </label
+        ><br />
+      </div>
+      <canvas id="cvs"></canvas>
+    </div>
+    <!-- The main section when all things will heppening -->
+=======
           <!-- The main section when all things will heppening -->
     <canvas id="cvs"></canvas>
+>>>>>>> 141ad495338db7854c07ee1ae9ffeeb6ebc6f429
     <script src="./assets/js/index.js"></script>
   </body>
 </html>