Skip to content

Commit 945d057

Browse files
Bappy4uBappy4u
committed
Redesign the layout
1 parent 7ca85df commit 945d057

File tree

8 files changed

+183
-215
lines changed

8 files changed

+183
-215
lines changed

‎base.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
//get selected algorithm
22
function getAlgo() {
3-
var algo = document.getElementsByName("algo-name");
4-
for (var i = 0; i < algo.length; i++) {
5-
if (algo[i].checked) {
6-
return algo[i].value;
7-
}
8-
}
3+
algo = document.getElementById("get-algo").value;
4+
return algo;
95
}
106

117
// function for changing specific bar color filtering with data

‎function.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -241,13 +241,14 @@ function stopSorting() {
241241
stopSorting();
242242
}
243243
function startSorting() {
244-
if (getAlgo() == "bubble-sort") {
244+
let algo = document.getElementById("get-algo").value;
245+
if (algo == "bubble-sort") {
245246
const bubbleSortStarted = SortAlgo.bubbleSort.bind(SortAlgo);
246247
bubbleSortStarted();
247-
} else if (getAlgo() == "selection-sort") {
248+
} else if (algo == "selection-sort") {
248249
const selectionSortStarted = SortAlgo.selectionSort.bind(SortAlgo);
249250
selectionSortStarted();
250-
} else if (getAlgo() == "merge-sort") {
251+
} else if (algo == "merge-sort") {
251252
const mergeSortStarted = SortAlgo.mergeSort.bind(SortAlgo);
252253
mergeSortStarted();
253254
}

‎index.html

+84-40
Original file line numberDiff line numberDiff line change
@@ -9,52 +9,96 @@
99
content="Sorting algorithm visualizer using D3js. It will help you to understand the algorithm. I've used swapping animation for clear understanding of the algorithm."
1010
/>
1111
<title>Sorting Algorithm Visualizer | Najmul H. Bappy</title>
12+
<link
13+
rel="stylesheet"
14+
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css"
15+
integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g=="
16+
crossorigin="anonymous"
17+
referrerpolicy="no-referrer"
18+
/>
1219
<link rel="stylesheet" href="style.css" />
1320
</head>
1421
<body>
22+
<header>
23+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
24+
<div class="container">
25+
<a class="navbar-brand" href="#">Algo Visualizer</a>
26+
<button
27+
class="navbar-toggler"
28+
type="button"
29+
data-toggle="collapse"
30+
data-target="#navbarNav"
31+
aria-controls="navbarNav"
32+
aria-expanded="false"
33+
aria-label="Toggle navigation"
34+
>
35+
<span class="navbar-toggler-icon"></span>
36+
</button>
37+
<div class="collapse navbar-collapse" id="navbarNav">
38+
<ul class="navbar-nav">
39+
<li class="nav-item active">
40+
<a class="nav-link" href=""
41+
>Sorting Algo <span class="sr-only">(current)</span></a
42+
>
43+
</li>
44+
<li class="nav-item">
45+
<a class="nav-link" href="./searching-algorithm/"
46+
>Searching Algo</a
47+
>
48+
</li>
49+
</ul>
50+
</div>
51+
</div>
52+
</nav>
53+
</header>
1554
<p class="sound"><a id="sound" href="#">Sound 🎵</a></p>
16-
<h1>Sorting Algorithm Visualizer</h1>
17-
<button id="random-data">Generate Random Data</button>
18-
<div class="radio">
19-
<form action="">
20-
<label
21-
><input
22-
type="radio"
23-
name="algo-name"
24-
value="bubble-sort"
25-
checked
26-
/>Bubble Sort</label
27-
>
28-
<label>
29-
<input
30-
type="radio"
31-
name="algo-name"
32-
value="selection-sort"
33-
/>Selection Sort</label
34-
>
35-
<!--- <label>
36-
<input type="radio" name="algo-name" value="merge-sort" />Merge
37-
Sort</label
38-
> --->
55+
<div class="container">
56+
<h2>Searching Algorithm Visualizer</h2>
57+
</div>
58+
59+
<br />
60+
<div class="container">
61+
<div class="form-inline">
62+
<div class="form-group">
63+
<select class="form-control" id="get-algo">
64+
<option value="bubble-sort">Bubble Sort</option>
65+
<option value="selection-sort">Selection Sort</option>
66+
</select>
67+
</div>
3968

40-
<br />
41-
<br />
42-
<label>
43-
Speed:
44-
<input
45-
type="range"
46-
id="speed"
47-
name="speed"
48-
min="100"
49-
max="800"
50-
value="300"
51-
onchange="setSpeed()"
52-
/>
53-
</label>
54-
</form>
55-
<button id="sort">Sort</button>
56-
<button id="stop" class="none stop">Stop</button>
69+
<div class="form-group mx-sm-3">
70+
<button class="btn btn-primary" id="sort">Sort</button>
71+
</div>
72+
<div class="form-group">
73+
<button class="btn none btn-danger" id="stop">Stop</button>
74+
</div>
75+
</div>
76+
<br />
77+
<br />
78+
79+
<div class="row">
80+
<div class="col-md-3">
81+
<button class="btn btn-info" id="random-data">
82+
Generate Random Data
83+
</button>
84+
</div>
85+
<div class="col-md-3">
86+
<label>
87+
Speed:
88+
<input
89+
type="range"
90+
id="speed"
91+
name="speed"
92+
min="100"
93+
max="800"
94+
value="300"
95+
onchange="setSpeed()"
96+
/>
97+
</label>
98+
</div>
99+
</div>
57100
</div>
101+
58102
<div class="container">
59103
<div class="bar-chart">
60104
<div id="chart"></div>

‎searching-algorithm/base.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
//get selected algorithm
22
function getAlgo() {
3-
var algo = document.getElementsByName("algo-name");
4-
for (var i = 0; i < algo.length; i++) {
5-
if (algo[i].checked) {
6-
return algo[i].value;
7-
}
8-
}
3+
algo = document.getElementById("get-algo").value;
4+
return algo;
95
}
106

117
// function for changing specific bar color filtering with data

‎searching-algorithm/function.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -114,13 +114,14 @@ const SearchAlgo = {
114114
};
115115

116116
function startSearching() {
117-
if (getAlgo() == "linear-search") {
117+
algo = document.getElementById("get-algo").value;
118+
if (algo == "linear-search") {
118119
const linearSearchStarted = SearchAlgo.liearSearch.bind(SearchAlgo);
119120
linearSearchStarted();
120-
} else if (getAlgo() == "binary-search") {
121+
} else if (algo == "binary-search") {
121122
const binarySearchStarted = SearchAlgo.binarySearch.bind(SearchAlgo);
122123
binarySearchStarted();
123-
} else if (getAlgo() == "merge-sort") {
124+
} else if (algo == "merge-sort") {
124125
const mergeSortStarted = SortAlgo.mergeSort.bind(SortAlgo);
125126
mergeSortStarted();
126127
}

‎searching-algorithm/index.html

+82-41
Original file line numberDiff line numberDiff line change
@@ -6,55 +6,96 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<meta
88
name="description"
9-
content="Sorting algorithm visualizer using D3js. It will help you to understand the algorithm. I've used swapping animation for clear understanding of the algorithm."
9+
content="Algorithm visualizer using D3js. It will help you to understand the algorithm. I've used swapping animation for clear understanding of the algorithm."
10+
/>
11+
<title>Algorithm Visualizer | Najmul H. Bappy</title>
12+
<link
13+
rel="stylesheet"
14+
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css"
15+
integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g=="
16+
crossorigin="anonymous"
17+
referrerpolicy="no-referrer"
1018
/>
11-
<title>Sorting Algorithm Visualizer | Najmul H. Bappy</title>
1219
<link rel="stylesheet" href="style.css" />
1320
</head>
1421
<body>
22+
<header>
23+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
24+
<div class="container">
25+
<a class="navbar-brand" href="/">Algo Visualizer</a>
26+
<button
27+
class="navbar-toggler"
28+
type="button"
29+
data-toggle="collapse"
30+
data-target="#navbarNav"
31+
aria-controls="navbarNav"
32+
aria-expanded="false"
33+
aria-label="Toggle navigation"
34+
>
35+
<span class="navbar-toggler-icon"></span>
36+
</button>
37+
<div class="collapse navbar-collapse" id="navbarNav">
38+
<ul class="navbar-nav">
39+
<li class="nav-item">
40+
<a class="nav-link" href="/">Sorting Algo </a>
41+
</li>
42+
<li class="nav-item">
43+
<a class="nav-link active" href="#">Searching Algo</a>
44+
</li>
45+
</ul>
46+
</div>
47+
</div>
48+
</nav>
49+
</header>
1550
<p class="sound"><a id="sound" href="#">Sound 🎵</a></p>
16-
<h1>Sorting Algorithm Visualizer</h1>
17-
<button id="random-data">Generate Random Data</button>
18-
<div class="radio">
19-
<form action="">
20-
<label
21-
><input
22-
type="radio"
23-
name="algo-name"
24-
value="binary-search"
25-
checked
26-
/>Binary Search</label
27-
>
28-
<label>
29-
<input type="radio" name="algo-name" value="linear-search" />Linear
30-
Search</label
31-
>
32-
<!--- <label>
33-
<input type="radio" name="algo-name" value="merge-sort" />Merge
34-
Sort</label
35-
> --->
51+
<div class="container">
52+
<h2>Searching Algorithm Visualizer</h2>
53+
</div>
3654

37-
<br />
38-
<br />
39-
<label>
40-
Speed:
55+
<br />
56+
<div class="container">
57+
<div class="form-inline">
58+
<div class="form-group">
59+
<select class="form-control" id="get-algo">
60+
<option value="binary-search">Binary Search</option>
61+
<option value="linear-search">Linear Search</option>
62+
</select>
63+
</div>
64+
<div class="form-group mx-sm-3">
65+
<label for="inputPassword2" class="sr-only">Password</label>
4166
<input
42-
type="range"
43-
id="speed"
44-
name="speed"
45-
min="100"
46-
max="800"
47-
value="300"
48-
onchange="setSpeed()"
67+
type="text"
68+
class="form-control"
69+
id="targetValue"
70+
placeholder="Enter an element"
4971
/>
50-
</label>
51-
<br /><br />
52-
<label for="">
53-
Search For
54-
<input class="input-element" id="targetValue" type="text" />
55-
</label>
56-
</form>
57-
<button id="search">Search</button>
72+
</div>
73+
<button class="btn btn-primary" id="search">Search</button>
74+
</div>
75+
76+
<br />
77+
78+
<div class="row">
79+
<div class="col-md-3">
80+
<button class="btn btn-info" id="random-data">
81+
Generate Random Data
82+
</button>
83+
</div>
84+
<div class="col-md-3">
85+
<label>
86+
Speed:
87+
<input
88+
type="range"
89+
id="speed"
90+
name="speed"
91+
min="100"
92+
max="800"
93+
value="300"
94+
onchange="setSpeed()"
95+
/>
96+
</label>
97+
</div>
98+
</div>
5899
</div>
59100
<div class="container">
60101
<div class="bar-chart">

0 commit comments

Comments
 (0)