Create Marksheet Program in React JS, REACT JS Marksheet Program using controlled component

 Create Marksheet Program in React JS, REACT JS Marksheet Program using the controlled component.

WAP to create a mark sheet using five different subjects with the following conditions?

1)  all subject marks should be 0 to 100?

2)  If only one subject mark is <33 then the student will supply.

3)  If all subject marks are>33 then the student pass and displays division with percentage?

4)  if the minimum of two subject marks is <33 then the student will fail.

5)  if the student is suppl and the mark is >28 then five bonus marks will be added then the student will pass by grace and grace subject name.

6) display distinction subject name

7) display suppl subject name

Solution of Marksheet Program in React:-

Code of MarkSheet.js 

import React from "react";

export class Marksheet extends React.Component

{

    

   constructor()

   {

    

    super();

    this.state = {m1:'',m2:'',m3:'',m4:'',m5:'',res:''}

    this.handleSubmit1 = this.handleSubmit1.bind(this); 

    this.handleSubmit2 = this.handleSubmit2.bind(this);   

    this.handleSubmit3 = this.handleSubmit3.bind(this);   

    this.handleSubmit4 = this.handleSubmit4.bind(this);   

    this.handleSubmit5 = this.handleSubmit5.bind(this);   

    this.calcmarks = this.calcmarks.bind(this);

   }

   handleSubmit1(event)

   {

       this.setState({m1:event.target.value});

   }

   handleSubmit2(event)

   {

       this.setState({m2:event.target.value});

   }

   handleSubmit3(event)

   {

       this.setState({m3:event.target.value});

   }

   handleSubmit4(event)

   {

       this.setState({m4:event.target.value});

   }

   handleSubmit5(event)

   {

       this.setState({m5:event.target.value});

   }

  calcmarks(event)

  {

    var { m1,m2,m3,m4,m5,res} = this.state;

    var c=0;

    var s="";

    var m1 = parseInt(m1);

    var m2 = parseInt(m2);

    var m3 = parseInt(m3);

    var m4 = parseInt(m4);

    var m5 = parseInt(m5);

    if((m1>=0 && m1<=100) && (m2>=0 && m2<=100) && (m3>=0 && m3<=100) && (m4>=0 && m4<=100) && (m5>=0 && m5<=100))

    {

          if(m1<33)

          c++;

          if(m2<33)

          c++;

          if(m3<33)

          c++;

          if(m4<33)

          c++;

          if(m5<33)

          c++;

          if(c==0)

          {

             var per = (m1+m2+m3+m4+m5)/5;

             if(per>33 && per<45)

             {

                s = 'Congrats you are pass with third division'+per+ " %";

             }

             else if(per<60)

             {

                s = 'Congrats you are pass with second division'+per+ " %";

             }

             else 

             {

                s = 'Congrats you are pass with first division'+per+ " %";

             }

          }

          else if(c==1)

          {

              s = "SUPPL";

          }

          else{

              s= "FAIL";

          }

      this.setState({res:"result is "+s})

    }

    else

    {

        this.setState({res:"Entered Marks is Invalid"})

    }

    event.preventDefault(); 

  }

   render()

   {

   

    return(

      

       <form onSubmit={this.calcmarks}>  

            <h1>controlled Form Example</h1>  

            <p>Mark1:  

                <input type="text" onChange={this.handleSubmit1}  />  

            </p>  

            <p>Mark2 :  

                <input type="text" onChange={this.handleSubmit2}   />  

            </p>  

            <p>Mark3 :  

                <input type="text" onChange={this.handleSubmit3}   />  

            </p>

            <p>Mark4 :  

                <input type="text" onChange={this.handleSubmit4}   />  

            </p>

            <p>Mark5 :  

                <input type="text" onChange={this.handleSubmit5}   />  

            </p>

            <p>

            <input type="submit" value="Calculate Marks" /> 

            </p>

            <p> {this.state.res}</p>

        </form>

      

      

     

      

       )

   } 

}

Code of index,js file

  import React from 'react';

  import ReactDOM from 'react-dom';

  import './index.css';

  

  import reportWebVitals from './reportWebVitals';

  import {Marksheet} from './Marksheet'

  

  ReactDOM.render(

    <React.StrictMode>

      <Marksheet />

    </React.StrictMode>,

    document.getElementById('root')

  );

  // If you want to start measuring performance in your app, pass a function

  // to log results (for example: reportWebVitals(console.log))

  // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

  reportWebVitals();