Guess-My-Number/script.js at main · swag-code/Guess-My-Number · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
"use strict";

/*
console.log(document.querySelector(`.message`).textContent)
document.querySelector(`.message`).textContent = `Correct Number!`

document.querySelector(`.number`).textContent = 13
document.querySelector(`.score`).textContent = 10

document.querySelector(`.guess`).value = 23
console.log(document.querySelector(`.guess`).value)
*/

let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highscore = 0;
//Refactoring
const displayMessage = function (message) {
  document.querySelector(`.message`).textContent = message;
};

document.querySelector(`.check`).addEventListener("click", function () {
  const guess = Number(document.querySelector(`.guess`).value);
  console.log(guess, typeof guess);

  //When there is no input
  if (!guess) {
    // document.querySelector(`.message`).textContent = `No Number!`
    displayMessage(`No Number!`);

    //When player wins
  } else if (guess === secretNumber) {
    // document.querySelector(`.message`).textContent = `Correct Number!`
    displayMessage(`Correct Number!`);
    document.querySelector(`.number`).textContent = secretNumber;

    document.querySelector(`body`).style.backgroundColor = `#60b347`;
    document.querySelector(`.number`).style.width = `30rem`;

    if (score > highscore) {
      highscore = score;
      document.querySelector(`.highscore`).textContent = highscore;
    }

    //When guess is wrong >> Refactoring
  } else if (guess !== secretNumber) {
    if (score > 1) {
      // document.querySelector(`.message`).textContent = guess > secretNumber ? `Too High!` : `Too Low!`
      displayMessage(guess > secretNumber ? `Too High!` : `Too Low!`);
      score--;
      document.querySelector(`.score`).textContent = score;
    } else {
      // document.querySelector(`.message`).textContent = `You lost the game!`
      displayMessage(`You lost the game!`);
      document.querySelector(`.score`).textContent = 0;
    }
  }
  /*
           //When guess is too high
       } else if (guess > secretNumber) {
           if (score > 1) {
               document.querySelector(`.message`).textContent = `Too High!`
               score--
               document.querySelector(`.score`).textContent = score
           } else {
               document.querySelector(`.message`).textContent = `You lost the game!`
               document.querySelector(`.score`).textContent = 0
           }

           //When guess is too low
       } else if (guess < secretNumber) {
           if (score > 1) {
               document.querySelector(`.message`).textContent = `Too Low!`
               score--
               document.querySelector(`.score`).textContent = score
           } else {
               document.querySelector(`.message`).textContent = `You lost the game!`
               document.querySelector(`.score`).textContent = 0
           }
       }
   */
});

document.querySelector(`.again`).addEventListener(`click`, function () {
  score = 20;
  secretNumber = Math.trunc(Math.random() * 20) + 1;

  // document.querySelector(`.message`).textContent = `Start guessing...`
  displayMessage(`Start guessing...`);
  document.querySelector(`.score`).textContent = score;
  document.querySelector(`.number`).textContent = `?`;
  document.querySelector(`.guess`).value = ``;

  document.querySelector(`body`).style.backgroundColor = `#222`;
  document.querySelector(`.number`).style.width = `15rem`;
});