NumberGuessingGame/script.js at master · zaids06/NumberGuessingGame · 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
'use strict';
let res = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let hS = 0;

document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(document.querySelector('.guess').value);
  const diff = guess - res;
  //loop
  if (score > 0) {
    //check number is out of the limits
    if (guess === 0 || guess > 20 || guess < 1)
      document.querySelector('.message').textContent = '🚫 Wrong Choice';
    //valid
    else {
      //found the number
      if (res === guess) {
        document.querySelector('.message').textContent = '🥇 YOU WON!!!! 🏆';
        document.querySelector('.number').textContent = res;
        document.querySelector('body').style.backgroundColor = '#60b347';
        document.querySelector('.number').style.width = '25rem';
        hS = Number(document.querySelector('.highscore').textContent);
        console.log(hS);
        if (hS < score)
          document.querySelector('.highscore').textContent = score;
      }
      //near to the number
      else if (diff < 5 && diff > -5) {
        score -= 1;
        if (diff > 0 && diff < 5)
          document.querySelector('.message').textContent =
            '😉 You are little ahead';
        else
          document.querySelector('.message').textContent =
            '😉 You are little below';
      }
      //far from the number
      else {
        score -= 1;
        if (diff > 0)
          document.querySelector('.message').textContent =
            '🤔 You are far ahead';
        else
          document.querySelector('.message').textContent =
            '🤔 You are far behind';
      }
    }
    let scoreRes = ' Score: ' + score;
    if (score >= 15)
      document.querySelector('.label-score').textContent = '😊' + scoreRes;
    else if (score >= 10)
      document.querySelector('.label-score').textContent = '😐' + scoreRes;
    else if (score >= 5)
      document.querySelector('.label-score').textContent = '😕' + scoreRes;
    else document.querySelector('.label-score').textContent = '🏳️' + scoreRes;
  } else {
    document.querySelector('.label-score').textContent =
      'Better luck next time 🤠';
  }
});

document.querySelector('.again').addEventListener('click', function () {
  document.querySelector('.message').textContent = 'Start guessing...';
  score = 20;
  res = Math.trunc(Math.random() * 20) + 1;
  document.querySelector('.number').textContent = '?';
  document.querySelector('.guess').value = '';
  document.querySelector('.label-score').textContent = '💯 Score: ' + score;
  document.querySelector('body').style.backgroundColor = '#222';
  document.querySelector('.number').style.width = '15rem';
});