🧠 Algorithm Visualizer

📌 Description

This project is a web-based application designed to visualize how sorting algorithms work. It focuses on transforming abstract algorithmic logic into an interactive and intuitive visual experience.

Sorting algorithms are often difficult to understand when only studied through code. This project addresses that problem by representing data as dynamic visual elements, allowing users to observe each step of the sorting process in real time.

---

🎯 Objectives

• Understand how sorting algorithms operate step by step
• Visualize comparisons and swaps between elements
• Explore algorithm behavior and performance
• Translate abstract logic into a user-friendly interface

---

⚙️ Technologies Used

• HTML
• CSS
• JavaScript (Vanilla)

---

🚀 Features

• Generate a random array of values
• Visual representation using vertical bars
• Bubble Sort algorithm implementation
• Real-time animation of sorting process
• Display of sorting execution time
• Visual highlighting of comparisons (red bars)

---

🧮 Algorithm Explanation

This project implements the Bubble Sort algorithm.

Bubble Sort works by repeatedly comparing adjacent elements in a list and swapping them if they are in the wrong order. This process continues until the entire list is sorted.

The algorithm is simple to understand but not efficient for large datasets.

Time Complexity: O(n²)

---

⏱️ Performance Note

The execution time displayed in this application includes animation delays introduced for visualization purposes. Therefore, it does not represent the true computational performance of the algorithm but serves an educational purpose.

---

🖥️ Project Structure

algorithm-visualizer/ │── index.html │── style.css │── script.js

---

▶️ How to Run the Project

1. Clone or download the repository
2. Open the project folder in VS Code
3. Open index.html in your browser

Or use the Live Server extension for a better experience.

---

💡 What I Learned

• How sorting algorithms work internally
• How to manipulate the DOM dynamically using JavaScript
• How to create asynchronous animations using async/await
• How to connect algorithm logic with user interface design

---

📈 Possible Improvements

• Add more sorting algorithms (Selection Sort, Merge Sort)
• Add speed control for the animation
• Display number of comparisons and swaps
• Improve UI/UX design

---

👩‍💻 Author

Lena Belise MUTIMA GitHub: https://github.com/lena-bel