Create an Addition Game with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create an addition game with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app addition-game

with NPM to create our React project.

Create the Addition Game

To create the addition game, we write:

import React, { useState } from "react";

export default function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  const [sum, setSum] = useState(0);
  const [score, setScore] = useState(0);

  const generateQuestion = () => {
    setNum1(Math.ceil(Math.random() * 10));
    setNum2(Math.ceil(Math.random() * 10));
  };

  const submit = (e) => {
    e.preventDefault();
    const formValid = +sum >= 0;
    if (!formValid) {
      return;
    }
    if (+num1 + +num2 === +sum) {
      setScore((score) => score + 1);
    }
    generateQuestion();
  };

  return (
    <div className="App">
      <form onSubmit={submit}>
        <div>
          <label>
            {num1} + {num2}
          </label>
          <input value={sum} onChange={(e) => setSum(e.target.value)} />
        </div>

        <button type="submit">check</button>
      </form>
      <button type="button" onClick={generateQuestion}>
        start game
      </button>
      <p>score: {score}</p>
    </div>
  );
}

We have the num1 , num2 , sum , and score states created with the useState hook.

num1 and num2 are the parts of the addition question.

sum has the sum we enter.

score has the score.

Below that, we have the generateQuestion function to generate the num1 and num2 values.

We call

setNum1 and setNum2 to set them.

Math.random creates a random number between 0 and 1.

Math.ceil rounds up to the nearest integer.

Then we have the submit function that checks the sum value against the sum of num1 and num2 .

Before we do the check, we call e.preventDefault() so we can do client-side submission.

Then we check if sum is a number bigger than or equal to 0.

And if it is, then we do the check.

If the answer matches the sum, then we increase the score with setScore .

We increase it by passing a callback that returns the original score plus 1.

Then we call generateQuestion again to generate the next question.

Below that, we have a form that has the onSubmit prop.

onSubmit runs when we click on the check button.

In the form, we display num1 and num2 .

And we have an input that takes the sum value and we set sum by call setSum in the onChange callback.

e.target.value has the inputted value.

Below that, we have the start game button which calls generateQuestion when we click it.

And finally, we show the score below that.

Conclusion

We can create an addition game easily with React and JavaScript.