├── index.html
├── myscript.js
└── mystyle.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Addition game
7 |
8 |
9 |
10 |
11 |
12 |
13 |
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 | }
--------------------------------------------------------------------------------