├── index.html ├── myscript.js └── mystyle.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Addition game 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 20 | 23 | 26 | 27 | 30 | 34 | 37 | 38 |
17 |
1 18 |
19 |
21 |
+
22 |
24 |
2
25 |
28 |
=
29 |
31 | 32 | 33 | 35 | 36 |
39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /myscript.js: -------------------------------------------------------------------------------- 1 | //random number appear when start game 2 | var number1; 3 | var number2; 4 | 5 | number1 = Math.floor((Math.random() * 10) + 1); 6 | number2 = Math.floor((Math.random() * 10) + 1); 7 | document.getElementById("number1").innerHTML = number1; 8 | document.getElementById("number2").innerHTML = number2; 9 | 10 | //Answer 11 | var answer = number1 + number2; 12 | 13 | //add click handler with check answer 14 | var checkAnswer = document.querySelector('input[type=text]'); 15 | var value = checkAnswer.value; 16 | var btn = document.querySelector('input[type=button][value=check]'); 17 | 18 | 19 | btn.onclick = function () { 20 | value = checkAnswer.value; 21 | if (value == answer) { 22 | alert('You are correct'); 23 | } else { 24 | alert('You are incorrect, the answer was ' + answer); 25 | } 26 | 27 | document.querySelector('input[type=text]').value = ""; 28 | document.getElementById('number1').innerHTML = ""; 29 | document.getElementById('number2').innerHTML = ""; 30 | number1 = Math.floor((Math.random() * 10) + 1); 31 | number2 = Math.floor((Math.random() * 10) + 1); 32 | document.getElementById('number1').innerHTML = number1; 33 | document.getElementById('number2').innerHTML = number2; 34 | 35 | answer = number1 + number2 36 | 37 | 38 | }; -------------------------------------------------------------------------------- /mystyle.css: -------------------------------------------------------------------------------- 1 | body { 2 | 3 | 4 | background-color:#4d91e2 ; 5 | 6 | } 7 | 8 | 9 | #wrapper { 10 | 11 | width: 750px; 12 | height:350px; 13 | background-color:yellow; 14 | margin-top:120px; 15 | margin-left:220px; 16 | 17 | 18 | } 19 | 20 | #btn { 21 | 22 | background-color:red; 23 | color:#fff; 24 | padding:12px; 25 | border-style:none; 26 | font-weight:bold; 27 | width:100px; 28 | 29 | 30 | } --------------------------------------------------------------------------------