Create a Sortable and Filterable Table using JavaScript

JavaScript
Written by Rick Bowen (JavaScript)

The Number Sorter is a simple, user-friendly web application designed to sort a list of numbers in ascending order. This project aims to demonstrate the core functionality of sorting algorithms while offering an interactive and visually appealing experience. Whether you’re exploring basic programming concepts or need a quick tool to organize numbers, this project delivers the solution.

How It Works

  1. Input Section:
    • Users can select numbers from dropdown menus. Each dropdown represents an element in the input array.
    • The input numbers are shown in the format [5, 7, 4, 1, 3] (as per the example in the screenshot).
  2. Sorting Process:
    • Once the user clicks the Sort button, the application sorts the numbers in ascending order using a built-in JavaScript sorting function.
  3. Output Section:
    • The sorted array is displayed in the format [1, 3, 4, 5, 7].

Code Explanation

code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number Sorter</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Number Sorter</h1>
        <div class="input-section">
            <h2>Input:</h2>
            <div id="input">
                <select>
                    <option value="5">5</option>
                    <option value="7">7</option>
                    <option value="4">4</option>
                    <option value="1">1</option>
                    <option value="3">3</option>
                </select>
                <select>
                    <option value="5">5</option>
                    <option value="7">7</option>
                    <option value="4">4</option>
                    <option value="1">1</option>
                    <option value="3">3</option>
                </select>
                <select>
                    <option value="5">5</option>
                    <option value="7">7</option>
                    <option value="4">4</option>
                    <option value="1">1</option>
                    <option value="3">3</option>
                </select>
                <select>
                    <option value="5">5</option>
                    <option value="7">7</option>
                    <option value="4">4</option>
                    <option value="1">1</option>
                    <option value="3">3</option>
                </select>
                <select>
                    <option value="5">5</option>
                    <option value="7">7</option>
                    <option value="4">4</option>
                    <option value="1">1</option>
                    <option value="3">3</option>
                </select>
            </div>
            <button id="sortButton">Sort</button>
        </div>
        <div class="output-section">
            <h2>Output:</h2>
            <p id="output"></p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Styling the Interface

codebody {
    font-family: Arial, sans-serif;
    background-color: #1d1d2b;
    color: white;
    text-align: center;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: 50px auto;
}

h1 {
    font-size: 2.5rem;
    color: #ffcc00;
}

button {
    background-color: #ffaa00;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2rem;
}

button:hover {
    background-color: #ffdd44;
}

select {
    margin: 10px;
    padding: 5px;
    font-size: 1rem;
}

#output {
    font-size: 1.5rem;
    margin-top: 20px;
    color: #00ff00;
}

JavaScript Adding Sorting Logic

code// Grab the sort button and output section
const sortButton = document.getElementById('sortButton');
const output = document.getElementById('output');

// Event listener for the sort button
sortButton.addEventListener('click', () => {
    // Collect values from the dropdowns
    const numbers = Array.from(document.querySelectorAll('select')).map(select => parseInt(select.value));

    // Sort the numbers in ascending order
    const sortedNumbers = numbers.sort((a, b) => a - b);

    // Display the sorted numbers
    output.textContent = `[ ${sortedNumbers.join(', ')} ]`;
});

Output Result Explanation

Input: [5, 7, 4, 1, 3]

  1. The application collects the numbers from the dropdown menu in the specified order.
  2. The numbers are passed into the sorting function:
    • Sorting Logic: The JavaScript .sort() function is used to compare two numbers (a, b) and sort them in ascending order. This ensures the smallest number comes first.
  3. The sorted array [1, 3, 4, 5, 7] is displayed in the Output section.

Solving Potential Issues

  1. Custom Input Support:
    • Currently, numbers are predefined. To allow user-defined input, replace dropdowns with input fields.
  2. Handling Duplicates:
    • Ensure duplicate values are preserved during sorting. JavaScript’s .sort() method already handles duplicates correctly.
  3. Error Handling:
    • Add validation to ensure all fields are filled before sorting.
  4. Scalability:
    • Expand the application to handle larger datasets or allow file uploads for bulk sorting.

Conclusion

The Number Sorter project is a great example of how basic programming concepts can create functional tools. Sorting numbers has never been this easy! I hope this inspires you to explore more fun projects.

Related blog posts

Load more
Know More About FSIBLOG
Useful Pages

2024 © FSIBLOG. All Rights Reserved.