Skip to content

Commit c214fba

Browse files
amirallami-codeamirallami-code
committed
change style (colors, font ,and more...) & debug "Yes" button & add emojis & improve performance
1 parent 89a65b7 commit c214fba

File tree

5 files changed

+46
-52
lines changed

5 files changed

+46
-52
lines changed

‎fonts/myriad-set-pro_text.ttf

-236 KB
Binary file not shown.

‎index.html

+10-5
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,32 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Binary Search Algorithm - By Amirhossein Allami</title>
8-
<link rel="stylesheet" href="style.css" />
8+
<link rel="stylesheet" href="style/style.css" />
99
</head>
1010
<body>
1111
<div class="div">
1212
<div class="titles-holder">
1313
<h2 class="header-h2">Binary Search Algorithm</h2>
1414
<p class="header-text">
15-
I will find your picked number in lowest guesses
15+
I will find your chosen number, between 1000 numbers in the lowest
16+
estimates
1617
</p>
1718
</div>
1819
<div class="guesses">
1920
<p class="text-guess"></p>
2021
<p class="text-guess2"></p>
21-
<p class="text-guess3"></p>
22+
<p class="text-guess3">
23+
<span class="Bold">Attention!</span> If you answer even one of the
24+
questions <br />
25+
incorrectly, the number will not be found.
26+
</p>
2227
</div>
2328
<div class="buttons-div">
2429
<button class="btns" id="OK">Ok</button>
2530
<button class="btns" id="Yes">Yes</button>
2631
<button class="btns" id="No">No</button>
27-
<button class="btns" id="Lower">Lower</button>
28-
<button class="btns" id="Higher">Higher</button>
32+
<button class="btns" id="Higher">Higher 👆</button>
33+
<button class="btns" id="Lower">Lower 👇</button>
2934
<button class="btns" id="Again">Restart</button>
3035
</div>
3136
</div>

‎js/app.js

+16-22
Original file line numberDiff line numberDiff line change
@@ -12,32 +12,26 @@ const higherBtn = $.querySelector("#Higher")
1212
const againBtn = $.querySelector("#Again")
1313

1414
let allNumbers = []
15-
let shownNumbers = []
16-
1715
let allNumbersLength = 1000
16+
let shownNumbers = []
1817

1918
for (let i = 1; i <= allNumbersLength; i++) {
2019
allNumbers.push(i);
2120
}
2221
headerText.innerHTML = `I will find your picked number, between ${allNumbersLength} numbers in the lowest guesses`
23-
guessTextElem.innerHTML = "pick a number between " + allNumbers[0] + " and " + allNumbers.length + " (Keep this number to your head)"
24-
guessTextElem2.innerHTML = "and Click on \" OK \" Button to Continue"
25-
guessTextElem3.innerHTML = `<span class="Bold">Warning:</span> If you answer even one of the questions <br> incorrectly, the number will not be found.`
2622

27-
yesBtn.style.display = 'none'
28-
noBtn.style.display = 'none'
29-
lowerBtn.style.display = 'none'
30-
higherBtn.style.display = 'none'
31-
againBtn.style.display = 'none'
23+
guessTextElem.innerHTML = "choose a number between " + allNumbers[0] + " and " + allNumbers.length + " (keep this number in mind)"
24+
25+
guessTextElem2.innerHTML = "and Click on \" OK \" Button to Continue"
3226

3327
let low = allNumbers[0]
3428
let mid = allNumbers.length / 2
3529
let high = allNumbers.length
3630
let guessCounter = 1
3731

