Skip to content

Commit e8904e2

Browse files
abhishekkandiabhishekkandi
authored
Binary search implementation & few refactoring.
1 parent a761ca1 commit e8904e2

File tree

1 file changed

+128
-54
lines changed

1 file changed

+128
-54
lines changed

‎index.html

Lines changed: 128 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,18 @@
22
<head>
33
<title>Algorithm Visualizer - Abhishek Kandi</title>
44
<style>
5+
:root {
6+
--font-family: Monospace;
7+
--font-size: 1.5rem;
8+
--button-font-size: 1rem;
9+
}
10+
.container {
11+
padding:30px;
12+
}
513
#user-preference{
614
padding:20px;
7-
font-family: cursive;
15+
font-family: var(--font-family);
16+
font-size: var(--font-size);
817
}
918
.user-preference-type{
1019
display: inline;
@@ -25,44 +34,56 @@
2534
.element-found{
2635
background-color: lightgreen;
2736
}
37+
#algorithm-process-trigger{
38+
border: none;
39+
border-radius: 12px;
40+
padding: 3px 10px;
41+
color:white;
42+
background-color: black;
43+
font-family: var(--font-family);
44+
font-size: var(--button-font-size);
45+
outline:none;
46+
}
2847
</style>
2948
</head>
3049
<body>
31-
<div id="user-preference">
32-
<div class="user-preference-type">
33-
<label for="selected-algorithm">Algorithm </label>
34-
<select id="selected-algorithm">
35-
<option value="linear-search">Linear Search</option>
36-
<option value="binary-search">Binary Search</option>
37-
</select>
38-
</div>
39-
40-
<div class="user-preference-type">
41-
<label for="array-size">Array size </label>
42-
<select id="array-size" onchange="appendSelectedArraySizeElement(value)">
43-
<option value=5>5</option>
44-
<option value=10>10</option>
45-
<option value=15>15</option>
46-
<option value=20>20</option>
47-
</select>
48-
</div>
49-
50-
<div class="user-preference-type">
51-
<label for="search-element">Search value </label>
52-
</div>
53-
54-
<div class="user-preference-type">
55-
<input type="text" id="search-element" name="search-element">
50+
<div class="container">
51+
<div id="user-preference">
52+
<div class="user-preference-type">
53+
<label for="selected-algorithm">Algorithm </label>
54+
<select id="selected-algorithm" onchange="changeInSelectedAlgorithm(value)">
55+
<option value="linear-search">Linear Search</option>
56+
<option value="binary-search">Binary Search</option>
57+
</select>
58+
</div>
59+
60+
<div class="user-preference-type">
61+
<label for="array-size">Array size </label>
62+
<select id="array-size" onchange="appendSelectedArraySizeElement(value)">
63+
<option value=5>5</option>
64+
<option value=10>10</option>
65+
<option value=15>15</option>
66+
<option value=20>20</option>
67+
</select>
68+
</div>
69+
70+
<div class="user-preference-type">
71+
<label for="search-element">Search value </label>
72+
</div>
73+
74+
<div class="user-preference-type">
75+
<input type="text" id="search-element" name="search-element">
76+
</div>
77+
78+
<div class="user-preference-type">
79+
<button type="button" id="algorithm-process-trigger" onclick="startProcessing()">Find</button>
80+
</div>
5681
</div>
57-
58-
<div class="user-preference-type">
59-
<button type="button" onclick="startProcessing()">Start Magic!</button>
82+
83+
<div id="selected-array-size-elements">
84+
6085
</div>
6186
</div>
62-
63-
<div id="selected-array-size-elements">
64-
65-
</div>
6687
</body>
6788
<script>
6889
document.onreadystatechange = function(){
@@ -72,21 +93,56 @@
7293
}
7394
}
7495

