How does the Binary Search Visualizer work?

The Binary Search Visualizer shows a sorted array of 21 elements as colored cell bars. Click Start Binary Search to begin. At each step, the JavaScript renders the array, highlights the mid element in amber (scale(1.5) with 360° rotation), moves the L/Mid/R pointer labels to the correct positions, then waits 1.2 seconds. Eliminated elements fade grey and shrink to scale(0.7). When found, the cell scales to scale(1.8) with a green glow and canvas-confetti fires 400 particles.

What technologies does the Binary Search Visualizer use?

The Binary Search Visualizer uses HTML, CSS with custom properties for dark/light theme switching, CSS @keyframes for cell pop-in and found-pulse animations, vanilla JavaScript with async/await for step-by-step delay, a while loop binary search implementation, and canvas-confetti (CDN) for the success celebration. The dark/light toggle uses document.body.classList.toggle('dark') and CSS custom property overrides.

Can I use this binary search visualizer to study for DSA interviews?

Yes. The Binary Search Visualizer is an excellent study tool for DSA (Data Structures and Algorithms) interviews, CS courses, and competitive programming preparation. It visually demonstrates the halving of search space each step, shows how L/Mid/R pointers move, explains why the array must be sorted, and displays the actual steps and comparisons count, helping you understand the O(log n) complexity intuitively.

Binary Search Visualizer

Name: Binary Search Visualizer – Interactive Algorithm Animation
Availability: InStock
Author: Coodeverse

🔍 Full Source Code

// index.html — Binary Search Visualizer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Binary Search Visualizer</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Dark mode toggle -->
  <button class="toggle" onclick="document.body.classList.toggle('dark')">Dark Mode</button>

  <h1>Binary Search</h1>
  <p class="subtitle">O(log n) • Requires sorted array • Halving the search space</p>

  <div id="visualizer">
    <div class="pointers" id="pointers">
      <div class="pointer" id="left">L</div>
      <div class="pointer" id="mid">MID</div>
      <div class="pointer" id="right">R</div>
    </div>
    <div class="array" id="array"></div>
  </div>

  <div class="controls">
    <input type="number" id="target" placeholder="Target value" value="42" />
    <div>
      <button class="search" onclick="startBinarySearch()">START BINARY SEARCH</button>
      <button class="random" onclick="generateSortedArray()">New Sorted Array</button>
      <button class="reset"  onclick="reset()">Reset</button>
    </div>
  </div>

  <div class="stats">
    <div>Steps: <span id="steps">0</span></div>
    <div>Comparisons: <span id="comparisons">0</span></div>
    <div>Array Size: <span id="size">21</span></div>
  </div>

  <div class="status" id="status">Click "New Sorted Array" then enter a target and START!</div>

  <script src="script.js"></script>
</body>
</html>

// style.css — Binary Search Visualizer

/* CSS Custom Properties — light mode (default) */
:root {
  --bg:         #f0fdf4;
  --card:       rgba(255,255,255,0.85);
  --text:       #166534;
  --cell:       #22c55e;
  --mid:        #f59e0b;
  --target:     #dc2626;
  --found:      #16a34a;
  --eliminated: #e5e7eb;
}

/* Dark mode overrides */
.dark {
  --bg:   #0f2417;
  --card: rgba(34,197,94,0.18);
  --text: #dcfce7;
  --cell: #4ade80;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 20px;
  transition: 0.5s;
  text-align: center;
}

h1 {
  font-size: 8.5rem;
  font-weight: 900;
  background: linear-gradient(90deg, #22c55e, #16a34a, #15803d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 2rem 0 0.5rem;
}

.subtitle { font-size: 2.6rem; opacity: 0.9; margin-bottom: 3rem; }

/* Main visualizer canvas */
#visualizer {
  width: 1450px; height: 680px;
  margin: 2rem auto;
  background: var(--card);
  border-radius: 60px;
  padding: 60px;
  box-shadow: 0 60px 140px rgba(34,197,94,0.4);
  position: relative;
  overflow: hidden;
}

/* Array container */
.array {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 16px; height: 500px; padding: 20px; position: relative;
}

/* Individual number cells */
.cell {
  width: 110px; height: 140px;
  background: var(--cell);
  border-radius: 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 3.2rem; font-weight: 900; color: white;
  box-shadow: 0 25px 50px rgba(0,0,0,0.4);
  transition: all 0.7s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  animation: pop 0.8s ease-out;
}
.cell:hover { transform: scale(1.2) translateY(-30px); }

