├── index.html
├── myscript.js
└── mystyle.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Number guessing game
7 |
8 |
9 |
10 |
11 | Number guessing game
12 | Try and guess a random number between 1 and 500.
13 | You have 10 attempts to guess the right number
14 |
15 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/myscript.js:
--------------------------------------------------------------------------------
1 | var randomNumber = Math.floor(Math.random() * 500) + 1;
2 | var guesses = document.querySelector('.guesses');
3 | var lastResult = document.querySelector('.lastResult');
4 | var lowOrHi = document.querySelector('.lowOrHi');
5 | var guessSubmit = document.querySelector('.guessSubmit');
6 | var guessField = document.querySelector('.guessField');
7 | var guessCount = 1;
8 | var resetButton;
9 |
10 | guessField.focus();
11 |
12 | function checkGuess() {
13 | var userGuess = Number(guessField.value);
14 | if(guessCount === 1) {
15 | guesses.textContent = 'Previous guesses: ';
16 | }
17 | guesses.textContent += userGuess + ' ';
18 | guesses.style.backgroundColor = 'blue';
19 | if(userGuess === randomNumber) {
20 | lastResult.textContent = 'Congratulations! You got it right!';
21 | lastResult.style.backgroundColor = 'green';
22 | lowOrHi.textContent = '';
23 | setGameOver();
24 | } else if(guessCount === 10) {
25 | lastResult.textContent = '!!!GAME OVER!!!';
26 | lowOrHi.textContent = '';
27 | setGameOver();
28 | } else {
29 | lastResult.textContent = 'Wrong!';
30 | lastResult.style.backgroundColor = 'red';
31 | if(userGuess < randomNumber) {
32 | lowOrHi.textContent = 'Last guess was too low!';
33 | } else if(userGuess > randomNumber) {
34 | lowOrHi.textContent = 'Last guess was too high!';
35 | }
36 | }
37 |
38 | guessCount++;
39 | guessField.value = '';
40 | guessField.focus();
41 | }
42 |
43 |
44 | guessSubmit.addEventListener('click', checkGuess);
45 |
46 | function setGameOver() {
47 | guessField.disabled = true;
48 | guessSubmit.disabled = true;
49 | resetButton = document.createElement('button');
50 | resetButton.textContent = 'Start new game';
51 | document.body.appendChild(resetButton);
52 | resetButton.addEventListener('click', resetGame);
53 | }
54 |
55 | function resetGame() {
56 | guessCount = 1;
57 |
58 | var resetParas = document.querySelectorAll('.resultParas p');
59 | for(var i = 0 ; i < resetParas.length ; i++) {
60 | resetParas[i].textContent = '';
61 | }
62 |
63 | resetButton.parentNode.removeChild(resetButton);
64 |
65 | guessField.disabled = false;
66 | guessSubmit.disabled = false;
67 | guessField.value = '';
68 | guessField.focus();
69 |
70 | lastResult.style.backgroundColor = '#12aab4;'
71 | guesses.style.backgroundColor = '#12aab4;'
72 |
73 | randomNumber = Math.floor(Math.random() * 500) + 1;
74 | }
75 |
76 |
--------------------------------------------------------------------------------
/mystyle.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-family: sans-serif,arial;
3 | }
4 |
5 | body {
6 | width: 50%;
7 | max-width: 800px;
8 | min-width: 480px;
9 | margin: 0 auto;
10 | }
11 |
12 | .lastResult {
13 |
14 | color: white;
15 | padding: 7px;
16 |
17 | }
18 |
19 | .guesses {
20 | color: white;
21 | padding: 7px;
22 | /*padding-left:35px;*/
23 |
24 | }
25 |
26 | button {
27 |
28 | background-color: purple;
29 | color:#fff;
30 | width:250px;
31 | height:50px;
32 | border-radius:25px;
33 | font-size:30px;
34 | border-style: none;
35 | margin-top:30px;
36 | margin-left:50px;
37 | }
38 |
39 | #subt {
40 | background-color: yellow;
41 | color:#000;
42 | width:350px;
43 | height:50px;
44 | border-radius:25px;
45 | font-size:30px;
46 | border-style: none;
47 | margin-top:50px;
48 | margin-left:75px;
49 | }
50 |
51 |
52 | #guessField {
53 | color:#000;
54 | width:550px;
55 | height:100px;
56 | font-size:30px;
57 | border-style: none;
58 | margin-top:25px;
59 | font-size:45px;
60 | margin-left:50px;
61 | border: 5px solid #14727d;
62 | text-align: center;
63 | }
64 |
65 | #guess {
66 | font-size:55px;
67 | margin-left:90px;
68 | margin-top:120px;
69 | color:#fff;
70 | }
71 |
72 | .guesses {
73 |
74 | background-color:#12aab4;
75 | }
76 |
77 | #wrapper {
78 |
79 | width:750px;
80 | height:550px;
81 | background-color:#12aab4;
82 | color:#fff;
83 | font-size:25px;
84 |
85 | }
86 |
87 | h1 {
88 |
89 | background-color:#7b3056;
90 | color:#fff;
91 | padding-left:130px;
92 | width:650px;
93 | }
94 |
95 | p {
96 | font-size:20px;
97 | text-align:center;
98 |
99 | }
--------------------------------------------------------------------------------