Adding Math addition game

RachitSahu26 · Apr 4, 2022 · e77ecf8 · e77ecf8
1 parent 82c7994
commit e77ecf8
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 0 deletions.
diff --git a/108 - Maths addition/README.md b/108 - Maths addition/README.md
@@ -0,0 +1 @@
+# math-addition-app-project
diff --git a/108 - Maths addition/app.js b/108 - Maths addition/app.js
@@ -0,0 +1,32 @@
+//generate random numbers
+let firstNumber = parseInt(Math.random()*10);
+let secondNumber = parseInt(Math.random()*10);
+
+//get the total
+let total = firstNumber + secondNumber;
+
+//display numbers on the canvas
+let primary = document.getElementById('primary-number');
+    primary.innerHTML = `<p>${firstNumber}</p>`;
+
+let secondary = document.getElementById('secondary-number');
+    secondary.innerHTML = `<p>${secondNumber}</p>`
+
+
+//get guess from user
+let button = document.getElementById('btn')
+
+button.addEventListener('click', function(){
+
+let guess = document.getElementById('guess').value;
+    guess = Number(guess);
+//check answer
+if (guess === total){
+    alert('Correct');
+    window.location.reload()
+} else {
+    alert('Sorry. Incorrect. The correct answer was ' + total + '.')
+    window.location.reload()
+
+}
+    });
diff --git a/108 - Maths addition/index.html b/108 - Maths addition/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div id="canvas">
+        <div id="primary-number">7</div>
+        <div id="add">+</div>
+        <div id="secondary-number">10</div>
+        <div id="equal">=</div>
+        <div>
+            <input type="number" id="guess">
+        </div>
+        <div>
+            <button id="btn">check</button>
+        </div>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/108 - Maths addition/style.css b/108 - Maths addition/style.css
@@ -0,0 +1,60 @@
+body{
+    background: rgb(0, 0, 0);
+}
+
+#canvas{
+    box-sizing:border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgb(255, 255, 255);
+    width: 700px;
+    height: 300px;
+    margin: 50px auto;
+    border-radius: 25px;
+}
+
+#primary-number, #secondary-number{
+    display:flex;
+    align-items:center;
+    justify-content: center;
+    font-size: 40px;
+    font-weight: bold;
+    width: 125px;
+    height: 125px;
+    box-sizing: border-box;
+}
+
+#primary-number{
+    border: solid 4px rgb(0, 0, 0);
+    border-radius: 25px;
+}
+
+#secondary-number{
+    border: solid 4px rgb(0, 0, 0);
+    border-radius: 25px;
+}
+
+#add, #equal{
+    font-weight: bold;
+    font-size: 40px;
+    padding: 5px;
+}
+input{
+    border: solid 2px rgb(0, 0, 0);
+    width: 150px;
+    height: 30px;
+    padding-left: 25px;
+    border-radius: 15px;
+}
+
+button{
+    width: 100px;
+    height: 35px;
+    margin: 5px;
+    background: rgb(0, 0, 0);
+    color: white;
+    border: 1px solid lightgrey;
+    border-radius: 25px;
+}
+