Create a Grade Calculator 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 grade calculator 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 grade-calculator

with NPM to create our React project.

Also, we’ve to install the uuid package to let us assign unique IDs for each grade entry.

To do this, we run:

npm i uuid

Create the Grade Calculator

To create the grade calculator, we write:

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";

export default function App() {
  const [grades, setGrades] = useState([{ id: uuidv4(), value: 0 }]);
  const [average, setAverage] = useState(0);

  const addGrade = () => {
    setGrades((grades) => [...grades, { id: uuidv4(), value: 0 }]);
  };

  const deleteGrade = (index) => {
    setGrades((grades) => grades.filter((_, i) => i !== index));
  };

  const calculate = (e) => {
    e.preventDefault();
    const formValid = grades.every(({ value }) => !isNaN(+value));
    if (!formValid) {
      return;
    }
    setAverage(
      grades.map(({ value }) => value).reduce((a, b) => +a + +b, 0) /
        grades.length
    );
  };

  return (
    <div className="App">
      <form onSubmit={calculate}>
        {grades.map((g, i) => {
          return (
            <div key={g.id}>
              <label>grade</label>
              <input
                value={g.value}
                onChange={(e) => {
                  const grds = [...grades];
                  grds[i].value = e.target.value;
                  setGrades(grds);
                }}
              />
              <button type="button" onClick={() => deleteGrade(i)}>
                delete grade
              </button>
            </div>
          );
        })}

        <button type="button" onClick={addGrade}>
          add grade
        </button>
        <button type="submit">calculate average</button>
      </form>
      <div>Your average grade is {average}</div>
    </div>
  );
}

We define the grades state set to an array with one entry initially.

Then we define the average state that holds the average grade.

The addGrade function lets us add a grade entry.

In it, we call setGrades with a callback that returns a copy of the grades array with a new entry at the end.

The id is set to the return value of uuidv4 to set the unique ID.

Then we create the deleteGrade function that calls setGrades with a callback that returns the grades array without the given index to remove the given entry from the grades array.

The calculate function calculates the average.

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

Then we check if each value property of each grade entry is a number.

If they are, then we call setAverage with an expression to calculate the average.

We map grades to an array with only the value values.

Then we call reduce on that array to add all the values together and return it with the callback.

The 2nd argument of reduce has the initial return value.

Below that, we have the form with the onSubmit prop set to submit to make the form submission.

Inside it, we render the grades array into an input.

The key prop is set to g.id to set it to a unique ID so that React can keep track of the entries.

The value is set to g.value .

In the onChange callback, we make a copy of grades . Then we set the value of the grades entry with the given index to e.target.value .

e.target.value has the inputted value.

Then we call setGrades to update the grades array with the latest values.

Below that, we have the delete grade button that calls deleteGrade when we click it.

And below the inputs, we have the add grade and calculate average buttons.

The add grade button calls addGrade when we click it.

And the calculate average button triggers the submit event since it has type submit .

And below the form, we show the average grade value.

Conclusion

We can create a grade calculator with Reacr and JavaScript.