binary search visualize

This video explains the binary searching algorithm

by Tintu Raju

HTML

<input type="text" value="10,20,30,40,50,60,70,80,90,100" id="numbers">
<input type="text" value="30" id="search">
<button id="searchList">Search</button>

<div id='res'>

</div>

JavaScript

// 10 20  30 40 50 60 70 80 90 100 110 120 130 140 150 160 

var compare_count=0;
var delay = 300;
var result_process_steps = [];

function array_split_display(list,low,up,middle){
	var res = "";

  for(var i=0;i<list.length;++i){
    if(i==middle)
      res+="<b style='color:red;'>"+list[i]+"</b> ";
    else if(i>=low && i<=up )
      res+="<u>"+list[i]+"</u> ";
    else
      res+="<b>"+list[i]+"</b> ";
  }	 
  

         
      
  return res;
}

function workflow(str){
   result_process_steps.push(str);
}
function binary_search(list,low,up,number){

    if(low>=up) {
    	workflow("Searching completed! Not found Any result")
    	return 0;
    }
    let middle = Math.ceil((low+up)/2);
    console.log(middle);
		compare_count++;
    

          workflow("Find the middle <br>" + array_split_display(list,middle+1,up,middle) + "<br>");
       	  
    
    

    if(number==list[middle]){
         // workflow("comparison "+compare_count + " <br>");
      return middle+1;
    }
    else if(number>list[middle]){
    			// workflow("comparison "+compare_count + " <br>");
          workflow("splitting the array to " + array_split_display(list,middle+1,up,middle) + "<br>");
       	  return binary_search(list,middle+1,up,number);
    }
    else{
    			 //workflow("comparison "+compare_count + " <br>");
          workflow("splitting the array to " + 	array_split_display(list,low,middle-1,middle) + "<br>");
       		return binary_search(list,low,middle-1,number);
    }
    
   
}

document.querySelector("#searchList").addEventListener("click",function(){
		result_process_steps = [];
		compare_count=0;
    let list = document.querySelector("#numbers").value.split(",")
    let low = 0;
    let up = list.length-1;
    let number = parseInt(document.querySelector("#search").value);  
    console.log( binary_search(list,low,up,number) );
    
    document.querySelector("#res").innerHTML= result_process_steps;
})