Skip to content

Commit 16adbe0

Browse files
TasosTilsiTasosTilsi
committed
dark theme, shadow and border radius at cells, implemented
1 parent d80732d commit 16adbe0

15 files changed

+555
-247
lines changed

‎README.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
1. [x] ~~Some minor fixes~~
1111
2. [x] ~~Open links externally in the default browser~~
1212
3. [x] ~~Auto Update~~
13-
4. [ ] Publish releases for ~~Linux~~ and Mac OS
14-
5. [ ] Make a minimal menu for the app
15-
6. [ ] Materialize the view
16-
7. [ ] Anything that comes to my mind
17-
8. [ ] Feel Free to open an issue to post your thoughts
13+
4. [ ] Publish releases for ~~Linux~~, Mac OS
14+
5. [x] ~~Dark Mode~~
15+
6. [ ] Make a minimal menu for the app
16+
7. [ ] Materialize the view
17+
8. [ ] Anything that comes to my mind
18+
9. [ ] Feel Free to open an issue to post your thoughts
1819

1920
<h3>Download the App in Development Mode</h3>
2021
You will have to install NodeJs first for the npm package manager.

‎index.html

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
<link rel="stylesheet" href="stylesheets/Slider.css">
4949
<link rel="stylesheet" href="stylesheets/DragableContainer.css">
5050
<link rel="stylesheet" href="stylesheets/Toggle.css">
51-
<!-- <link rel="stylesheet" href="stylesheets/DarkTheme.css"> -->
51+
<link rel="stylesheet" href="stylesheets/DarkTheme.css">
5252

5353
</head>
5454

@@ -92,6 +92,11 @@
9292
resizable: false
9393
})
9494

95+
win.custom = {
96+
dark_theme: document.getElementById("dark_theme").getAttribute("aria-pressed")=="true"
97+
}
98+
99+
95100
var theUrl = 'file://' + __dirname + '/modal.html'
96101
console.log('url', theUrl);
97102

@@ -163,15 +168,15 @@
163168
</div>
164169
<div class="col-sm">
165170
Help Container
166-
<button type="button" class="btn btn-toggle" title="Toggle Help Container" id="show_hide_manual"
167-
data-toggle="button" aria-pressed="false" autocomplete="off">
171+
<button type="button" class="btn btn-toggle active" title="Toggle Help Container" id="show_hide_manual"
172+
data-toggle="button" aria-pressed="true" autocomplete="off">
168173
<div class="handle"></div>
169174
</button>
170175
</div>
171176
<div class="col-sm">
172177
Steps Container
173-
<button type="button" class="btn btn-toggle" title="Toggle Steps Container" id="show_hide_step"
174-
data-toggle="button" aria-pressed="false" autocomplete="off">
178+
<button type="button" class="btn btn-toggle active" title="Toggle Steps Container" id="show_hide_step"
179+
data-toggle="button" aria-pressed="true" autocomplete="off">
175180
<div class="handle"></div>
176181
</button>
177182
</div>
@@ -189,7 +194,6 @@
189194
<div id="slider">
190195
<input class="bar" type="range" id="rangeinput" value="1000" min="350" max="3000" step="50"
191196
title="Animation Speed" />
192-
<span class="highlight"></span>
193197
<output id="rangevalue">1000</output>
194198
</div>
195199
</div>

‎modal.html

Lines changed: 153 additions & 152 deletions
Large diffs are not rendered by default.

