├── LICENSE
├── README.md
├── assets
    └── algorithm-animation.gif
├── images
    └── demo.jpg
├── index.html
├── js
    └── app.js
└── style.css


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 amirhossein allami
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Selection Sort Algorithm
  2 | 
  3 | ![Algorithm Demo](images/demo.jpg)
  4 | 
  5 | [![MIT License](https://img.shields.io/badge/License-MIT-blue)](https://opensource.org/licenses/MIT)
  6 | ![Last Update](https://img.shields.io/github/last-commit/amirallami-code/selection-sorting-algorithm?style=flat&color=blue)
  7 | [![Stars](https://img.shields.io/github/stars/amirallami-code/selection-sorting-algorithm?style=flat&color=yellow)](https://github.com/amirallami-code/selection-sorting-algorithm/)
  8 | ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen)
  9 | ![Contributions Welcome](https://img.shields.io/badge/Contributions-welcome-brightgreen)
 10 | 
 11 | An interactive demonstration of the Selection Sort algorithm.
 12 | 
 13 | ## Table of Contents
 14 | - [Overview](#overview)
 15 | - [What is Selection Sort?](#what-is-selection-sort)
 16 | - [Features](#features)
 17 | - [Demo](#demo)
 18 | - [Usage](#usage)
 19 | - [Installation](#installation)
 20 | - [Contributing](#contributing)
 21 | - [License](#license)
 22 | - [Contact](#contact)
 23 | - [References](#references)
 24 | 
 25 | ## Overview
 26 | 
 27 | This project provides a visual and interactive implementation of the Selection Sort algorithm, designed to help users understand how this sorting method works in practice.
 28 | 
 29 | ## What is Selection Sort?
 30 | 
 31 | Selection Sort is an in-place comparison-based algorithm that divides the input list into two parts:
 32 | 1. A sorted portion on the left
 33 | 2. An unsorted portion on the right
 34 | 
 35 | The algorithm repeatedly selects the smallest (or largest) element from the unsorted portion and moves it to the end of the sorted portion.
 36 | 
 37 | <p align="center">
 38 |   <img width="750" height="auto" src="assets/algorithm-animation.gif">
 39 | </p>
 40 | 
 41 | <div align="center">
 42 |       <a href="https://youtu.be/kPRA0W1kECg?si=VhbgKEH0BB6uqjTQ">GIF Reference</a>
 43 | </div>
 44 | 
 45 | ### Advantages
 46 | - Simple to understand and implement
 47 | - Performs well on small lists
 48 | - Requires no additional memory space
 49 | 
 50 | ### Limitations
 51 | - Not suitable for large datasets due to O(n²) time complexity
 52 | 
 53 | ## Features
 54 | 
 55 | - Interactive sorting visualization
 56 | - Custom number input
 57 | - Step-by-step sorting process
 58 | - Before and after comparison
 59 | 
 60 | ## Demo
 61 | 
 62 | Experience the algorithm in action: [Selection Sort Demo](https://selection-sorting-algorithm.vercel.app)
 63 | 
 64 | ## Usage
 65 | 
 66 | 1. Enter a number in the "Enter your number" input field.
 67 | 2. Click "Add Number" to add it to the unsorted list.
 68 | 3. Repeat steps 1-2 to add more numbers.
 69 | 4. Click "Start Sorting" to begin the sorting process.
 70 | 5. Observe the sorted result in the "After Sorting" section.
 71 | 
 72 | ## Installation 
 73 | 
 74 | Clone the repository and open `index.html` in your web browser: 
 75 | 
 76 | ```bash 
 77 |       git clone https://github.com/amirallami-code/selection-sorting-algorithm.git cd selection-sorting-algorithm
 78 |  ```
 79 | 
 80 | ## Contributing
 81 | 
 82 | We enthusiastically welcome contributions! To contribute:
 83 |  1. Fork the project.
 84 |  2. Create your feature branch (`git checkout -b feature/AmazingFeature`).
 85 |  3. Commit your changes (`git commit -m 'Add some AmazingFeature'`).
 86 |  4. Push to the branch (`git push origin feature/AmazingFeature`).
 87 |  5. Open a pull request.
 88 | 
 89 | ## License
 90 | 
 91 | This project is currently under the MIT license. For more information, see the [LICENSE](LICENSE) file.
 92 | 
 93 | 
 94 | ## Contact
 95 | 
 96 | For questions or feedback, please contact:
 97 | 
 98 | Amirhossein Allami - [amirallami.dev@gmail.com](mailto:amirallami.dev@gmail.com)
 99 | 
100 | Project Link: [https://github.com/amirallami-code/selection-sorting-algorithm](https://github.com/amirallami-code/selection-sorting-algorithm)
101 | 
102 | ## References
103 | 
104 | 1. [GeeksforGeeks - Selection Sort](https://www.geeksforgeeks.org/selection-sort/)
105 | 2. [Simplilearn - Selection Sort Algorithm](https://www.simplilearn.com/tutorials/data-structure-tutorial/selection-sort-algorithm)
106 | 
107 | ---
108 | 
109 | ⭐ Star this repository if you find it helpful!
110 | 


--------------------------------------------------------------------------------
/assets/algorithm-animation.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amirallami-code/selection-sorting-algorithm/38e2fd3ca3a18e1dfaee275d68e24297a7445b01/assets/algorithm-animation.gif


--------------------------------------------------------------------------------
/images/demo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amirallami-code/selection-sorting-algorithm/38e2fd3ca3a18e1dfaee275d68e24297a7445b01/images/demo.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Selective sorting Algorithm</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="text-div">
12 |       <h2>Selective Sorting</h2>
13 |       <p>Sort a list of numbers</p>
14 |       <p>
15 |         write your number, add it to the list of unsorted entries <br />
16 |         and click on the "Start sorting" button!
17 |       </p>
18 |       <div>
19 |         <input type="number" placeholder="Enter your number" id="input" />
20 |         <button type="button" id="button1">add number</button>
21 |         <div>
22 |           <button type="button" id="button2" disabled>start sorting</button>
23 |           <p id="error">enter correct value!</p>
24 |         </div>
25 |       </div>
26 |       <div class="wrapper">
27 |         <div class="Before-After">
28 |           <p>Your Numbers</p>
29 |           <ul class="Before">
30 |             ---
31 |           </ul>
32 |         </div>
33 |         <div class="Before-After">
34 |           <p>Your Numbers After Sorting</p>
35 |           <ul class="After">
36 |             ---
37 |           </ul>
38 |         </div>
39 |       </div>
40 |       <button type="button" id="reset">reset</button>
41 |     </div>
42 |     <script src="js/app.js"></script>
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
 1 | let $ = document
 2 | 
 3 | const inputElem = $.querySelector('#input')
 4 | const addNumberBtn = $.querySelector('#button1')
 5 | const startSortingBtn = $.querySelector('#button2')
 6 | const errorElem = $.querySelector('#error')
 7 | const beforeWrapper = $.querySelector('.Before')
 8 | const afterWrapper = $.querySelector('.After')
 9 | const resetBtn = $.querySelector('#reset')
10 | 
11 | let numbers = []
12 | 
13 | addNumberBtn.addEventListener('click', () => {
14 |     errorElem.style.opacity = '0'
15 |     pushNumberToDom()
16 | })
17 | 
18 | inputElem.addEventListener('keypress', event => {
19 |     errorElem.style.opacity = '0'
20 |     if (event.key === 'Enter') {
21 |         pushNumberToDom()
22 |     }
23 | })
24 | 
25 | resetBtn.addEventListener('click', () => location.reload())
26 | 
27 | // functions
28 | const pushNumberToDom = () => {
29 |     if (inputElem.value === '') {
30 |         errorElem.style.display = 'flex'
31 |     } else {
32 |         startSortingBtn.removeAttribute("disabled")
33 |         errorElem.style.display = 'none'
34 |         numbers.push(Number(input.value))
35 |         input.value = ''
36 |         beforeWrapper.innerHTML = ''
37 |         for (let item of numbers) {
38 |             beforeWrapper.insertAdjacentHTML('beforeend', `<li>${item}</li>`)
39 |         }
40 |     }
41 | }
42 | 
43 | const findSmallest = arr => {
44 |     smallest = arr[0]
45 |     smallestIndex = 0
46 | 
47 |     for (let i = 0; i != arr.length; i++) {
48 |         if (arr[i] <= smallest) {
49 |             smallest = arr[i]
50 |             smallestIndex = i
51 |         }
52 |     }
53 |     return smallest
54 | }
55 | 
56 | const selectionSort = arr => {
57 |     if (numbers.length > 0) {
58 |         newArr = []
59 | 
60 |         for (let i = 0; arr.length != 0; i++) {
61 |             smallest = findSmallest(arr)
62 |             newArr.push(smallest)
63 |             smallestIndex = arr.findIndex(num => { return num === smallest })
64 |             arr.splice(smallestIndex, 1)
65 |         }
66 |         afterGenerator(newArr)
67 |         errorElem.style.opacity = '0'
68 |     } else {
69 |         errorElem.style.opacity = '1'
70 |         errorElem.innerHTML = "basket is empty, add numbers for start!"
71 |     }
72 |     afterGenerator(newArr)
73 |     errorElem.style.display = 'none'
74 | }
75 | 
76 | const afterGenerator = newArr => {
77 | 
78 |     afterWrapper.innerHTML = ''
79 |     for (let number of newArr) {
80 |         afterWrapper.insertAdjacentHTML("beforeend", `<li>${number}</li>`)
81 |     }
82 |     resetBtn.style.display = 'block'
83 | }
84 | 
85 | startSortingBtn.addEventListener("click", () => selectionSort(numbers))


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | *,
 2 | *:before,
 3 | *:after {
 4 |   padding: 0;
 5 |   margin: 0;
 6 |   box-sizing: border-box;
 7 | }
 8 | body {
 9 |   height: 100vh;
10 |   background: linear-gradient(135deg, #d95454, #bf2e2e);
11 |   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
12 |   color: #fff;
13 | }
14 | input {
15 |   width: 200px;
16 |   height: 30px;
17 |   padding: 4px;
18 |   margin: 5px;
19 |   border-style: none;
20 |   border-radius: 5px;
21 | }
22 | input:focus {
23 |   outline: none;
24 | }
25 | button {
26 |   width: 100px;
27 |   height: 30px;
28 |   border-style: none;
29 |   cursor: pointer;
30 |   border-radius: 5px;
31 |   -webkit-border-radius: 5px;
32 |   -moz-border-radius: 5px;
33 |   -ms-border-radius: 5px;
34 |   -o-border-radius: 5px;
35 | }
36 | button:hover {
37 |   cursor: pointer;
38 | }
39 | #button2 {
40 |   width: 310px;
41 |   height: 30px;
42 |   border-style: none;
43 |   border-radius: 5px;
44 |   margin-left: 5px;
45 |   -webkit-border-radius: 5px;
46 |   -moz-border-radius: 5px;
47 |   -ms-border-radius: 5px;
48 |   -o-border-radius: 5px;
49 | }
50 | #error {
51 |   display: none;
52 |   margin: 5px;
53 |   transition: all 0.1s;
54 |   -webkit-transition: all 0.1s;
55 |   -moz-transition: all 0.1s;
56 |   -ms-transition: all 0.1s;
57 |   -o-transition: all 0.1s;
58 | }
59 | ul {
60 |   display: flex;
61 |   list-style-type: none;
62 |   padding: 10px;
63 | }
64 | li {
65 |   padding: 5px;
66 | }
67 | .text-div {
68 |   width: 100%;
69 |   height: 100%;
70 |   display: flex;
71 |   flex-direction: column;
72 |   align-items: center;
73 |   text-align: center;
74 |   justify-content: center;
75 |   padding: 35px;
76 |   row-gap: 10px;
77 | }
78 | .description {
79 |   padding: 0.5rem 0 1.5rem 0;
80 |   text-align: center;
81 | }
82 | .wrapper {
83 |   padding-top: 20px;
84 | }
85 | .Before-After {
86 |   display: flex;
87 |   flex-direction: column;
88 |   align-items: center;
89 | }
90 | #reset {
91 |   display: none;
92 |   width: 150px;
93 | }
94 | 


--------------------------------------------------------------------------------