3832
let guessUserNumber = () => {
39-
guessTextElem2.style.opacity = '0'
40-
guessTextElem3.style.opacity = '0'
33+
guessTextElem2.style.display = 'none'
34+
guessTextElem3.style.display = 'none'
4135
okBtn.style.display = 'none'
4236
yesBtn.style.display = 'inline'
4337
noBtn.style.display = 'inline'
@@ -46,9 +40,9 @@ let guessUserNumber = () => {
4640
}
4741
let stepTwo = event => {
4842
if (event.target.innerHTML === "Yes") {
49-
guessTextElem.style.opacity = '0'
50-
guessTextElem2.style.opacity = '1'
51-
guessTextElem2.innerHTML = "i found your number with a guess, your number is " + mid
43+
guessTextElem.style.display = 'none'
44+
guessTextElem2.style.display = 'flex'
45+
guessTextElem2.innerHTML = "I found your number with only one estimate 😎 your number is " + mid
5246
yesBtn.style.display = 'none'
5347
noBtn.style.display = 'none'
5448
againBtn.style.display = 'inline'
@@ -63,7 +57,7 @@ let stepTwo = event => {
6357
}
6458
let arrayChecker = (array, mid) => {
6559
array.push(mid)
66-
yesBtn.innerHTML = "Yes, it's my number"
60+
yesBtn.innerHTML = "Yes, it's my number 👍"
6761
if (mid == allNumbers.length / 2) {
6862
guessTextElem.innerHTML = `is your number lower than <span class="Bold">${mid}</span> or higher?`
6963
} else {
@@ -81,7 +75,7 @@ let stepThree = event => {
8175
mid = allNumbers.length
8276
showResult()
8377
} else {
84-
if (event.target.innerHTML === "Lower") {
78+
if (event.target.id === "Lower") {
8579
mid -= 2
8680
let numberFinder = shownNumbers.filter(function (rejectedNum) {
8781
return rejectedNum === mid
@@ -94,7 +88,7 @@ let stepThree = event => {
9488
high = mid
9589
mid = mid - Math.ceil(((high - low) / 2))
9690
}
97-
} else if (event.target.innerHTML === "Higher") {
91+
} else if (event.target.id === "Higher") {
9892
mid += 2
9993
let numberFinder = shownNumbers.filter(function (rejectedNum) {
10094
return rejectedNum === mid
@@ -107,16 +101,16 @@ let stepThree = event => {
107101
low = mid
108102
mid = mid + Math.ceil(((high - low) / 2))
109103
}
110-
} else if (event.target.innerHTML === "Yes") {
104+
} else if (event.target.id === "Yes") {
111105
showResult()
112106
}
113107
arrayChecker(shownNumbers, mid)
114108
}
115109
}
116110
let showResult = () => {
117-
guessTextElem.style.opacity = '0'
118-
guessTextElem2.style.opacity = '1'
119-
guessTextElem2.innerHTML = "i beat you with only " + guessCounter + " questions, your number is " + mid
111+
guessTextElem.style.display = 'none'
112+
guessTextElem2.style.display = 'flex'
113+
guessTextElem2.innerHTML = "i beat you with only " + guessCounter + " questions 😎 your number is " + mid
120114
yesBtn.style.display = 'none'
121115
lowerBtn.style.display = 'none'
122116
higherBtn.style.display = 'none'

‎style/fonts.css

-4
This file was deleted.

‎style.css renamed to ‎style/style.css

+20-21
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
@import url("style/fonts.css");
2-
31
:root {
4-
--primary-color: #333ac1;
5-
--warning-color: #dc2626;
6-
7-
--font-family: "myriad";
2+
--primary-color: #fff;
3+
--warning-color: #be185d;
84
}
95

106
*,
@@ -19,10 +15,9 @@ body {
1915
display: flex;
2016
align-items: center;
2117
justify-content: center;
22-
background-color: #e5e5f7;
23-
background-image: radial-gradient(#444df746 1px, #e5e5f7 1px);
18+
background-color: #0b1121;
2419
background-size: 20px 20px;
25-
font-family: var(--font-family);
20+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
2621
color: var(--primary-color);
2722
}
2823
/* helper class */
@@ -42,6 +37,7 @@ body {
4237
.titles-holder {
4338
display: flex;
4439
flex-direction: column;
40+
text-align: center;
4541
gap: 10px;
4642
}
4743

@@ -61,12 +57,12 @@ body {
6157
gap: 20px;
6258
text-align: center;
6359
font-weight: 400;
64-
font-size: 23px;
60+
font-size: 21px;
6561
}
6662

6763
.text-guess2,
6864
.text-guess3 {
69-
transition: all 150ms;
65+
transition: all 150ms ease-in-out;
7066
}
7167
.text-guess3 {
7268
color: var(--warning-color);
@@ -77,30 +73,33 @@ body {
7773
display: flex;
7874
align-items: center;
7975
justify-content: center;
76+
flex-wrap: wrap;
77+
}
78+
#Yes,
79+
#No,
80+
#Lower,
81+
#Higher,
82+
#Again {
83+
display: none;
8084
}
8185
.btns {
8286
cursor: pointer;
83-
width: 250px;
87+
width: 280px;
88+
min-width: max-content;
8489
height: auto;
8590
padding: 15px 25px;
8691
margin: 10px;
8792
background-color: var(--primary-color);
88-
color: white;
93+
color: #0f172a;
8994
font-weight: 500;
9095
border: none;
9196
transition: all 150ms;
9297
border-radius: 5px;
9398
font-size: 20px;
94-
font-family: var(--font-family);
99+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
100+
font-weight: bold;
95101
}
96102

97103
.btns:hover {
98104
background-color: var(--primary-color);
99105
}
100-
101-
@media screen and (max-width: 762px) {
102-
.guesses {
103-
text-align: left;
104-
font-size: 20px;
105-
}
106-
}

0 commit comments

Comments
 (0)