Playground Component
Linear Search
Visualizer
Visualize Linear Search step by step as it scans each element until the target value is found or the list ends.
Linear Search Visualizer
Status
Idle
Current Index
-
Comparisons
0
Target
-
Copy Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Search Visualizer</title>
<style>
:root{--bg:#090909;--panel:#111111;--gold:#f4c430;--gold-dark:#b88700;--text:#f5f5f5;--border:#2f2f2f}
*{box-sizing:border-box}
body{margin:0;background:#090909}
.search-visualizer{min-height:100vh;padding:40px;background:radial-gradient(circle at top,#1a1505 0%,#090909 40%);color:var(--text);font-family:'Poppins',Arial,sans-serif}
.search-visualizer h2{text-align:center;font-size:3rem;color:var(--gold);margin:0 0 35px}
.controls{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin-bottom:35px}
.controls input{width:160px;padding:14px;border-radius:12px;border:1px solid #555;background:#151515;color:var(--gold);text-align:center;font-size:16px;outline:none}
.controls input:focus{border-color:var(--gold)}
.controls button{padding:14px 22px;border:none;border-radius:12px;cursor:pointer;font-weight:600;font-size:15px;background:linear-gradient(180deg,#ffd54d,#d9a900);color:#111;transition:.25s}
.controls button:hover{transform:translateY(-2px)}
.stats{width:100%;max-width:900px;margin:auto auto 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat-box{background:#151515;border:1px solid #2b2b2b;border-radius:14px;padding:18px;text-align:center}
.stat-box h4{margin:0;color:#999;font-size:.9rem}
.stat-box p{margin:8px 0 0;color:var(--gold);font-size:1.4rem;font-weight:bold}
.array{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.cell{width:72px;height:72px;border-radius:14px;background:#171717;border:2px solid #2c2c2c;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:.25s}
.cell div{font-size:1.3rem;font-weight:700}
.cell small{margin-top:5px;color:#999;font-size:.72rem}
.cell.default{background:#171717}
.cell.checking{background:#ffb000;color:black;border-color:#ffd54d;transform:translateY(-8px) scale(1.05);box-shadow:0 0 20px rgba(255,193,7,.45)}
.cell.found{background:#25c05a;color:white;border-color:#43e97b;transform:scale(1.12);box-shadow:0 0 22px rgba(37,192,90,.5)}
.cell.discarded{opacity:.28}
@media(max-width:768px){.search-visualizer{padding:20px}.search-visualizer h2{font-size:2rem}.stats{grid-template-columns:repeat(2,1fr)}.cell{width:58px;height:58px}.cell div{font-size:1rem}}
</style>
</head>
<body>
<div class="search-visualizer">
<h2>Linear Search Visualizer</h2>
<div class="controls">
<button id="randomizeBtn">Randomize</button>
<input id="targetInput" type="number" placeholder="Target">
<button id="searchBtn">Search</button>
<button id="speedBtn">Speed: Normal</button>
</div>
<div class="stats">
<div class="stat-box"><h4>Status</h4><p id="status">Idle</p></div>
<div class="stat-box"><h4>Current Index</h4><p id="currentIndex">-</p></div>
<div class="stat-box"><h4>Comparisons</h4><p id="comparisons">0</p></div>
<div class="stat-box"><h4>Target</h4><p id="targetValue">-</p></div>
</div>
<div id="array" class="array"></div>
</div>
<script>
const speedLevels=[{name:"Very Slow",delay:500},{name:"Slow",delay:200},{name:"Normal",delay:100},{name:"Fast",delay:50},{name:"Very Fast",delay:10}];
let array=[],speedIndex=2,searching=false,currentIndex=-1,comparisons=0,statusText="Idle";
const arrayEl=document.getElementById("array"),targetInput=document.getElementById("targetInput");
const speedBtn=document.getElementById("speedBtn");
function sleep(ms){return new Promise(resolve=>setTimeout(resolve,ms))}
function setStatus(value){statusText=value;document.getElementById("status").textContent=value}
function setCurrentIndex(value){currentIndex=value;document.getElementById("currentIndex").textContent=value===-1?"-":value}
function setComparisons(value){comparisons=value;document.getElementById("comparisons").textContent=value}
function syncTarget(){document.getElementById("targetValue").textContent=targetInput.value||"-"}
function renderArray(){
arrayEl.innerHTML="";
array.forEach((item,index)=>{
const cell=document.createElement("div");
cell.className=`cell ${item.state}`;
cell.innerHTML=`<div>${item.value}</div><small>Index ${index}</small>`;
arrayEl.appendChild(cell);
});
}
function setCellState(index,state){if(array[index]){array[index].state=state;renderArray()}}
function resetStates(){array=array.map(item=>({...item,state:"default"}));renderArray()}
function randomize(){
if(searching)return;
array=Array.from({length:48},()=>({value:Math.floor(Math.random()*100)+10,state:"default"}));
targetInput.value="";setCurrentIndex(-1);setComparisons(0);setStatus("Idle");syncTarget();renderArray();
}
function toggleSpeed(){speedIndex=(speedIndex+1)%speedLevels.length;speedBtn.textContent=`Speed: ${speedLevels[speedIndex].name}`}
async function linearSearch(){
if(searching)return;
const target=Number(targetInput.value);
if(Number.isNaN(target)||targetInput.value==="")return;
searching=true;resetStates();setStatus("Searching...");setComparisons(0);setCurrentIndex(-1);syncTarget();
for(let i=0;i<array.length;i++){
setCurrentIndex(i);setComparisons(i+1);setCellState(i,"checking");
await sleep(speedLevels[speedIndex].delay);
if(array[i].value===target){setCellState(i,"found");setStatus("Found!");searching=false;return}
setCellState(i,"discarded");
}
setStatus("Not Found");setCurrentIndex(-1);searching=false;
}
document.getElementById("randomizeBtn").addEventListener("click",randomize);
document.getElementById("searchBtn").addEventListener("click",linearSearch);
speedBtn.addEventListener("click",toggleSpeed);
targetInput.addEventListener("input",syncTarget);
randomize();
</script>
</body>
</html>
About this Component
Linear Search is the simplest searching algorithm. It checks elements one by one from the start of a list until it either finds the target value or reaches the end. Because it does not depend on any ordering, Linear Search works on both sorted and unsorted data. This interactive visualization helps you follow each comparison, see how the current element moves through the array, and understand why the search stops when the target is found or when every item has been inspected. Linear Search has a best-case time complexity of O(1) when the target is the first element, and an average and worst-case time complexity of O(n). It uses O(1) extra space and is useful for small lists, unsorted data, or situations where sorting the data first would cost more than the search itself.
Explore More Components
Discover more components from the Playground.