75-
function startProcessing(){
76-
let selectedAlgorithm = document.getElementById("selected-algorithm").value
96+
function getSelectedAlgorithm(){
97+
return document.getElementById("selected-algorithm").value
98+
}
99+
100+
function getArraySize(){
101+
return parseInt(document.getElementById("array-size").value)
102+
}
103+
104+
function changeInSelectedAlgorithm(value){
105+
appendSelectedArraySizeElement(getArraySize())
106+
}
107+
108+
function enableUserPreference(){
109+
document.getElementById("selected-algorithm").disabled = false
110+
document.getElementById("array-size").disabled = false
111+
document.getElementById("search-element").disabled = false
112+
document.getElementById("algorithm-process-trigger").disabled = false
113+
}
114+
115+
function disableUserPreference(){
116+
document.getElementById("selected-algorithm").disabled = true
117+
document.getElementById("array-size").disabled = true
118+
document.getElementById("search-element").disabled = true
119+
document.getElementById("algorithm-process-trigger").disabled = true
120+
}
121+
122+
async function startProcessing(){
123+
let selectedAlgorithm = getSelectedAlgorithm()
77124
let searchElement = document.getElementById("search-element").value
78125

79126
if(!searchElement){
80127
alert('Please enter search element')
81128
return;
82129
}
83130

84-
if(selectedAlgorithm == 'linear-search')
85-
processLinearSearch(searchElement)
131+
disableUserPreference()
132+
if(selectedAlgorithm == 'linear-search'){
133+
await processLinearSearch(searchElement)
134+
}
135+
else{
136+
await processBinarySearch(searchElement)
137+
}
138+
enableUserPreference()
139+
86140
}
87141

88142
function appendSelectedArraySizeElement(arraySize){
89143
let selectedArraySizeElements = generateRandomNumbers(arraySize)
144+
let selectedAlgorithm = getSelectedAlgorithm()
145+
if(selectedAlgorithm === 'binary-search') selectedArraySizeElements.sort((a,b) => a - b)
90146
let arrayHTML = ''
91147
selectedArraySizeElements.forEach((element,index)=>{
92148
let elementHTML = `<div class="square" id="square-${index}">${element}</div>`
@@ -134,46 +190,64 @@
134190
function fillColorForElementFoundSquare(index){
135191
let squareId = `square-${index}`
136192
document.getElementById(squareId).classList.add("element-found")
193+
alert('Element Found')
137194
setTimeout(() =>{
138195
removeColorForElementFoundSquare(index)
139196
},3000)
140197
}
141198

142199
async function processLinearSearch(searchElement){
143-
144200
let arrayToBeSearched = getArrayToBeLooped()
145201
for(let i = 0; i < arrayToBeSearched.length; i++){
146202
fillColorForCurrentIterationSquare(i)
147-
await timer(1000)
203+
await setTimer(1000)
148204
if(arrayToBeSearched[i] == searchElement){
149205
removeColorForCurrentIterationSquare(i)
150206
fillColorForElementFoundSquare(i)
151207
return i;
152208
}
153209
removeColorForCurrentIterationSquare(i)
154210
}
211+
promptElementNotFound();
212+
}
155213

214+
function promptElementNotFound(){
156215
alert('Element not found');
216+
enableUserPreference()
157217
}
158218

159-
function timer(ms){
219+
function setTimer(ms){
160220
return new Promise(res => setTimeout(res,ms))
161221
}
162222

163-
// function processLinearSearch(searchElement){
164223

165-
// let arrayToBeSearched = getArrayToBeLooped()
166-
// for(i = 0; i < arrayToBeSearched.length; i++){
167-
// fillColorForCurrentIterationSquare(i)
168-
// if(arrayToBeSearched[i] == searchElement){
169-
// removeColorForCurrentIterationSquare(i)
170-
// fillColorForElementFoundSquare(i)
171-
// return i;
172-
// }
173-
// removeColorForCurrentIterationSquare(i)
174-
// }
175-
176-
// return -1;
177-
// }
224+
async function processBinarySearch(searchElement) {
225+
let sortedArray = getArrayToBeLooped()
226+
var lowIndex = 0;
227+
var highIndex = sortedArray.length - 1;
228+
while (lowIndex <= highIndex) {
229+
let initialLowIndex = lowIndex
230+
let initialHighIndex = highIndex
231+
fillColorForCurrentIterationSquare(initialLowIndex)
232+
fillColorForCurrentIterationSquare(initialHighIndex)
233+
await setTimer(1000)
234+
var midIndex = Math.floor((lowIndex + highIndex) / 2);
235+
if (sortedArray[midIndex] == searchElement) {
236+
removeColorForCurrentIterationSquare(lowIndex)
237+
removeColorForCurrentIterationSquare(highIndex)
238+
await setTimer(300)
239+
fillColorForElementFoundSquare(midIndex)
240+
return midIndex;
241+
} else if (sortedArray[midIndex] < searchElement) {
242+
lowIndex = midIndex + 1;
243+
} else {
244+
highIndex = midIndex - 1;
245+
}
246+
removeColorForCurrentIterationSquare(initialLowIndex)
247+
removeColorForCurrentIterationSquare(initialHighIndex)
248+
}
249+
250+
promptElementNotFound();
251+
}
178252
</script>
179253
</html>

0 commit comments

Comments
 (0)