"Binary Search Visualization Demo"
Bootstrap 4.0.0 Snippet by muzzart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body onload="draw()">
<div id="header">Binary Seach Visualization Demo<div>By Muzammil Aziz</div></div>
<input onchange="draw()" id="search-field" onfocus="this.value=''" value="Enter number to search"/>
<br>
<button onclick="searchIt()" id="search">Search</button>
<br>
<canvas id="canvas" width="1000" height="100"></canvas>
<div id="check">Checks: <span id="checkCount">0</span></div>
<div id="result"></div>
</body>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
text-align: center;
}
input {
padding: 5px 10px;
margin: 5px;
border: 2px solid #4CAF50;
font-size: 1.2em;
text-align: center;
border-radius: 20px;
}
input:focus,button:focus{
outline: none;
}
button{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 20px;
}
#canvas{
padding-top: 2em;
}
#check {
font-size: 2.2em;
font-family: "consolas";
font-weight: bolder;
}
#checkCount{
font-weight: normal;
}
#result{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
arr=[10,11,14,18,21,25,30,36,40,41,46,50,65,68,90,99];
function draw() {
canvas=document.getElementById('canvas');
ctx = this.canvas.getContext("2d");
for (var i = 0; i < arr.length; i++) {
drawNode(33+(62*i),40,25,arr[i],ctx);
}
}
function searchIt() {
var val=document.getElementById('search-field').value;
var res=binarySearch(val),
indices=res.traverses,
count=0,status;
var intId=setInterval(()=>{
index=indices.shift();
if (index > -1) {
if( index == res.found)
foundNode(33+(62*index),40,25,arr[index],ctx);
else
highlightNode(33+(62*index),40,25,arr[index],ctx);
var checks=document.getElementById("checkCount");
checks.innerHTML=""+(++count);
}
else{
status="Found "+val+" at index = "+res.found+" in "+count+" checks.";
if(res.found==-1){
status=val+" not found in the array.";
}
clearInterval(intId);
document.getElementById("result").innerHTML=status;
}
},2000);
}
////////Binary Search Algorithm//////////
//Copyright 2009 Nicholas C. Zakas. All rights reserved.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: