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();

Marksheet Program using Uncontrolled Class Component:-

import React from "react";

export class Marksheetnew extends React.Component

{

 

    constructor(props)

    {

        super(props);

        this.text1 = React.createRef()

        this.text2 = React.createRef()

        this.text3 = React.createRef()

        this.text4 = React.createRef()

        this.text5 = React.createRef()

        this.sub1 = React.createRef()

        this.sub2 = React.createRef()

        this.sub3 = React.createRef()

        this.sub4 = React.createRef()

        this.sub5 = React.createRef()

       

        this.state={'res':''}

       

    }

   

    funMark=(event)=>

    {

        var arr=[];

       var sub=[];

         arr.push(parseInt(this.text1.current.value));

         arr.push(parseInt(this.text2.current.value));

         arr.push(parseInt(this.text3.current.value));

         arr.push(parseInt(this.text4.current.value));

         arr.push(parseInt(this.text5.current.value));

         sub.push(this.sub1.current.value);

         sub.push(this.sub2.current.value);

         sub.push(this.sub3.current.value);

         sub.push(this.sub4.current.value);

         sub.push(this.sub5.current.value);

       var c=0

       var total=0;

       var data='';

       var grace=0;

       var flag=true;

       var subjectname='';

       var distinctionname='';

       var per=0;

       for(var i=0;i<arr.length;i++)

       {

            if(arr[i]<0 || arr[i] > 100)

            {

                data = 'invalid marks';

                flag=false;

                break;

            }

            if(arr[i]<33)

            {

                c++;

                subjectname+=sub[i] + ' ';

                grace=arr[i];

            }

            if(arr[i]>=75)

            {

               

                distinctionname+=sub[i] + " ";

               

            }

            total+=arr[i];

       }

       if(flag)

       {

       if(c===0 || (c===1 && grace>=28))

       {

          per=total/5;

          if(c===0)

          {

           data = " Pass with  "+ per + "%";

         

          }

          else

          {

            data = " Pass by Grace and Grace subject is "+subjectname + " Grace mark is "+(33-grace);

            per=total+(33-grace)/5;

          }

          if(per>=33 && per<45)

          {

            data += " and  Division is Third ";

          }

          else if(per<60)

          {

            data += " and Division is Second ";

          }

          else

          {

            data += " and Division is First ";

          }

          if(distinctionname !== '')

          {

            data += ' Distinction Subject '+ distinctionname;

          }

       }

       else if(c===1)

       {

           data = "Suppl in  "+subjectname

       }

       else

       {

          data = "Fail in  "+subjectname

       }

    }

       this.setState({'res':`result is ${data}`})

       event.preventDefault()

    }

    render()

    {

    return(<div>

        <h1>Marksheet Program by Unctrolled Class Component</h1>

       <form onSubmit={this.funMark}>

       <input type="text" ref={this.sub1} placeholder="Enter First Subject Name" />

       

       <input type="text" ref={this.text1} placeholder="Enter First Number" />

       <br/>

       <input type="text" ref={this.sub2} placeholder="Enter Second Subject Name" />

       <input type="text" ref={this.text2} placeholder="Enter Second Number" />

       <br />

       <input type="text" ref={this.sub3} placeholder="Enter Third Subject Name" />

       <input type="text" ref={this.text3} placeholder="Enter Third Number" />

       <br />

       <input type="text" ref={this.sub4} placeholder="Enter Fourth Subject Name" />

       <input type="text" ref={this.text4} placeholder="Enter Fourth Number" />

       <br />

       <input type="text" ref={this.sub5} placeholder="Enter Fifth Subject Name" />

       <input type="text" ref={this.text5} placeholder="Enter Fifth Number" />

       <br />

       <input type="submit" value="Submit" />

       </form>

       {this.state.res}

       

    </div>)

    }

}

Marksheet Program using Uncontrolled Functional Component:-

import { useRef,useState } from "react"

function Marksheetdemo()

{

    const text1 = useRef()

    const text2 = useRef()

    const text3 = useRef()

    const text4 = useRef()

    const text5 = useRef()

    const sub1 = useRef()

    const sub2 = useRef()

    const sub3 = useRef()

    const sub4 = useRef()

    const sub5 = useRef()

    var arr=[];

    var sub=[];

    var[res,setRes] = useState(undefined)

    function funMark(event)

    {

       arr.push(parseInt(text1.current.value));

       arr.push(parseInt(text2.current.value));

       arr.push(parseInt(text3.current.value));

       arr.push(parseInt(text4.current.value));

       arr.push(parseInt(text5.current.value));

       sub.push(sub1.current.value);

       sub.push(sub2.current.value);

       sub.push(sub3.current.value);

       sub.push(sub4.current.value);

       sub.push(sub5.current.value);

       var c=0

       var total=0;

       var data='';

       var grace=0;

       var flag=true;

       var subjectname='';

       var distinctionname='';

       var per=0;

       for(var i=0;i<arr.length;i++)

       {

            if(arr[i]<0 || arr[i] > 100)

            {

                data = 'invalid marks';

                flag=false;

                break;

            }

            if(arr[i]<33)

            {

                c++;

                subjectname+=sub[i] + ' ';

                grace=arr[i];

            }

            if(arr[i]>=75)

            {

               

                distinctionname+=sub[i] + " ";

               

            }

            total+=arr[i];

       }

       if(flag)

       {

       if(c===0 || (c===1 && grace>=28))

       {

       

          if(c===0)

          {

           data = " Pass with  "+ per + "%";

           per=total/5;

          }

          else

          {

            data = " Pass by Grace and Grace subject is "+subjectname + " Grace mark is "+(33-grace);

            per=total+(33-grace)/5;

          }

          if(per>=33 && per<45)

          {

            data += " and  Division is Third ";

          }

          else if(per<60)

          {

            data += " and Division is Second ";

          }

          else

          {

            data += " and Division is First ";

          }

          if(distinctionname !== '')

          {

            data += ' Distinction Subject '+ distinctionname;

          }

       }

       else if(c===1)

       {

           data = "Suppl in  "+subjectname

       }

       else

       {

          data = "Fail in  "+subjectname

       }

    }

       setRes(`result is ${data}`)

       event.preventDefault()

    }

    return(<div>

       <form onSubmit={funMark}>

       <input type="text" ref={sub1} placeholder="Enter First Subject Name" />

       

       <input type="text" ref={text1} placeholder="Enter First Number" />

       <br/>

       <input type="text" ref={sub2} placeholder="Enter Second Subject Name" />

       <input type="text" ref={text2} placeholder="Enter Second Number" />

       <br />

       <input type="text" ref={sub3} placeholder="Enter Third Subject Name" />

       <input type="text" ref={text3} placeholder="Enter Third Number" />

       <br />

       <input type="text" ref={sub4} placeholder="Enter Fourth Subject Name" />

       <input type="text" ref={text4} placeholder="Enter Fourth Number" />

       <br />

       <input type="text" ref={sub5} placeholder="Enter Fifth Subject Name" />

       <input type="text" ref={text5} placeholder="Enter Fifth Number" />

       <br />

       <input type="submit" value="Submit" />

       </form>

       {res}

    </div>)

}

export default Marksheetdemo;

Marksheet program using Object type under uncontrolled functional component?

import { useRef,useState } from "react"

function Marksheetdemo()

{

    const text1 = useRef()

    const text2 = useRef()

    const text3 = useRef()

    const text4 = useRef()

    const text5 = useRef()

    const sub1 = useRef()

    const sub2 = useRef()

    const sub3 = useRef()

    const sub4 = useRef()

    const sub5 = useRef()

    var arr={};

    var[res,setRes] = useState(undefined)

    function funMark(event)

    {

   

       

       arr[sub1.current.value]=parseInt(text1.current.value);

       arr[sub2.current.value]=parseInt(text2.current.value);

       arr[sub3.current.value]=parseInt(text3.current.value);

       arr[sub4.current.value]=parseInt(text4.current.value);

       arr[sub5.current.value]=parseInt(text5.current.value);

     

       var c=0

       var total=0;

       var data='';

       var grace=0;

       var flag=true;

       var subjectname='';

       var distinctionname='';

       var per=0;

       for(var key in arr)

       {

            var m = arr[key];

            if(m<0 || m > 100)

            {

                data = 'invalid marks';

                flag=false;

                break;

            }

            if(m<33)

            {

                c++;

                subjectname+=key + ' ';

                grace=m;

            }

            if(m>=75)

            {

               

                distinctionname+=key + " ";

               

            }

            total+=m;

       }

       if(flag)

       {

       if(c===0 || (c===1 && grace>=28))

       {

       

          if(c===0)

          {

            per=total/5;

           data = " Pass with  "+ per + "%";

         

          }

          else

          {

            per=total+(33-grace)/5;

            data = " Pass by Grace and Grace subject is "+subjectname + " Grace mark is "+(33-grace);

           

          }

          if(per>=33 && per<45)

          {

            data += " and  Division is Third ";

          }

          else if(per<60)

          {

            data += " and Division is Second ";

          }

          else

          {

            data += " and Division is First ";

          }

          if(distinctionname !== '')

          {

            data += ' Distinction Subject '+ distinctionname;

          }

       }

       else if(c===1)

       {

           data = "Suppl in  "+subjectname

       }

       else

       {

          data = "Fail in  "+subjectname

       }

    }

       setRes(`result is ${data}`)

       event.preventDefault()

    }

    return(<div>

       <form onSubmit={funMark}>

       <input type="text" ref={sub1} placeholder="Enter First Subject Name" />

       

       <input type="text" ref={text1} placeholder="Enter First Number" />

       <br/>

       <input type="text" ref={sub2} placeholder="Enter Second Subject Name" />

       <input type="text" ref={text2} placeholder="Enter Second Number" />

       <br />

       <input type="text" ref={sub3} placeholder="Enter Third Subject Name" />

       <input type="text" ref={text3} placeholder="Enter Third Number" />

       <br />

       <input type="text" ref={sub4} placeholder="Enter Fourth Subject Name" />

       <input type="text" ref={text4} placeholder="Enter Fourth Number" />

       <br />

       <input type="text" ref={sub5} placeholder="Enter Fifth Subject Name" />

       <input type="text" ref={text5} placeholder="Enter Fifth Number" />

       <br />

       <input type="submit" value="Submit" />

       </form>

       {res}

    </div>)

}

export default Marksheetdemo;