Skip to content

Commit 4b92459

Browse files
amirallami-codeamirallami-code
authored
Update app.js
1 parent 85d6418 commit 4b92459

File tree

1 file changed

+57
-60
lines changed

1 file changed

+57
-60
lines changed

‎js/app.js

+57-60
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,76 @@
11
let $ = document
2-
const guessTextElem = $.querySelector(".text-guess")
3-
const guessTextElem2 = $.querySelector(".text-guess2")
4-
const guessTextElem3 = $.querySelector(".text-guess3")
5-
const buttonsWrapper = $.querySelector(".buttons-div")
6-
const headerText = $.querySelector(".header-text")
7-
const okBtn = $.querySelector("#OK")
8-
const yesBtn = $.querySelector("#Yes")
9-
const noBtn = $.querySelector("#No")
10-
const lowerBtn = $.querySelector("#Lower")
11-
const higherBtn = $.querySelector("#Higher")
12-
const againBtn = $.querySelector("#Again")
2+
const text_element = $.querySelector(".text-guess")
3+
const second_text_element = $.querySelector(".text-guess2")
4+
const buttons_container = $.querySelector(".buttons-div")
5+
const holder_container = $.querySelector(".titles-holder")
6+
const okay_button = $.querySelector("#OK")
7+
const yes_button = $.querySelector("#Yes")
8+
const no_button = $.querySelector("#No")
9+
const lower_button = $.querySelector("#Lower")
10+
const higher_button = $.querySelector("#Higher")
11+
const again_button = $.querySelector("#Again")
1312

13+
let numbers_len = 1000
1414
let allNumbers = []
15-
let allNumbersLength = 1000
1615
let shownNumbers = []
1716

