This is a solution to the Learn Basic Algorithmic Thinking by Building a Number Sorter challenge on FreeCodeCamp. This challenge focuses on creating a number sorter using basic sorting algorithms.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Users should be able to:

• Input a set of numbers using dropdown menus.
• Click a button to sort these numbers in ascending order.
• The numbers are displayed in a sorted sequence.

• Live Site URL: Live Site

• Semantic HTML5 markup
• CSS custom properties
• JavaScript (ES6)
• Sorting Algorithms (Bubble Sort, Selection Sort, Insertion Sort)

Working on this project enhanced my understanding of:

• Sorting Algorithms: Implementing and understanding different sorting algorithms including Bubble Sort, Selection Sort, and Insertion Sort.
• JavaScript Event Handling: Handling user interactions such as button clicks and processing form inputs.
• DOM Manipulation: Updating the content of the page based on user input and displaying the sorted results.

Code snippets I’m proud of:

const sortInputArray = (event) => {
  event.preventDefault();

  const inputValues = [
    ...document.getElementsByClassName("values-dropdown")
  ].map((dropdown) => Number(dropdown.value));

  const sortedValues = inputValues.sort((a, b) => a - b);

  updateUI(sortedValues);
}

const bubbleSort = (array) => {
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length - 1; j++) {
      if (array[j] > array[j + 1]) {
        const temp = array[j];
        array[j] = array[j + 1];
        array[j + 1] = temp;
      }
    }
  }
  return array;
}

button {
  cursor: pointer;
  margin-top: 15px;
  text-decoration: none;
  background-image: linear-gradient(#fecc4c, #ffac33);
  border: 3px solid #feac32;
  padding: 10px 16px;
  font-size: 23px;
  width: 100%;
}

In future projects, I aim to:

• Optimize Sorting Algorithms: Compare and contrast different sorting algorithms to determine the most efficient for various data sets.
• Improve UI/UX: Enhance user interaction and feedback mechanisms for better usability.
• Expand Functionality: Add features like sorting in descending order or sorting larger arrays.

• MDN Web Docs - Array.prototype.sort() - Essential for understanding array sorting in JavaScript.
• JavaScript.info - Sorting - Detailed guide on sorting algorithms in JavaScript.
• GeeksforGeeks - Sorting Algorithms - Helpful explanations and implementations of various sorting algorithms.

• LinkedIn - Yashi Singh

A special thank you to FreeCodeCamp for providing this engaging challenge. It was a valuable opportunity to practice and apply basic sorting algorithms. Thanks to the community for their support and feedback, and to MDN Web Docs for their comprehensive documentation and tutorials.