learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html at main · mdn/learning-area · GitHub

Name: learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html at main · mdn/learning-area · GitHub
Rating: 4.8 (7056 reviews)
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<htmllang="en-US">
<head>
<metacharset="utf-8">

<title>Number guessing game</title>

<style>
html {
font-family: sans-serif;
 }

body {
width:50%;
max-width:800px;
min-width:480px;
margin:0 auto;
 }

 .forminput[type="number"] {
width:200px;
 }

 .lastResult {
color: white;
padding:3px;
 }
</style>
</head>

<body>
<h1>Number guessing game</h1>

<p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>

<divclass="form">
<labelfor="guessField">Enter a guess: </label>
<inputtype="number" min="1" max="100" requiredid="guessField" class="guessField">
<inputtype="submit" value="Submit guess" class="guessSubmit">
</div>

<divclass="resultParas">
<pclass="guesses"></p>
<pclass="lastResult"></p>
<pclass="lowOrHi"></p>
</div>

<script>
letrandomNumber=Math.floor(Math.random()*100)+1;
constguesses=document.querySelector('.guesses');
constlastResult=document.querySelector('.lastResult');
constlowOrHi=document.querySelector('.lowOrHi');
constguessSubmit=document.querySelector('.guessSubmit');
constguessField=document.querySelector('.guessField');
letguessCount=1;
letresetButton;

functioncheckGuess(){
constuserGuess=Number(guessField.value);
if(guessCount===1){
guesses.textContent='Previous guesses: ';
}

guesses.textContent=`${guesses.textContent}${userGuess}`;

if(userGuess===randomNumber){
lastResult.textContent='Congratulations! You got it right!';
lastResult.style.backgroundColor='green';
lowOrHi.textContent='';
setGameOver();
}elseif(guessCount===10){
lastResult.textContent='!!!GAME OVER!!!';
lowOrHi.textContent='';
setGameOver();
}else{
lastResult.textContent='Wrong!';
lastResult.style.backgroundColor='red';
if(userGuess<randomNumber){
lowOrHi.textContent='Last guess was too low!';
}elseif(userGuess>randomNumber){
lowOrHi.textContent='Last guess was too high!';
}
}

guessCount++;
guessField.value='';
guessField.focus();
}

guessSubmit.addEventListener('click',checkGuess);

functionsetGameOver(){
guessField.disabled=true;
guessSubmit.disabled=true;
resetButton=document.createElement('button');
resetButton.textContent='Start new game';
document.body.appendChild(resetButton);
resetButton.addEventListener('click',resetGame);
}

functionresetGame(){
guessCount=1;
constresetParas=document.querySelectorAll('.resultParas p');
for(constresetParaofresetParas){
resetPara.textContent='';
}

resetButton.parentNode.removeChild(resetButton);
guessField.disabled=false;
guessSubmit.disabled=false;
guessField.value='';
guessField.focus();
lastResult.style.backgroundColor='white';
randomNumber=Math.floor(Math.random()*100)+1;
}
</script>
</body>
</html>