1+ <!DOCTYPE html>
2+ < html >
3+
4+ < head >
5+ < meta charset ="utf-8 ">
6+ < link rel ="stylesheet " type ="text/css " href ="style.css ">
7+
8+
9+ < title > Number guessing game</ title >
10+
11+ </ head >
12+
13+ < body >
14+ < h1 > Number guessing game</ h1 >
15+
16+ < 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
17+ your guess was too high or too low.</ p >
18+
19+ < div class ="form ">
20+ < label for ="guessField "> Enter a guess: </ label > < input type ="text " id ="guessField " class ="guessField ">
21+ < input type ="submit " value ="Submit guess " class ="guessSubmit ">
22+ </ div >
23+
24+ < div class ="resultParas ">
25+ < p class ="guesses "> </ p >
26+ < p class ="lastResult "> </ p >
27+ < p class ="lowOrHi "> </ p >
28+ </ div >
29+
30+ < script >
31+
32+ let randomNumber = Math . floor ( Math . random ( ) * 100 ) + 1 ;
33+
34+ const guesses = document . querySelector ( '.guesses' ) ;
35+ const lastResult = document . querySelector ( '.lastResult' ) ;
36+ const loworHi = document . querySelector ( '.loworHi' ) ;
37+
38+ const guessSubmit = document . querySelector ( '.guessSubmit' ) ;
39+ const guessField = document . querySelector ( '.guessField' ) ;
40+
41+ let guessCount = 1 ;
42+ let resetButton ;
43+
44+
45+ function checkGuess ( ) {
46+ let userGuess = Number ( guessField . value ) ;
47+ if ( guessCount === 1 ) {
48+ guesses . textContent = 'Previous guesses: ' ;
49+ }
50+
51+ guesses . textContent += userGuess + ' ' ;
52+
53+ if ( userGuess === randomNumber ) {
54+ lastResult . textContent = 'Congratulations! You got it right!' ;
55+ lastResult . style . backgroundColor = 'green' ;
56+ loworHi . textContent = '' ;
57+ setGameOver ( ) ;
58+ } else if ( guessCount === 10 ) {
59+ lastResult . textContent = '!!!GAME OVER!!!' ;
60+ loworHi . textContent = '' ;
61+ setGameOver ( ) ;
62+ } else {
63+ lastResult . textContent = 'Wrong!' ;
64+ lastResult . style . backgroundColor = 'red' ;
65+ if ( userGuess < randomNumber ) {
66+ loworHi . textContent = 'Last guess was too low!' ;
67+ } else if ( userGuess > randomNumber ) {
68+ loworHi . textContent = 'Last guess was too high!' ;
69+ }
70+ }
71+ guessCount ++ ;
72+ guessField . value = '' ;
73+ guessField . focus ( ) ;
74+
75+ }
76+
77+ guessSubmit . addEventListener ( 'click' , checkGuess ) ;
78+
79+ function setGameOver ( ) {
80+ guessField . disabled = true ;
81+ guessSubmit . disabled = true ;
82+ resetButton = document . createElement ( 'button' ) ;
83+ resetButton . textContent = 'Start new game' ;
84+ document . body . appendChild ( resetButton ) ;
85+ resetButton . addEventListener ( 'click' , resetGame ) ;
86+ }
87+
88+ function resetGame ( ) {
89+ guessCount = 1 ;
90+
91+ const resetParas = document . querySelectorAll ( '.resultParas p' ) ;
92+ for ( let i = 0 ; i < resetParas . length ; i ++ ) {
93+ resetParas [ i ] . textContent = '' ;
94+ }
95+
96+ resetButton . parentNode . removeChild ( resetButton ) ;
97+
98+ guessField . disabled = false ;
99+ guessSubmit . disabled = false ;
100+ guessField . value = '' ;
101+ guessField . focus ( ) ;
102+
103+ lastResult . style . backgroundColor = 'white' ;
104+
105+ randomNumber = Math . floor ( Math . random ( ) * 100 ) + 1 ;
106+ }
107+ </ script >
108+
109+ </ body >
110+
111+ </ html >
0 commit comments