Build a Math Game with JavaScript

Created on October 17th, 2021

Hey! I'm Lia Sue Kim.
In this video tutorial we're going to create a math game using HTML, CSS and JavaScript. You don't need to download any files or folders. Everything can be done within a code editor and using core front end technologies HTML, CSS and JS.
All you need is:

  • A Text / Code Editor and a browser
  • or An online text editor like codepen.io , codesandbox.ioΒ  etc..
  • Chose the code editor you feel comfortable with

Step 1 - In HTML, we have 2 parts.

  1. The Game Markup / UI
  2. A modal for right and wrong answers
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>

       <!-- The Game -->
       <div class="math-games">
           <span class="items">
               <span class="blue">4</span> - <span class="red">2</span> = ?
           </span>
           <input id="input-el" type="text" class="items" placeholder="type your answer ">
           <button id="check-btn" class="items">Check</button>
       </div>

       
  <!-- Modal for wrong and right answers-->

  <div id="myModal" class="modal-container">
    <span class="close">&times;</span>
      <p class="theAnswer">The answer</p>
  </div>


        <script src="app.js" async defer></script>
    </body>
</html>

Step 2 - CSS

For CSS you just have to write everything from top to bottom. But I highly recommend you to watch the video.
NOTE: for .modal-container { display: none; } display is set to none at the end. That's because we wanna show the modal when we click on the button.


/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
/* remove basic style for the page and border-box */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* centering to demo */
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 20px 'Montserrat', sans-serif;
}

/* the container */
.math-games {
  background: #fcfcfc;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 5px 10px #34495e;
  width: 250px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
input {
  border: 1px dashed #333;
  outline: none;
  border-radius: 5px;
  background: none;
}
.blue {
  color: blue;
}
.red {
  color: red;
}
.math-games span {
  font: 40px "Indie Flower", cursive;
}
button {
  border: none;
  background: #1abc9c;
  color: #fff;
  border-radius: 5px;
  font-size: 20px;
}
button:hover {
  cursor: pointer;
}
.items {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
}
/* Styling the modal */
.modal-container {
  position: absolute;
  right: 50px; 
  bottom: 40px;
  width: 300px;
  height: 100px;
  border: 1px solid #555;
  padding: 20px;
  background: #e74c3c;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  box-shadow: 2px 2px 2px #555;
  display: none;
}
.close {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 40px;
}
.close:hover {
  cursor: pointer;
}

Step 3 - JavaScript

Watch the video for the explanation but here's the JS Code:


console.clear();

// The game variables 
const inputEl = document.querySelector("#input-el")
const checkBtn = document.querySelector("#check-btn")



// the modal variables 
// modal, the answer, x sign
const modal = document.querySelector("#myModal")
const theAnswer = document.querySelector(".theAnswer")
const closeBtn = document.querySelector(".close")


// Answers: "Correct, good work" , "Incorrect, try again"
let answerOptions = ["Correct, good work", "Incorrect, try again"]

// check btn function 
checkBtn.addEventListener("click", function() {
    modal.style.display = "block"
    let userInput = parseInt(inputEl.value) // number
    if(userInput === 2) {
        modal.style.background = "rgb(46, 204, 113)"
        theAnswer.textContent = answerOptions[0]
    } else {
        modal.style.background = "#e74c3c"
        theAnswer.textContent = answerOptions[1]
    }
})

closeBtn.addEventListener("click", function() {
    modal.style.display = "none"
})

Comments (0)