Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/stephenombuya/number-sorter

A web application that allows users to sort a list of numbers using various sorting algorithms, including Bubble Sort, Selection Sort, and Insertion Sort. This project is implemented with HTML, CSS, and JavaScript, offering an interactive way to visualize and understand sorting algorithms.
https://github.com/stephenombuya/number-sorter

css3 html5 javascript sorting-algorithms-implemented

Last synced: about 1 month ago
JSON representation

A web application that allows users to sort a list of numbers using various sorting algorithms, including Bubble Sort, Selection Sort, and Insertion Sort. This project is implemented with HTML, CSS, and JavaScript, offering an interactive way to visualize and understand sorting algorithms.

Awesome Lists containing this project

README

        

# **Number Sorter**
A web application that allows users to sort a list of numbers using various sorting algorithms, including Bubble Sort, Selection Sort, and Insertion Sort. This project is implemented with HTML, CSS, and JavaScript, offering an interactive way to visualize and understand sorting algorithms.

### **Table of Contents**
- Overview
- Features
- Technologies
- Installation
- Usage
- Code Structure
- Contributing
- License

### **Overview**
The Number Sorter application provides users with an easy way to sort numbers using multiple sorting algorithms. Users can input their numbers, select a sorting algorithm, and view the sorted output directly on the interface. This tool is especially useful for anyone interested in learning how different sorting methods work under the hood.

### **Features**
1. **Multiple Sorting Algorithms**: Offers Bubble Sort, Selection Sort, and Insertion Sort for sorting the input list of numbers.
2. **Interactive UI**: User-friendly interface where users can input numbers and visualize sorted results.
3. **Real-Time Sorting**: Click-to-sort functionality that immediately displays sorted numbers.
4. **Flexible Input**: Accepts custom lists of numbers through dropdowns for dynamic sorting.

### **Technologies**
- **HTML**: Structure and layout of the application.
- **CSS**: Styling for an appealing user interface.
- **JavaScript**: Core logic for sorting algorithms and UI updates.

### **Installation**
1. Clone the repository:

```
git clone https://github.com/stephenombuya/Number-Sorter/tree/main
```

2. Navigate to the project directory:

```
cd number-sorter
```

3. Open the index.html file in a browser to view and interact with the application.

### **Usage**
- **Add Numbers**: Input your list of numbers using the provided dropdown options.
- **Choose a Sorting Algorithm**: The JavaScript file includes implementations of Bubble Sort, Selection Sort, and Insertion Sort. Use the dropdown to select your preferred algorithm.
- **Sort Numbers**: Click the "Sort" button to sort the numbers in ascending order.
- **View Output**: Sorted numbers are displayed instantly below the input section.

### **Code Structure**
- **index.html**: The main HTML file containing the layout and structure of the application.
- **styles.css**: Stylesheet for designing the user interface.
- **script.js**: Contains JavaScript code for implementing the sorting algorithms and updating the UI.

### **Contributing**
Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a new branch for your feature (git checkout -b feature-name).
3. Commit your changes (git commit -m 'Add new feature').
4. Push to the branch (git push origin feature-name).
5. Open a pull request.

### **License**
This project is licensed under the GNU GPL License. See the LICENSE file for more details.