🔍 Binary Search Visualizer

An interactive algorithm visualizer where you build your own array, watch it get sorted in real-time with animated Bubble Sort, then search for any value using animated Binary Search — step by step.

---

✨ What Makes This Different

Unlike typical visualizers that generate a pre-sorted array for you, this tool gives you full control:

• ✍️ Type your own numbers to build the array
• 👀 Watch Bubble Sort animate each swap before your eyes
• 🖱️ Click any value chip to instantly search it — no typing needed
• ⌨️ Or type a custom target to test "not found" cases too

---

🚀 Getting Started

No installation. No build tools. Just open in a browser.

1. Download or clone the project
2. Make sure all three files are in the same folder:

   📁 binary-search-visualizer/
   ├── index.html
   ├── style.css
   └── script.js
   

3. Open index.html in any modern browser
4. Start exploring!

---

🎮 How to Use

Step 1 — Build Your Array

Action	Result
Type numbers in the input box	Comma or space separated, e.g. 64, 3, 47, 99, 12
Click Build & Sort	Animates Bubble Sort on your numbers
Click Random	Fills 8–14 random numbers and sorts automatically
Press Enter in the input	Same as clicking Build & Sort

Rules for input:

• Minimum 2 numbers, maximum 20
• Values must be whole numbers between 1 and 999
• Duplicates are removed automatically

---

Step 2 — Search a Value

After sorting, you have two ways to search:

Option A — Click a chip (easiest) Every value in your sorted array appears as a clickable button. Click any one and the Binary Search animation starts immediately.

Option B — Type a target Enter any number in the "TYPE A TARGET" field and press Start Search or Enter. This lets you test values that aren't in the array (shows Not Found result).

---

Controls

Control	Description
Speed Slider	5 levels from Slow (1200ms/step) to Fast (80ms/step)
Reset	Stops animation instantly, restores array to sorted state
Random	Generates a new random array and sorts it

---

🎨 Visual Guide

During Bubble Sort

Color	Meaning
🟣 Violet / lifted	Two elements currently being compared / swapped
🟢 Subtle green tint	Element has reached its final sorted position

During Binary Search

Color	Meaning
🟦 Cyan border	LEFT pointer
🟠 Orange / lifted	MID element — being compared to target
🟣 Violet border	RIGHT pointer
🔴 Faded red	Eliminated — outside current search range
🟢 Green / bouncing	FOUND — target located!

---

🧠 Algorithms Used

Bubble Sort (Step 1 — Sorting)

Used to animate the sorting phase so you can visually understand why Binary Search requires a sorted array.

for i = 0 to n-1:
    for j = 0 to n-i-2:
        if arr[j] > arr[j+1]:
            swap(arr[j], arr[j+1])   ← animated in violet

Case	Time
Best	O(n)
Average	O(n²)
Worst	O(n²)

---

Binary Search (Step 2 — Searching)

left  = 0
right = n - 1

while left <= right:
    mid = floor((left + right) / 2)

    if arr[mid] == target  →  found at index mid   ✅
    if arr[mid]  < target  →  left  = mid + 1      🔍 search right
    if arr[mid]  > target  →  right = mid - 1      🔍 search left

return -1  →  not found  ❌

Case	Time	Space
Best	O(1)	O(1)
Average	O(log n)	O(1)
Worst	O(log n)	O(1)

For 1,000,000 elements → Binary Search needs only ~20 steps.
Linear Search could need up to 1,000,000 steps.

---

🗂️ Project Structure

binary-search-visualizer/
│
├── index.html    →  Layout, step cards, visualizer, info cards
├── style.css     →  Dark theme, animations, responsive design
└── script.js     →  All logic: parsing, sorting, searching, rendering

File Responsibilities

index.html

• Two-step card layout (Build Array → Search Value)
• Visualizer container (array boxes + pointer row)
• Clickable value chips section
• Status bar and pointer legend
• Info cards (complexity, how-it-works, table)

style.css

• CSS variables for the complete color system
• Dark background with dot grid and radial glows
• Box states: swap, sorted, left, right, mid, elim, found
• Animations: foundBounce, blink, hover lifts, chip hover effects
• Responsive breakpoints at 700px and 420px

script.js

• parseArrayInput() — validates and parses the user's text input
• renderArray() — builds all DOM boxes and pointer tags from array[]
• renderChips() — creates clickable value chips after sorting
• animatedBubbleSort() — async sort with per-swap visual delay
• animatedBinarySearch(target) — async search with pointer updates
• setState(index, state) — applies a visual state class to a box
• updatePointers(left, mid, right) — shows L/M/R labels under boxes
• Stop flag pattern for clean mid-animation cancellation via Reset

---

🛠️ Tech Stack

Technology	Usage
HTML5	Semantic two-step layout
CSS3	Animations, variables, flexbox, grid
Vanilla JavaScript	All logic — zero dependencies
Google Fonts	JetBrains Mono + Syne

Zero dependencies. Zero frameworks. Zero build steps.

---

🌐 Browser Support

Browser	Support
Chrome 90+	✅ Full
Firefox 88+	✅ Full
Safari 14+	✅ Full
Edge 90+	✅ Full
Mobile browsers	✅ Responsive

---

💡 Tips & Tricks

Goal	How
Test best case O(1)	Click the middle chip — found in 1 step!
Test worst case O(log n)	Click the first or last chip
Test not found	Type a number that isn't in your array
Slow it down	Drag speed to 1 to follow every pointer carefully
See Bubble Sort clearly	Use 4–6 numbers at slow speed
Skip sorting animation	Drag speed to 5 before clicking Build & Sort
Stop mid-search	Hit Reset any time — stops instantly, keeps your array

---

📄 License

Open source — free to use for learning, teaching, and portfolio purposes.

---

Built with HTML, CSS, and Vanilla JavaScript — no frameworks, no fuss.