Create a Guess a Number 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 a guess a number 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 guess-number-game

with NPM to create our React project.

Create the Guess a Number Game

To create the guess a number game, we write:

import React, { useState } from "react";

export default function App() {
  const [started, setStarted] = useState(false);
  const [status, setStatus] = useState(false);
  const [answer, setAnswer] = useState(0);
  const [rightAnswer, setRightAnsweer] = useState(0);
  console.log(rightAnswer);

  const submit = (e) => {
    e.preventDefault();
    const formValid = +answer >= 0;
    if (!formValid) {
      return;
    }
    if (+answer === +rightAnswer) {
      setStatus("you got it");
      setStarted(false);
    } else if (+answer < +rightAnswer) {
      setStatus("too low");
    } else {
      setStatus("too high");
    }
  };

  const start = () => {
    setRightAnsweer(Math.ceil(Math.random() * 10));
    setStarted(true);
  };

  if (started) {
    return (
      <div>
        <form onSubmit={submit}>
          <div>
            <label>answer</label>
            <input value={answer} onChange={(e) => setAnswer(e.target.value)} />
          </div>
          <button type="submit">check</button>
        </form>
        <p>{status}</p>
      </div>
    );
  } else {
    return (
      <div>
        <button type="button" onClick={start}>
          start
        </button>
        <p>{status}</p>
      </div>
    );
  }
}

We have the started state to set render the form to let us enter a number when the game is started.

status shows whether the guess is right or not.

answer shows the answer.

rightAnswer has the right answer.

Next, we have the submit function that checks the answer we entered.

In it, we call e.preventDefault() to do client-side form submission.

Then we check if answer is bigger than or equal to 0.

If it is, then we check it against rightAnswer and set the status and started states accordingly.

The start function sets the rightAnswer with setRightAnswer .

setStarted sets the started state.

If started is true , we show the form.

We set the onSubmit prop to submit to let us submit our answer .

submit is run when we click on the check button, which has button type submit .

The input’s value is set to answer and we set answer with the onChange callback.

We get the inputted value with e.target.value .

Below the form, we show the status .

If started is false , we show the start button and the status .

Conclusion

We can create a guess a number game with React and JavaScript.