├── index.html └── grade_calculator.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | grade calculator 7 | 8 | 9 | 10 |
11 |

Grade Calculator

12 |
13 | 14 |
15 |
16 |

17 |
18 |
19 | 20 | 21 | 22 |
23 |
24 |

25 |
26 | 27 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /grade_calculator.js: -------------------------------------------------------------------------------- 1 | const inputGradeMarks=document.getElementById('inputGrade'); 2 | const marksCalculate=document.getElementById('calculator'); 3 | const marksReset=document.getElementById('reset'); 4 | const errorMessageShow=document.getElementById('errorMessage'); 5 | const showResult=document.getElementById('result'); 6 | 7 | let error_class='border-red-500'; 8 | 9 | function resetErrorStyles(){ 10 | inputGradeMarks.classList.remove(error_class); 11 | errorMessageShow.classList.add('hidden'); 12 | } 13 | 14 | function isValidInput(){ 15 | resetErrorStyles(); 16 | if(!isValidInput.value){ 17 | inputGradeMarks.classList.add(error_class); 18 | errorMessageShow.classList.remove('hidden'); 19 | errorMessageShow.textContent="plz enter a valid number"; 20 | return false; 21 | } 22 | if(inputGradeMarks.value<0 || inputGradeMarks.value>100){ 23 | inputGradeMarks.classList.add(error_class); 24 | errorMessageShow.classList.remove('hiden'); 25 | errorMessageShow.textContent="plz enter number that is above 0 but less than 101"; 26 | return false; 27 | } 28 | return true; 29 | } 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | marksCalculate.addEventListener("click", function(){ 38 | if(!isValidInput()){ 39 | return; 40 | } 41 | let score=parseFloat(inputGradeMarks.value); 42 | 43 | if(score>0 && score<32){ 44 | showResult.textContent="F"; 45 | }else if(score>=33 && score<39){ 46 | showResult.textContent="D"; 47 | }else if(score>=40 && score<49){ 48 | showResult.textContent="C"; 49 | }else if(score>=50 && score<59){ 50 | showResult.textContent="B"; 51 | }else if(score>=60 && score<69){ 52 | showResult.textContent="A-"; 53 | }else if(score>=70 && score<79){ 54 | showResult.textContent="A"; 55 | }else if(score>=80 && score<100){ 56 | showResult.textContent="A+"; 57 | } 58 | 59 | }); 60 | 61 | marksReset.addEventListener('click',function(){ 62 | inputGradeMarks.value=''; 63 | showResult.textContent=''; 64 | errorMessageShow.textContent=''; 65 | resetErrorStyles(); 66 | }); --------------------------------------------------------------------------------