18-
for (let i = 1; i <= allNumbersLength; i++) {
17+
for (let i = 1; i <= numbers_len; i++) {
1918
allNumbers.push(i);
2019
}
21-
headerText.innerHTML = `I will find your picked number, between ${allNumbersLength} numbers in the lowest guesses`
22-
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"
20+
holder_container.insertAdjacentHTML('beforeend', `<p class="header-text">I will find your chosen number, between ${numbers_len} numbers in the lowest estimates</p>`)
21+
text_element.innerHTML = `choose a number between ${allNumbers[0]} and ${allNumbers.length} (keep this number in mind)`
22+
second_text_element.innerHTML = `Click on " OK " Button to Continue \n <p class="text-guess3"><span class="Bold">Attention!</span> If you answer even one of the questions <br />incorrectly, the number will not be found.</p>`
2623

2724
let low = allNumbers[0]
2825
let mid = allNumbers.length / 2
2926
let high = allNumbers.length
3027
let guessCounter = 1
3128

32-
let guessUserNumber = () => {
33-
guessTextElem2.style.display = 'none'
34-
guessTextElem3.style.display = 'none'
35-
okBtn.style.display = 'none'
36-
yesBtn.style.display = 'inline'
37-
noBtn.style.display = 'inline'
38-
guessTextElem.innerHTML = mid + " is your number? "
39-
buttonsWrapper.addEventListener("click", stepTwo)
29+
let step_one = () => {
30+
second_text_element.style.display = 'none'
31+
okay_button.style.display = 'none'
32+
yes_button.style.display = 'inline'
33+
no_button.style.display = 'inline'
34+
text_element.innerHTML = `is ${mid} your Number?`
35+
buttons_container.addEventListener("click", step_two)
4036
}
41-
let stepTwo = event => {
37+
let step_two = event => {
38+
console.log(event)
4239
if (event.target.innerHTML === "Yes") {
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
46-
yesBtn.style.display = 'none'
47-
noBtn.style.display = 'none'
48-
againBtn.style.display = 'inline'
49-
againBtn.addEventListener('click', AgainFunction)
40+
text_element.style.display = 'none'
41+
second_text_element.style.display = 'flex'
42+
second_text_element.innerHTML = "I found your number with only one estimate 😎 your number is " + mid
43+
yes_button.style.display = 'none'
44+
no_button.style.display = 'none'
45+
again_button.style.display = 'inline'
46+
again_button.addEventListener('click', reload_fn)
5047
} else if (event.target.innerHTML === "No") {
51-
yesBtn.style.display = 'none'
52-
noBtn.style.display = 'none'
53-
lowerBtn.style.display = 'inline'
54-
higherBtn.style.display = 'inline'
48+
yes_button.style.display = 'none'
49+
no_button.style.display = 'none'
50+
lower_button.style.display = 'inline'
51+
higher_button.style.display = 'inline'
5552
arrayChecker(shownNumbers, mid)
5653
}
5754
}
5855
let arrayChecker = (array, mid) => {
5956
array.push(mid)
60-
yesBtn.innerHTML = "Yes, it's my number 👍"
57+
yes_button.innerHTML = "Yes, it's my number 👍"
6158
if (mid == allNumbers.length / 2) {
62-
guessTextElem.innerHTML = `is your number lower than <span class="Bold">${mid}</span> or higher?`
59+
text_element.innerHTML = `is your number lower than <span class="Bold">${mid}</span> or higher?`
6360
} else {
64-
guessTextElem.innerHTML = `is <span class="Bold">${mid}</span> your number? If no, is your number lower than <span class="Bold">${mid}</span> or higher?`
61+
text_element.innerHTML = `is <span class="Bold">${mid}</span> your number? If no, is your number lower than <span class="Bold">${mid}</span> or higher?`
6562
}
66-
buttonsWrapper.addEventListener("click", stepThree)
63+
buttons_container.addEventListener("click", step_three)
6764
}
68-
let stepThree = event => {
69-
yesBtn.style.display = 'inline'
65+
let step_three = event => {
66+
yes_button.style.display = 'inline'
7067
guessCounter++
7168
if (mid === (allNumbers[0] + 1)) {
7269
mid = allNumbers[0]
73-
showResult()
70+
show_result()
7471
} else if (mid === allNumbers.length - 1) {
7572
mid = allNumbers.length
76-
showResult()
73+
show_result()
7774
} else {
7875
if (event.target.id === "Lower") {
7976
mid -= 2
@@ -82,7 +79,7 @@ let stepThree = event => {
8279
})
8380
if (numberFinder.length > 0) {
8481
mid += 1
85-
showResult()
82+
show_result()
8683
} else {
8784
mid += 2
8885
high = mid
@@ -95,29 +92,29 @@ let stepThree = event => {
9592
})
9693
if (numberFinder.length > 0) {
9794
mid -= 1
98-
showResult()
95+
show_result()
9996
} else {
10097
mid -= 2
10198
low = mid
10299
mid = mid + Math.ceil(((high - low) / 2))
103100
}
104101
} else if (event.target.id === "Yes") {
105-
showResult()
102+
show_result()
106103
}
107104
arrayChecker(shownNumbers, mid)
108105
}
109106
}
110-
let showResult = () => {
111-
guessTextElem.style.display = 'none'
112-
guessTextElem2.style.display = 'flex'
113-
guessTextElem2.innerHTML = "i beat you with only " + guessCounter + " questions 😎 your number is " + mid
114-
yesBtn.style.display = 'none'
115-
lowerBtn.style.display = 'none'
116-
higherBtn.style.display = 'none'
117-
againBtn.style.display = 'inline'
118-
againBtn.addEventListener('click', AgainFunction)
107+
let show_result = () => {
108+
text_element.style.display = 'none'
109+
second_text_element.style.display = 'flex'
110+
second_text_element.innerHTML = "i beat you with only " + guessCounter + " questions 😎 your number is " + mid
111+
yes_button.style.display = 'none'
112+
lower_button.style.display = 'none'
113+
higher_button.style.display = 'none'
114+
again_button.style.display = 'inline'
115+
again_button.addEventListener('click', reload_fn)
119116
}
120-
let AgainFunction = () => {
117+
let reload_fn = () => {
121118
location.reload()
122119
}
123-
okBtn.addEventListener('click', guessUserNumber)
120+
okay_button.addEventListener('click', step_one)

0 commit comments

Comments
 (0)