Student Marks Calculation System using React JS

In this tutorials will teach Student Marks Calculation System using React JS. include following Condition

if the average is greater than 70 – Grade will be A
if the average is greater than 50 – Grade will be B
if the average is greater than 35 – Grade will be C
if the average is below 35 – Grade will be F

StudentMarks.js

import { useState } from "react";


function StudentMarks() {

    const [m1, setMarks1] = useState();
    const [m2, setMarks2] = useState();
    const [m3, setMarks3] = useState();
    const [tot, setTot] =  useState(); // take tot in a state
    const [average, setAvg] =  useState(); // take tot in a state
    const [gradee, setGrade] =  useState(); // take tot in a state
    var total;
    var grade;
    var avg;
function handleClick()
{
 // setTot(Number(num1) + Number(num2)); // set number to the state
  total= Number(m1) + Number(m2) + Number(m3);
  setTot(total); 

  avg =  Number(total/3);

  setAvg(avg); 

  if(avg > 70)
  {
    grade = "A"
  }
  else if(avg > 50)
  {
    grade = "B"
  }
  else if(avg > 35)
  {
    grade = "C"
  }

  else
  {
    grade = "F"
  }

  setGrade(grade); 

}

    return (
      <div  class="container">
   
        <h1>Student Marks Calculation</h1>
       <div class="form-group">
        <label>Marks 1</label>
        <input type="text" name="m1" class="form-control" onChange={(event) =>
                {
                  setMarks1(event.target.value);      
                }}>
        </input>
        </div>

        <div class="form-group">
        <label>Marks 2</label>
        <input type="text" name="m2"  class="form-control" onChange={(event) =>
                {
                  setMarks2(event.target.value);      
                }}>
         </input> 
         </div>


         <div class="form-group">
        <label>Marks 3</label>
        <input type="text" name="m3"  class="form-control" onChange={(event) =>
                {
                  setMarks3(event.target.value);      
                }}>
         </input> 
         </div>

         <div class="form-group">
         <label>Total</label>

        <input type="text"   class="form-control" value={ tot }></input>   
        </div>
        <div class="form-group">
        <label>Average</label>
        <input type="text"   class="form-control" value={ average }></input>   
        </div>
        <div class="form-group">
        <label>Grade</label>
        <input type="text"   class="form-control" value={ gradee }></input>   
        </div>
        <button onClick={handleClick}  class="btn btn-warning mt-4"> Click Me</button>
      </div>
    );
            
}
  export default StudentMarks;

Install the Bootstrap in React

npm i react-bootstrap

In order to run the app the call the components in side the App.js

App.js

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import StudentMarks from './componetents/StudentMarks';

function App() {
  return (
    <div>
       <StudentMarks />
    </div>
  );
}

export default App;