‎scripts/BinarySearch.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,17 @@ function binarySearch(searching_array, asked_number) {
1919

2020
if (searching_array[middleIndex] !== asked_number && firstIndex < lastIndex) {
2121
if (asked_number < searching_array[middleIndex]) {
22-
document.querySelector(`[cell_id='${Math.min(lastIndex, searching_array.length - 1)}']`).style.backgroundColor = "white";
22+
document.querySelector(`[cell_id='${Math.min(lastIndex, searching_array.length - 1)}']`).style.backgroundColor = "transparent";
2323
lastIndex = middleIndex - 1;
2424
checks++;
2525
document.querySelector(`[cell_id='${Math.min(lastIndex, searching_array.length - 1)}']`).style.backgroundColor = "lightblue";
2626
} else if (asked_number > searching_array[middleIndex]) {
27-
document.querySelector(`[cell_id='${firstIndex}']`).style.backgroundColor = "white";
27+
document.querySelector(`[cell_id='${firstIndex}']`).style.backgroundColor = "transparent";
2828
firstIndex = middleIndex + 1;
2929
document.querySelector(`[cell_id='${firstIndex}']`).style.backgroundColor = "lightblue";
3030
checks++;
3131
}
32-
document.querySelector(`[cell_id='${middleIndex}']`).style.backgroundColor = "white";
32+
document.querySelector(`[cell_id='${middleIndex}']`).style.backgroundColor = "transparent";
3333
middleIndex = Math.floor((lastIndex + firstIndex) / 2);
3434
document.querySelector(`[cell_id='${middleIndex}']`).style.backgroundColor = "orange";
3535
getValuesforBinarySteps(firstIndex, lastIndex, middleIndex, false, checks);
@@ -63,8 +63,8 @@ function binarySearch(searching_array, asked_number) {
6363
return lastIndex;
6464
}*/
6565
if ((lastIndex === firstIndex ||
66-
firstIndex === middleIndex ||
67-
lastIndex === middleIndex) &&
66+
firstIndex === middleIndex ||
67+
lastIndex === middleIndex) &&
6868
(searching_array[middleIndex] !== asked_number &&
6969
(searching_array[firstIndex] > asked_number && searching_array[firstIndex] !== asked_number) &&
7070
(searching_array[lastIndex] < asked_number && searching_array[lastIndex] !== asked_number))) {
@@ -78,8 +78,8 @@ function binarySearch(searching_array, asked_number) {
7878
}
7979

8080
if ((lastIndex === firstIndex &&
81-
firstIndex === middleIndex &&
82-
lastIndex === middleIndex) && searching_array[middleIndex] !== asked_number) {
81+
firstIndex === middleIndex &&
82+
lastIndex === middleIndex) && searching_array[middleIndex] !== asked_number) {
8383
getValuesforBinarySteps(firstIndex, lastIndex, middleIndex, false, checks);
8484
showSnackBar("The number you searched for is not in the generated array!");
8585
document.getElementById("pause").click();

‎scripts/ExponentialSearch.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ function exponentialSearch(searching_array, asked_number) {
3434
}
3535

3636
//if (expo_i < expo_size) {
37-
document.querySelector(`[cell_id='${Math.min(expo_i, expo_size)}']`).style.backgroundColor = "white";
37+
document.querySelector(`[cell_id='${Math.min(expo_i, expo_size)}']`).style.backgroundColor = "transparent";
3838
//
3939

4040
if (expo_i < expo_size && searching_array[expo_i] <= asked_number) {
@@ -78,17 +78,17 @@ function binSearch(arr, x) {
7878
// console.log(`>>arr[left] = '${arr[left]}', arr[right] = '${arr[right]}', arr[mid] = '${arr[mid]}', x = '${x}'`);
7979
if (arr[mid] !== x && left <= right) {
8080
if (x < arr[mid]) {
81-
document.querySelector(`[cell_id='${right}']`).style.backgroundColor = "white";
81+
document.querySelector(`[cell_id='${right}']`).style.backgroundColor = "transparent";
8282
right = mid - 1;
8383
document.querySelector(`[cell_id='${right}']`).style.backgroundColor = "lightblue";
8484
checks++;
8585
} else if (x > arr[mid]) {
86-
document.querySelector(`[cell_id='${left}']`).style.backgroundColor = "white";
86+
document.querySelector(`[cell_id='${left}']`).style.backgroundColor = "transparent";
8787
left = mid + 1;
8888
document.querySelector(`[cell_id='${left}']`).style.backgroundColor = "lightblue";
8989
checks++;
9090
}
91-
document.querySelector(`[cell_id='${mid}']`).style.backgroundColor = "white";
91+
document.querySelector(`[cell_id='${mid}']`).style.backgroundColor = "transparent";
9292
mid = Math.floor((right + left) / 2);
9393
document.querySelector(`[cell_id='${mid}']`).style.backgroundColor = "orange";
9494
}

‎scripts/FibonacciSearch.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ function fibonacciSearch(searching_array, asked_number) {
3030

3131
if (flag === 0) {
3232
if (fib < fib_size) {
33-
document.querySelector(`[cell_id='${fib2}']`).style.backgroundColor = "white";
34-
document.querySelector(`[cell_id='${fib1}']`).style.backgroundColor = "white";
35-
document.querySelector(`[cell_id='${fib}']`).style.backgroundColor = "white";
33+
document.querySelector(`[cell_id='${fib2}']`).style.backgroundColor = "transparent";
34+
document.querySelector(`[cell_id='${fib1}']`).style.backgroundColor = "transparent";
35+
document.querySelector(`[cell_id='${fib}']`).style.backgroundColor = "transparent";
3636
fib2 = fib1;
3737
fib1 = fib;
3838
fib = fib1 + fib2;
@@ -53,21 +53,21 @@ function fibonacciSearch(searching_array, asked_number) {
5353
}
5454
} else if (flag === 1) {
5555
if (fib > 1) {
56-
document.querySelector(`[cell_id='${index}']`).style.backgroundColor = "white";
56+
document.querySelector(`[cell_id='${index}']`).style.backgroundColor = "transparent";
5757
index = Math.min(offset + fib2, fib_size - 1);
5858
document.querySelector(`[cell_id='${index}']`).style.backgroundColor = "orange";
5959
checks++;
6060
getValuesforFibonacciSteps(fib1, fib2, fib, index, fib_size, false, checks);
6161
//console.log(">>>Setting the index " + index);
6262
if (asked_number < searching_array[index]) {
6363
if (fib2 < fib_size) {
64-
document.querySelector(`[cell_id='${fib2}']`).style.backgroundColor = "white";
64+
document.querySelector(`[cell_id='${fib2}']`).style.backgroundColor = "transparent";
6565
}
6666
if (fib1 < fib_size) {
67-
document.querySelector(`[cell_id='${fib1}']`).style.backgroundColor = "white";
67+
document.querySelector(`[cell_id='${fib1}']`).style.backgroundColor = "transparent";
6868
}
6969
if (fib < fib_size) {
70-
document.querySelector(`[cell_id='${fib}']`).style.backgroundColor = "white";
70+
document.querySelector(`[cell_id='${fib}']`).style.backgroundColor = "transparent";
7171
}
7272
fib = fib2;
7373
fib1 = fib1 - fib2;
@@ -85,13 +85,13 @@ function fibonacciSearch(searching_array, asked_number) {
8585
getValuesforFibonacciSteps(fib1, fib2, fib, index, fib_size, false, checks);
8686
} else if (asked_number > searching_array[index]) {
8787
if (fib2 < fib_size) {
88-
document.querySelector(`[cell_id='${fib2}']`).style.backgroundColor = "white";
88+
document.querySelector(`[cell_id='${fib2}']`).style.backgroundColor = "transparent";
8989
}
9090
if (fib1 < fib_size) {
91-
document.querySelector(`[cell_id='${fib1}']`).style.backgroundColor = "white";
91+
document.querySelector(`[cell_id='${fib1}']`).style.backgroundColor = "transparent";
9292
}
9393
if (fib < fib_size) {
94-
document.querySelector(`[cell_id='${fib}']`).style.backgroundColor = "white";
94+
document.querySelector(`[cell_id='${fib}']`).style.backgroundColor = "transparent";
9595
}
9696
fib = fib1;
9797
fib1 = fib2;
@@ -106,7 +106,7 @@ function fibonacciSearch(searching_array, asked_number) {
106106
document.querySelector(`[cell_id='${fib}']`).style.backgroundColor = "lightblue";
107107
}
108108
if (offset < fib_size && offset > 0) {
109-
document.querySelector(`[cell_id='${offset}']`).style.backgroundColor = "white";
109+
document.querySelector(`[cell_id='${offset}']`).style.backgroundColor = "transparent";
110110
}
111111
offset = index;
112112
//console.log(">>>Setting the fib2 " + fib2 + " and fib1 " + fib1 + " and fib " + fib + " offset " + offset);

‎scripts/GeneralFunctions.js

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,6 @@ function checkForGeneratedNumbers() {
3434
} else if (searching_profile === "fibonacci") {
3535
fibonacciSearch(the_array, searching_number);
3636
}
37-
/*else if (searching_profile === "stratos") {
38-
39-
}*/
40-
4137
} else {
4238
document.getElementById("pause").click();
4339
showSnackBar("Please <strong>Specify a Number</strong> within the <strong>Numbers Range</strong>");
@@ -102,9 +98,9 @@ function showSnackBar(message) {
10298
function makeTheTableWhite() {
10399
for (let i = 0; i < the_array.length; i++) {
104100
let cell = document.querySelector(`[cell_id='${i}']`).style.backgroundColor;
105-
if (cell.length > 0 && cell !== "white") {
101+
if (cell.length > 0 && cell !== "transparent") {
106102
console.log("Clearing " + i + " cell");
107-
document.querySelector(`[cell_id='${i}']`).style.backgroundColor = "white";
103+
document.querySelector(`[cell_id='${i}']`).style.backgroundColor = "transparent";
108104
}
109105
}
110106
}
@@ -128,15 +124,15 @@ function isNumber(n) {
128124
}
129125

130126
function toggleDarkLight() {
131-
let body = document.getElementById("whole_body_div");
132-
let currentClass = body.className;
133-
console.log("before " + currentClass);
134-
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
135-
console.log("after " + body.className);
127+
if (document.getElementById("dark_theme").getAttribute("aria-pressed")=="true"){
128+
document.getElementsByTagName("html")[0].setAttribute("data-theme", "default");
129+
}else{
130+
document.getElementsByTagName("html")[0].setAttribute("data-theme", "dark");
131+
}
136132
}
137133

138134
// Add event listeners
139135
document.getElementById("arraySize").addEventListener("input", onlyNumbersOnInput);
140136
document.getElementById("numbersRange").addEventListener("input", onlyNumbersOnInput);
141137
document.getElementById("searchingNumber").addEventListener("input", onlyNumbersOnInput);
142-
document.getElementById("dark_theme").addEventListener("click",toggleDarkLight);
138+
document.getElementById("dark_theme").addEventListener("click", toggleDarkLight);

‎scripts/InterpolationSearch.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function interpolationSearch(searching_array, asked_number) {
2626
}
2727

2828
if (low <= high && asked_number >= searching_array[low] && asked_number <= searching_array[high]) {
29-
document.querySelector(`[cell_id='${position}']`).style.backgroundColor = "white";
29+
document.querySelector(`[cell_id='${position}']`).style.backgroundColor = "transparent";
3030
delta = (asked_number - searching_array[low]) / (searching_array[high] - searching_array[low]);
3131
position = low + Math.floor((high - low) * delta);
3232
document.querySelector(`[cell_id='${position}']`).style.backgroundColor = "orange";
@@ -45,14 +45,14 @@ function interpolationSearch(searching_array, asked_number) {
4545
}
4646

4747
if (searching_array[position] < asked_number) {
48-
document.querySelector(`[cell_id='${low}']`).style.backgroundColor = "white";
48+
document.querySelector(`[cell_id='${low}']`).style.backgroundColor = "transparent";
4949
low = position + 1;
5050
document.querySelector(`[cell_id='${low}']`).style.backgroundColor = "lightblue";
5151
console.log("Setting the low " + low + " and high " + high);
5252
checks++;
5353
getValuesforIntepolationSteps(low, high, position, false, checks);
5454
} else {
55-
document.querySelector(`[cell_id='${high}']`).style.backgroundColor = "white";
55+
document.querySelector(`[cell_id='${high}']`).style.backgroundColor = "transparent";
5656
high = position - 1;
5757
document.querySelector(`[cell_id='${high}']`).style.backgroundColor = "lightblue";
5858
console.log("Setting the low " + low + " and high " + high);

‎scripts/JumpSearch.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ function jumpSearch(searching_array, asked_number) {
2121
}
2222

2323
if (searching_array[Math.min(step, jump_size) - 1] < asked_number) {
24-
document.querySelector(`[cell_id='${previous}']`).style.backgroundColor = "white";
24+
document.querySelector(`[cell_id='${previous}']`).style.backgroundColor = "transparent";
2525
previous = step;
2626
document.querySelector(`[cell_id='${previous}']`).style.backgroundColor = "orange";
2727
getValuesforJumpSteps(previous, step, false, checks);
2828

2929
if (step < jump_size) {
30-
document.querySelector(`[cell_id='${step}']`).style.backgroundColor = "white";
30+
document.querySelector(`[cell_id='${step}']`).style.backgroundColor = "transparent";
3131
step = Math.min(step + Math.floor(Math.sqrt(jump_size)), jump_size - 1);
3232
document.querySelector(`[cell_id='${step}']`).style.backgroundColor = "lightblue";
3333
console.log("Setting the step " + step);
@@ -47,7 +47,7 @@ function jumpSearch(searching_array, asked_number) {
4747
}
4848

4949
if (searching_array[previous] < asked_number) {
50-
document.querySelector(`[cell_id='${previous}']`).style.backgroundColor = "white";
50+
document.querySelector(`[cell_id='${previous}']`).style.backgroundColor = "transparent";
5151
previous++;
5252
document.querySelector(`[cell_id='${previous}']`).style.backgroundColor = "orange";
5353
checks++;

‎scripts/LinearSearch.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ function linearSearch(searching_array, asked_number) {
1111
first_time_run_linear = false;
1212
document.getElementById("searchingNumber").disabled = true;
1313
} else {
14-
document.querySelector(`[cell_id='${i}']`).style.backgroundColor = "white";
14+
document.querySelector(`[cell_id='${i}']`).style.backgroundColor = "transparent";
1515
i++;
1616
first_time_run_linear = false;
1717
}

‎scripts/StepButtons.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ document.getElementById("rangeinput").addEventListener("change", () => {
9999
let output = document.getElementById("rangevalue");
100100
output.innerHTML = slider.value;
101101
intervalSpeed = slider.value;
102+
showSnackBar(intervalSpeed);
102103
document.getElementById("pause").click();
103104
if (document.getElementById("searchingNumber").value.length > 0) {
104105
intervalHandle = setInterval(() => {

0 commit comments

Comments
 (0)