From e77ecf843370511453f1e9f4e2effbeb01fd34cf Mon Sep 17 00:00:00 2001 From: kalash Date: Mon, 4 Apr 2022 23:02:42 +0530 Subject: [PATCH] Adding Math addition game --- 108 - Maths addition/README.md | 1 + 108 - Maths addition/app.js | 32 ++++++++++++++++++ 108 - Maths addition/index.html | 25 ++++++++++++++ 108 - Maths addition/style.css | 60 +++++++++++++++++++++++++++++++++ 4 files changed, 118 insertions(+) create mode 100644 108 - Maths addition/README.md create mode 100644 108 - Maths addition/app.js create mode 100644 108 - Maths addition/index.html create mode 100644 108 - Maths addition/style.css diff --git a/108 - Maths addition/README.md b/108 - Maths addition/README.md new file mode 100644 index 00000000..a4954f9e --- /dev/null +++ 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 new file mode 100644 index 00000000..21533c01 --- /dev/null +++ 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 = `

${firstNumber}

`; + +let secondary = document.getElementById('secondary-number'); + secondary.innerHTML = `

${secondNumber}

` + + +//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() + +} + }); \ No newline at end of file diff --git a/108 - Maths addition/index.html b/108 - Maths addition/index.html new file mode 100644 index 00000000..66ae07bc --- /dev/null +++ b/108 - Maths addition/index.html @@ -0,0 +1,25 @@ + + + + + + + + Document + + +
+
7
+
+
+
10
+
=
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/108 - Maths addition/style.css b/108 - Maths addition/style.css new file mode 100644 index 00000000..db19a262 --- /dev/null +++ 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; +} +