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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | 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
1 | npm i react-bootstrap |
In order to run the app the call the components in side the App.js
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 | import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import StudentMarks from './componetents/StudentMarks'; function App() { return ( <div> <StudentMarks /> </div> ); } export default App; |
i have attached the video link below. which will do this tutorials step by step
