debug start button & performace improvments

Author: amirallami-code

README.md

@@ -1,4 +1,34 @@
-## Selective Sorting Algorithm
-Selection sort is a simple sorting algorithm. This sorting algorithm is a comparison-based algorithm in which the list is divided into two parts:
-the sorted part at the left end and the unsorted part at the right end. 
-Initially, the sorted part is empty and the unsorted part is the whole list, in this code, each part is considered as an array.
+## What is an Algorithm?
+An algorithm is a set of instructions or rules that guide the computer or software in performing a particular task or solving a problem 1.
+
+## What is Selection Sorting Algorithm and How Does it Help Us?
+Selection sort is an in-place comparison-based algorithm that divides the list into two parts, the sorted part on the left and the unsorted part on the right . It works by repeatedly selecting the smallest (or largest) element from the unsorted portion of the list and moving it to the sorted portion of the list .
+
+Selection sort has several advantages over other sorting algorithms. It is simple to understand and implement, requires no additional memory space, and performs well on small lists . However, it is not suitable for large lists as its time complexity is O(n²) .
+
+
+## Preview
+go to this link and see the preview of this project online
+
+https://selection-sorting-algorithm.vercel.app
+
+## Installation
+To install this project, simply clone the repository and open the index.html file in your web browser.
+```bash
+  git clone https://github.com/amirallami-code/selection-sorting-algorithm
+```
+
+## License
+This project does not have any license.
+
+## Usage
+To use this project and see how it works to sort our numbers, we should type a number in the input field that reads `Enter your number` and click on the `Add Number` button to add our number to the basket of numbers that are not sorted (`your numbers` section). When you have typed all of your numbers and added them to the basket, click on the `Start Sorting` button. The result will appear in the `After Sorting` section, where you can see that your numbers are sorted!
+
+## References
+- https://www.geeksforgeeks.org/selection-sort/
+- https://www.simplilearn.com/tutorials/data-structure-tutorial/selection-sort-algorithm
+
+## Contact Information
+If you have any questions or concerns about this project, please contact us at amirallami.dev@gmail.com
+
+I hope this helps! Let me know if you have any other questions.

index.html

@@ -11,16 +11,27 @@
     <div class="text-div">
       <h2>Selective Sorting</h2>
       <p>Sort a list of numbers</p>
+<<<<<<< HEAD
       <p>
         write your number, add it to the list of unsorted entries <br />
         and click on the "Start sorting" button!
+=======
+      <p class="description">
+        HOW TO START: write your number, push it to the basket below,<br />
+        and click the "start sorting" button to start(or press enter)!
+>>>>>>> 0cc9f2281468d906974b94204367c2cebec1de7f
       </p>
       <div>
         <input type="number" placeholder="Enter your number" id="input" />
         <button type="button" id="button1">add number</button>
         <div>
+<<<<<<< HEAD
           <button type="button" id="button2" disabled>start sorting</button>
           <p id="error">enter the correct value!</p>
+=======
+          <button type="button" id="button2">start sorting</button>
+          <p id="error">enter correct value!</p>
+>>>>>>> 0cc9f2281468d906974b94204367c2cebec1de7f
         </div>
       </div>
       <div class="wrapper">
@@ -31,7 +42,7 @@ <h2>Selective Sorting</h2>
           </ul>
         </div>
         <div class="Before-After">
-          <p>After Sorting</p>
+          <p>Your Numbers After Sorting</p>
           <ul class="After">
             ---
           </ul>

js/app.js

@@ -11,10 +11,12 @@ const resetBtn = $.querySelector('#reset')
 let numbers = []
 
 addNumberBtn.addEventListener('click', () => {
+    errorElem.style.opacity = '0'
     pushNumberToDom()
 })
 
 inputElem.addEventListener('keypress', event => {
+    errorElem.style.opacity = '0'
     if (event.key === 'Enter') {
         pushNumberToDom()
     }
@@ -52,16 +54,26 @@ const findSmallest = arr => {
 }
 
 const selectionSort = arr => {
-    newArr = []
+    if (numbers.length > 0) {
+        newArr = []
 
-    for (let i = 0; arr.length != 0; i++) {
-        smallest = findSmallest(arr)
-        newArr.push(smallest)
-        smallestIndex = arr.findIndex(num => { return num === smallest })
-        arr.splice(smallestIndex, 1)
+        for (let i = 0; arr.length != 0; i++) {
+            smallest = findSmallest(arr)
+            newArr.push(smallest)
+            smallestIndex = arr.findIndex(num => { return num === smallest })
+            arr.splice(smallestIndex, 1)
+        }
+        afterGenerator(newArr)
+        errorElem.style.opacity = '0'
+    } else {
+        errorElem.style.opacity = '1'
+        errorElem.innerHTML = "basket is empty, add numbers for start!"
     }
+<<<<<<< HEAD
     afterGenerator(newArr)
     errorElem.style.display = 'none'
+=======
+>>>>>>> 0cc9f2281468d906974b94204367c2cebec1de7f
 }
 
 const afterGenerator = newArr => {

style.css

@@ -26,6 +26,7 @@ button {
   width: 100px;
   height: 30px;
   border-style: none;
+  cursor: pointer;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -74,6 +75,10 @@ li {
   padding: 35px;
   row-gap: 10px;
 }
+.description {
+  padding: 0.5rem 0 1.5rem 0;
+  text-align: center;
+}
 .wrapper {
   padding-top: 20px;
 }