/* Mid cell — amber, spins 360° */
.cell.mid {
  background: var(--mid) !important;
  transform: scale(1.5) rotate(360deg);
  box-shadow: 0 0 100px #f59e0b;
  z-index: 30;
}

/* Eliminated cells — grey, shrunk */
.cell.eliminated {
  background: var(--eliminated) !important;
  color: #94a3b8;
  transform: scale(0.7);
  opacity: 0.6;
}

/* Found cell — large green glow */
.cell.found {
  background: var(--found) !important;
  transform: scale(1.8);
  box-shadow: 0 0 120px #16a34a;
  z-index: 50;
}

/* L / MID / R pointer labels */
.pointers {
  position: absolute; top: 80px; left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem; font-weight: 900;
  display: flex; gap: 200px;
}
.pointer {
  background: rgba(0,0,0,0.7); color: white;
  padding: 12px 32px; border-radius: 40px;
}

/* Controls */
.controls { margin: 4rem 0; }
input {
  padding: 24px 50px; font-size: 2.2rem;
  border: none; border-radius: 45px;
  background: rgba(255,255,255,0.5);
  width: 420px; margin: 15px; text-align: center;
}
button {
  padding: 26px 90px; margin: 15px;
  font-size: 2.2rem; font-weight: 900;
  border: none; border-radius: 45px;
  cursor: pointer; color: white;
  box-shadow: 0 20px 55px rgba(0,0,0,0.45);
  transition: 0.4s;
}
button:hover { transform: translateY(-15px) scale(1.15); }
.search { background: linear-gradient(135deg, #22c55e, #16a34a); }
.random { background: linear-gradient(135deg, #7c2d12, #451a03); }
.reset  { background: linear-gradient(135deg, #dc2626, #991b1b); }

/* Stats row */
.stats  { display: flex; justify-content: center; gap: 120px; margin: 3rem; font-size: 2.4rem; font-weight: bold; }
.status { font-size: 3.6rem; font-weight: bold; margin: 2rem; color: #16a34a; }
.toggle { position: fixed; top: 20px; right: 20px; padding: 18px 65px; background: rgba(0,0,0,0.4); border-radius: 60px; color: white; cursor: pointer; }

/* Cell entrance animation */
@keyframes pop {
  from { transform: scale(0) rotate(360deg); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

// script.js — Binary Search Visualizer

let array      = [];
let isSearching = false;
let steps      = 0;
let comparisons = 0;

// Generate sorted array: [5, 10, 15, 20, ... 105]
function generateSortedArray() {
  reset();
  const size = 21;
  array = Array.from({ length: size }, (_, i) => (i + 1) * 5);
  document.getElementById('size').textContent = size;
  render();
  status("Sorted array ready! Enter target and START");
}

// Render all cells from array
function render() {
  const container = document.getElementById('array');
  container.innerHTML = '';
  array.forEach((val, i) => {
    const cell = document.createElement('div');
    cell.className = 'cell';
    cell.textContent = val;
    cell.dataset.index = i;
    container.appendChild(cell);
  });
  updatePointers(-1, -1, -1);
}

// Move L/Mid/R pointer labels
function updatePointers(left, mid, right) {
  const leftEl  = document.getElementById('left');
  const midEl   = document.getElementById('mid');
  const rightEl = document.getElementById('right');

  if (left  >= 0) leftEl.style.left  = `${(left  * 126) + 60}px`;
  if (mid   >= 0) midEl.style.left   = `${(mid   * 126) + 60}px`;
  if (right >= 0) rightEl.style.left = `${(right * 126) + 60}px`;

  leftEl.style.opacity  = left  >= 0 ? 1 : 0;
  midEl.style.opacity   = mid   >= 0 ? 1 : 0;
  rightEl.style.opacity = right >= 0 ? 1 : 0;
}

// 1.2s delay between steps
async function delay() {
  await new Promise(r => setTimeout(r, 1200));
}

// Core binary search with async visual steps
async function binarySearch(target) {
  if (isSearching) return;
  isSearching = true;
  document.querySelector('.search').disabled = true;

  steps = comparisons = 0;
  document.getElementById('steps').textContent = "0";
  document.getElementById('comparisons').textContent = "0";

  let left  = 0;
  let right = array.length - 1;
  let found = false;

  while (left <= right) {
    steps++;
    document.getElementById('steps').textContent = steps;

    const mid = Math.floor((left + right) / 2);
    comparisons++;
    document.getElementById('comparisons').textContent = comparisons;

    // Re-render and highlight mid
    render();
    const cells = document.querySelectorAll('.cell');
    cells[mid].classList.add('mid');
    updatePointers(left, mid, right);
    await delay();

    const midValue = array[mid];

    if (midValue === target) {
      // ✅ Found!
      found = true;
      cells[mid].classList.add('found');
      cells[mid].classList.remove('mid');
      status(`FOUND at index ${mid}!`);
      confetti({ particleCount: 400, spread: 120, origin: { y: 0.4 } });
      break;

    } else if (midValue < target) {
      // Too small — eliminate left half, move left pointer right
      for (let i = left; i <= mid; i++) cells[i].classList.add('eliminated');
      left = mid + 1;
      status(`Too small → searching right half [${left} – ${right}]`);

    } else {
      // Too big — eliminate right half, move right pointer left
      for (let i = mid; i <= right; i++) cells[i].classList.add('eliminated');
      right = mid - 1;
      status(`Too big → searching left half [${left} – ${right}]`);
    }

    await delay();
  }

  if (!found) {
    status(`NOT FOUND — ${target} is not in the array`);
  }

  isSearching = false;
  document.querySelector('.search').disabled = false;
}

function startBinarySearch() {
  const target = parseInt(document.getElementById('target').value);
  if (isNaN(target)) { status("Please enter a valid number"); return; }
  if (array.length === 0) { status("Generate a sorted array first!"); return; }
  status(`Searching for ${target}...`);
  binarySearch(target);
}

function reset() {
  isSearching = false;
  render();
  updatePointers(-1, -1, -1);
  document.querySelector('.search').disabled = false;
}

function status(msg) {
  document.getElementById('status').textContent = msg;
}

// Initialize on load
generateSortedArray();

// binary_search_faq

Binary Search — FAQ

How binary search works and how this visualizer teaches it.

How does binary search work?

Binary search works on a sorted array by halving the search space each step. It sets left = 0 and right = array.length - 1, calculates mid = Math.floor((left + right) / 2), then compares array[mid] to the target. If equal: found. If array[mid] is less than target: left = mid + 1. If array[mid] is greater: right = mid - 1. This repeats while left <= right. Maximum steps: ceil(log₂(n)) — just 5 steps for 21 elements.

How does the Binary Search Visualizer animate each step?

Each iteration calls render() to redraw all cells, then adds the .mid CSS class to the middle cell (triggering a scale(1.5) + 360° spin amber animation). The L, MID, and R pointer labels are repositioned using absolute left: calc(index * 126px). Eliminated elements get the .eliminated class (scale(0.7), grey, opacity 0.6). An async delay() of 1.2 seconds pauses between steps via setTimeout in a Promise. When found, .found class fires a scale(1.8) green glow and canvas-confetti.

What does O(log n) mean for binary search?

O(log n) means the maximum number of steps grows logarithmically with the array size. For 21 elements: at most 5 steps. For 1,000 elements: at most 10 steps. For 1,000,000 elements: at most 20 steps. This is because each step eliminates exactly half the remaining elements. Binary search is exponentially faster than linear search O(n) for large datasets, but requires a pre-sorted array.

How does the dark/light mode toggle work?

The toggle button calls document.body.classList.toggle('dark'). The CSS has two sets of custom property values — :root defines the light mode variables (green background, white card), and .dark overrides them (dark forest background, transparent green card). Since all element styles reference var(--bg), var(--card), var(--text), and var(--cell), toggling the class instantly switches all colors via CSS cascade — no JavaScript required beyond the one classList call.

Is this good for DSA interview preparation?

Yes. The Binary Search Visualizer is one of the best ways to intuitively understand binary search before a technical interview. It shows exactly how L/Mid/R pointers move, why the sorted array requirement exists, how the elimination process halves the search space, and the relationship between array size and maximum steps (O(log n)). Pair it with the free Coodeverse DSA course for comprehensive interview prep.

Can I download the Binary Search Visualizer source code?

Yes. Click Download Project above to get the full HTML, CSS, and JavaScript as a ZIP file — free, no account needed. Coodeverse provides 540+ free downloadable coding projects. The code uses async/await, CSS custom properties, canvas-confetti, and vanilla DOM manipulation — all great patterns to study for frontend development.

Property	Binary	Linear
Time	O(log n)	O(n)
Sorted req.	Yes	No
1M items	≤20 steps	1M steps
Approach	Halving	Sequential
Pointers	L · Mid · R	i

Binary Search
Visualizer

🔍 Binary Search — Algorithm Steps

Binary Search — FAQ

Master DSA & Algorithms.
Build Real Projects.

🔍 Binary Search — Algorithm Steps

Binary Search — FAQ

Master DSA & Algorithms.Build Real Projects.

Master DSA & Algorithms.
Build Real Projects.