Fun Math Activities: React Js & Tailwind CSS Addition Games

In this tutorial, we will create an addition game using React Js and Tailwind CSS. The game will generate two random numbers and the user will have to input the correct answer. The game will then check if the answer is correct and display a message accordingly.

Let’s start by setting up our project. Make sure you have Node.js and npm installed on your system. If not, you can download and install them from the official Node.js website.

First, create a new React project by running the following command in your terminal:

npx create-react-app addition-game

Next, navigate to the project directory:

cd addition-game

Now, let’s install Tailwind CSS and some additional dependencies that we will need for this project:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Then, generate a Tailwind CSS configuration file by running:

npx tailwindcss init

This will create a tailwind.config.js file in the root of your project.

Next, open the tailwind.config.js file and add the following lines inside the module.exports object:

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Now, let’s set up PostCSS by creating a postcss.config.js file in the root of your project and adding the following code:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Next, we need to include Tailwind CSS in our project. Open the index.css file located in the src directory and add the following line of code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, let’s start working on our game. Open the App.js file in the src directory. We will first create a functional component called Game that will handle the logic of our addition game.

import React, { useState } from 'react';

const Game = () => {
  const [num1, setNum1] = useState(Math.floor(Math.random() * 10));
  const [num2, setNum2] = useState(Math.floor(Math.random() * 10));
  const [answer, setAnswer] = useState('');
  const [message, setMessage] = useState('');

  const handleChange = (e) => {
    setAnswer(e.target.value);
  };

  const checkAnswer = () => {
    if (parseInt(answer) === num1 + num2) {
      setMessage('Correct answer!');
    } else {
      setMessage('Incorrect answer. Please try again.');
    }
  };

  const resetGame = () => {
    setNum1(Math.floor(Math.random() * 10));
    setNum2(Math.floor(Math.random() * 10));
    setAnswer('');
    setMessage('');
  };

  return (
    <div>
      <h1>Addition Game</h1>
      <p>{num1} + {num2} = ?</p>
      <input type="text" value={answer} onChange={handleChange} />
      <button onClick={checkAnswer}>Check Answer</button>
      <p>{message}</p>
      <button onClick={resetGame}>New Problem</button>
    </div>
  );
};

export default Game;

Now, let’s import the Game component into the App.js file and render it inside the App component:

import React from 'react';
import Game from './Game';

function App() {
  return (
    <div className="container mx-auto my-10">
      <Game />
    </div>
  );
}

export default App;

Finally, let’s update the index.js file to include Tailwind CSS styles:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Now, you can run the following command to start the development server and see our addition game in action:

npm start

You should see the addition game running in your browser. You can input your answer and check if it is correct. You can also reset the game to generate a new problem.

Congratulations! You have successfully created an addition game using React Js and Tailwind CSS. Feel free to customize and enhance the game further to make it more interactive and engaging. Happy coding!