Skip to content

Commit e77ecf8

Browse files
kalashvasaniyakalashvasaniya
committed
Adding Math addition game
1 parent 82c7994 commit e77ecf8

File tree

4 files changed

+118
-0
lines changed

4 files changed

+118
-0
lines changed

‎108 - Maths addition/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# math-addition-app-project

‎108 - Maths addition/app.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
//generate random numbers
2+
let firstNumber = parseInt(Math.random()*10);
3+
let secondNumber = parseInt(Math.random()*10);
4+
5+
//get the total
6+
let total = firstNumber + secondNumber;
7+
8+
//display numbers on the canvas
9+
let primary = document.getElementById('primary-number');
10+
primary.innerHTML = `<p>${firstNumber}</p>`;
11+
12+
let secondary = document.getElementById('secondary-number');
13+
secondary.innerHTML = `<p>${secondNumber}</p>`
14+
15+
16+
//get guess from user
17+
let button = document.getElementById('btn')
18+
19+
button.addEventListener('click', function(){
20+
21+
let guess = document.getElementById('guess').value;
22+
guess = Number(guess);
23+
//check answer
24+
if (guess === total){
25+
alert('Correct');
26+
window.location.reload()
27+
} else {
28+
alert('Sorry. Incorrect. The correct answer was ' + total + '.')
29+
window.location.reload()
30+
31+
}
32+
});

‎108 - Maths addition/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<div id="canvas">
12+
<div id="primary-number">7</div>
13+
<div id="add">+</div>
14+
<div id="secondary-number">10</div>
15+
<div id="equal">=</div>
16+
<div>
17+
<input type="number" id="guess">
18+
</div>
19+
<div>
20+
<button id="btn">check</button>
21+
</div>
22+
</div>
23+
<script src="app.js"></script>
24+
</body>
25+
</html>

‎108 - Maths addition/style.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
body{
2+
background: rgb(0, 0, 0);
3+
}
4+
5+
#canvas{
6+
box-sizing:border-box;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
background: rgb(255, 255, 255);
11+
width: 700px;
12+
height: 300px;
13+
margin: 50px auto;
14+
border-radius: 25px;
15+
}
16+
17+
#primary-number, #secondary-number{
18+
display:flex;
19+
align-items:center;
20+
justify-content: center;
21+
font-size: 40px;
22+
font-weight: bold;
23+
width: 125px;
24+
height: 125px;
25+
box-sizing: border-box;
26+
}
27+
28+
#primary-number{
29+
border: solid 4px rgb(0, 0, 0);
30+
border-radius: 25px;
31+
}
32+
33+
#secondary-number{
34+
border: solid 4px rgb(0, 0, 0);
35+
border-radius: 25px;
36+
}
37+
38+
#add, #equal{
39+
font-weight: bold;
40+
font-size: 40px;
41+
padding: 5px;
42+
}
43+
input{
44+
border: solid 2px rgb(0, 0, 0);
45+
width: 150px;
46+
height: 30px;
47+
padding-left: 25px;
48+
border-radius: 15px;
49+
}
50+
51+
button{
52+
width: 100px;
53+
height: 35px;
54+
margin: 5px;
55+
background: rgb(0, 0, 0);
56+
color: white;
57+
border: 1px solid lightgrey;
58+
border-radius: 25px;
59+
}
60+

0 commit comments

Comments
 (0)