How to add a conditional statement to js for grade calculator

Question

I'm trying to make a grade calculator using js, but facing some issue to implement conditions in my project. (check out my code) I have chosen 5 subjects to calculate the GPA and successfully implemented these things. ( 1. Total Marks obtained out of 500, 2. Percentage, 3. Grade point 4. Grade) but unable to implement the final one pass/fail decision. According to my current code, when someone's calculated percentage is less than 33, it is considered as failed. or if greater than or equal to 33% it is considered as pass. I want to change this condition with this one > (when any one enters less than 33 marks of any subject, they have to be consider as failed). FOR BETTER UNDERSTANDING PLEASE CHECK THE EXAMPLE:

EXAMPLE >

When anyone enters these values (Marks):

Subject1: 36, subject2: 31, subject3: 35, subject4: 30, subject5: 38,

OUTPUT: Out of 500 your total is 170 and percentage is 34.00%. Your grade point is 3.6 & Grade is D. You are Pass in 3 subject & failed in 2 subject.

Help me to implement this idea ("You are Pass in 3 subject & failed in 2 subject")

const calcy = () =>{
    let sb1 = document.getElementById('sb1').value;
    let sb2 = document.getElementById('sb2').value;
    let sb3 = document.getElementById('sb3').value;
    let sb4 = document.getElementById('sb4').value;
    let sb5 = document.getElementById('sb5').value;
    let grades = "";
  
    let totalGrades = parseFloat(sb1) + parseFloat(sb2) + parseFloat(sb3) + parseFloat(sb4) + parseFloat(sb5);
  
    let perc = (totalGrades/500*100).toFixed(2);

    let gp = (perc/9.5).toFixed(1);

  
    if(perc <= 100  && perc >= 95){
       grades = ("10 & Grade is A1");
    }else if(perc <= 95  && perc >= 91){
       grades = gp.concat(" & Grade is A1");
    }else if(perc <= 90  && perc >= 81){
       grades = gp.concat(" & Grade is A2");
    }else if(perc <= 80  && perc >= 71){
       grades = gp.concat(" & Grade is B1");
    }else if(perc <= 70  && perc >= 61){
       grades = gp.concat(" & Grade is B2")
    }else if(perc <= 60  && perc >= 51){
       grades = gp.concat(" & Grade is C1");
    }else if(perc <= 50  && perc >= 41){
       grades = gp.concat(" & Grade is C2");
    }else if(perc <= 40  && perc >= 33){
       grades = gp.concat(" & Grade is D");
    }else if(perc <= 32  && perc >= 21){
       grades = gp.concat(" & Grade is E1");
    }else if(perc <= 20  && perc >= 00){
       grades = gp.concat(" & Grade is E2");
    }
  

    if(perc <= 100  && perc >= 91){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}, You are Pass. `
    }
    else if (perc <= 90  && perc >= 81){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 80  && perc >= 71){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 70  && perc >= 61){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 60  && perc >= 51){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 50  && perc >= 41){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 40  && perc >= 33){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 32  && perc >= 21){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Fail. `
    }
    else if(perc <= 20  && perc >= 00)
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Fail. `
    }

user_2913723 · Answer

You can count the failed subject and use logic accordingly,

const calcy = () =>{
    let sb1 = document.getElementById('sb1').value;
    let sb2 = document.getElementById('sb2').value;
    let sb3 = document.getElementById('sb3').value;
    let sb4 = document.getElementById('sb4').value;
    let sb5 = document.getElementById('sb5').value;
    let grades = "";
    let failCount = 0;
    failCount += sb1 < 33 ? 1: 0;
    failCount += sb2 < 33 ? 1: 0;
    failCount += sb3 < 33 ? 1: 0;
    failCount += sb4 < 33 ? 1: 0;
    failCount += sb5 < 33 ? 1: 0;

    let failedInSubject = failCount > 0;
    failCountText = `You are Pass in ${5-failCount} subject & failed in ${failCount} subject`;

    let totalGrades = parseFloat(sb1) + parseFloat(sb2) + parseFloat(sb3) + parseFloat(sb4) + parseFloat(sb5);
  
    let perc = (totalGrades/500*100).toFixed(2);

    let gp = (perc/9.5).toFixed(1);

  
    if(perc <= 100  && perc >= 95){
       grades = ("10 & Grade is A1");
    }else if(perc <= 95  && perc >= 91){
       grades = gp.concat(" & Grade is A1");
    }else if(perc <= 90  && perc >= 81){
       grades = gp.concat(" & Grade is A2");
    }else if(perc <= 80  && perc >= 71){
       grades = gp.concat(" & Grade is B1");
    }else if(perc <= 70  && perc >= 61){
       grades = gp.concat(" & Grade is B2")
    }else if(perc <= 60  && perc >= 51){
       grades = gp.concat(" & Grade is C1");
    }else if(perc <= 50  && perc >= 41){
       grades = gp.concat(" & Grade is C2");
    }else if(perc <= 40  && perc >= 33){
       grades = gp.concat(" & Grade is D");
    }else if(perc <= 32  && perc >= 21){
       grades = gp.concat(" & Grade is E1");
    }else if(perc <= 20  && perc >= 00){
       grades = gp.concat(" & Grade is E2");
    }
  

    if(failedInSubject) {
        document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. ${failCountText}. `
    } else {

        if(perc <= 100  && perc >= 91){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}, You are Pass. `
    }
    else if (perc <= 90  && perc >= 81){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 80  && perc >= 71){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 70  && perc >= 61){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 60  && perc >= 51){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 50  && perc >= 41){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 40  && perc >= 33){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. `
    }
    else if (perc <= 32  && perc >= 21){
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Fail. `
    }
    else if(perc <= 20  && perc >= 00)
      document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Fail. `
    }

     }

user_2687204 · Answer

Try like this:

const calcy = () => {
  let sb1 = document.getElementById('sb1').value;
  let sb2 = document.getElementById('sb2').value;
  let sb3 = document.getElementById('sb3').value;
  let sb4 = document.getElementById('sb4').value;
  let sb5 = document.getElementById('sb5').value;
  
  let grades = "";

  const passscore = 33;
  
  let array = [parseFloat(sb1), parseFloat(sb2), parseFloat(sb3), parseFloat(sb4), parseFloat(sb5)];

  let totalGrades = array.reduce((total, grade) => total + grade, 0);

  let passes = array.reduce((total, grade) => {
    if (passscore <= grade) {
      total++;
    };

    return total;
  }, 0);

  let fails = array.length - passes;
  
  let result = `
You are Pass in ${passes} subject & failed in ${fails} subject`;

  let perc = (totalGrades / 500 * 100).toFixed(2);

  let gp = (perc / 9.5).toFixed(1);


  if (perc <= 100 && perc >= 95) {
    grades = ("10 & Grade is A1");
  } else if (perc <= 95 && perc >= 91) {
    grades = gp.concat(" & Grade is A1");
  } else if (perc <= 90 && perc >= 81) {
    grades = gp.concat(" & Grade is A2");
  } else if (perc <= 80 && perc >= 71) {
    grades = gp.concat(" & Grade is B1");
  } else if (perc <= 70 && perc >= 61) {
    grades = gp.concat(" & Grade is B2")
  } else if (perc <= 60 && perc >= 51) {
    grades = gp.concat(" & Grade is C1");
  } else if (perc <= 50 && perc >= 41) {
    grades = gp.concat(" & Grade is C2");
  } else if (perc <= 40 && perc >= 33) {
    grades = gp.concat(" & Grade is D");
  } else if (perc <= 32 && perc >= 21) {
    grades = gp.concat(" & Grade is E1");
  } else if (perc <= 20 && perc >= 00) {
    grades = gp.concat(" & Grade is E2");
  }


  if (perc <= 100 && perc >= 91) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}, You are Pass. ${result}`
  } else if (perc <= 90 && perc >= 81) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. ${result}`
  } else if (perc <= 80 && perc >= 71) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. ${result}`
  } else if (perc <= 70 && perc >= 61) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. ${result}`
  } else if (perc <= 60 && perc >= 51) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. ${result}`
  } else if (perc <= 50 && perc >= 41) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. ${result}`
  } else if (perc <= 40 && perc >= 33) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Pass. ${result}`
  } else if (perc <= 32 && perc >= 21) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Fail. ${result}`
  } else if (perc <= 20 && perc >= 00) {
    document.getElementById('showData').innerHTML = ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
 Your grade point is ${grades}. You are Fail. ${result}`
  }
}

By putting the grades into an array, you can easily loop through them to count total score and pass/fail according to their value.

user_6750422 · Answer

This can still be optimized.

const form = document.querySelector('.app-form');

const calcy = (event) =>{
   event.preventDefault();
   
   const sb1 = document.getElementById('sb1').value;
   const sb2 = document.getElementById('sb2').value;
   const sb3 = document.getElementById('sb3').value;
   const sb4 = document.getElementById('sb4').value;
   const sb5 = document.getElementById('sb5').value;

   const gradesArray = [parseFloat(sb1), parseFloat(sb2), parseFloat(sb3) ,parseFloat(sb4), parseFloat(sb5)]
   const totalGrades = gradesArray.reduce((acc, e) => acc + e, 0);
   const passGrades = gradesArray.filter(e => e >= 33).length;
   const failGrades = gradesArray.length - passGrades;
    
   const perc = (totalGrades/500*100).toFixed(2);
   const status = (perc <= 100  && perc >= 33) ? 'Pass' : 'Fail';       
   const gp = (perc/9.5).toFixed(1);
  
   let grades = "";
   if(perc <= 100  && perc >= 95){
       grades = ("10 & Grade is A1");
   }else if(perc <= 95  && perc >= 91){
       grades = gp.concat(" & Grade is A1");
   }else if(perc <= 90  && perc >= 81){
       grades = gp.concat(" & Grade is A2");
   }else if(perc <= 80  && perc >= 71){
      grades = gp.concat(" & Grade is B1");
   }else if(perc <= 70  && perc >= 61){
      grades = gp.concat(" & Grade is B2")
   }else if(perc <= 60  && perc >= 51){
      grades = gp.concat(" & Grade is C1");
   }else if(perc <= 50  && perc >= 41){
      grades = gp.concat(" & Grade is C2");
   }else if(perc <= 40  && perc >= 33){
      grades = gp.concat(" & Grade is D");
   }else if(perc <= 32  && perc >= 21){
      grades = gp.concat(" & Grade is E1");
   }else if(perc <= 20  && perc >= 0){
      grades = gp.concat(" & Grade is E2");
   }
  
   document.getElementById('showData').innerHTML = 
    ` Out of 500 your total is  ${totalGrades} and percentage is ${perc}%. 
      
 Your grade point is ${grades}. You are ${status}. 
      
  You are Pass in ${passGrades} subject & failed in ${failGrades} subject`
}

form.addEventListener('submit', calcy, false)

user_14637144 · Answer

I have tried to simplify the code as much as possible by utilizing functions wherever it was necessary.

I avoided using arrays for now as there are only 5 subjects.

const calcy = () => {
  document.getElementById("showData").innerHTML = result();
};

const result = () => {
  const sb1 = document.getElementById("sb1").value;
  const sb2 = document.getElementById("sb2").value;
  const sb3 = document.getElementById("sb3").value;
  const sb4 = document.getElementById("sb4").value;
  const sb5 = document.getElementById("sb5").value;
  const totalGrades =
    parseFloat(sb1) +
    parseFloat(sb2) +
    parseFloat(sb3) +
    parseFloat(sb4) +
    parseFloat(sb5);
  const numberOfPassedSubjects =
    checkPass(sb1) +
    checkPass(sb2) +
    checkPass(sb1) +
    checkPass(sb1) +
    checkPass(sb1);

  const numberOfFailedSubjects = 5 - numberOfPassedSubjects;
  const perc = ((totalGrades / 500) * 100).toFixed(2);
  const gp = (perc / 9.5).toFixed(1);
  const grade = grader(perc);

  message =
    "Out of 500, your total is  " +
    totalGrades +
    ". 
" +
    " Your percentage is " +
    perc +
    " %.
" +
    " Your Grade point is " +
    gp +
    "
" +
    " Grade is " +
    grade +
    "
" +
    " You have passed in " +
    numberOfPassedSubjects +
    " subjects and " +
    " You have failed in " +
    numberOfFailedSubjects +
    " subjects.";
  return message;
};

var checkPass = (sbMarks) => {
  if (sbMarks >= 33) {
    return 1;
  } else return 0;
};

const gpCalc = (perc) => {
  initialGP = (perc / 9.5).toFixed(1);
  if (initialGP > 10) {
    return 10;
  } else return initialGP;
};
const grader = (perc) => {
  if (perc >= 91) {
    return "A1";
  } else if (perc >= 81) {
    return "A2";
  } else if (perc >= 71) {
    return "B1";
  } else if (perc >= 61) {
    return "B2";
  } else if (perc >= 51) {
    return "C1";
  } else if (perc >= 41) {
    return "C2";
  } else if (perc >= 31) {
    return "D";
  } else if (perc >= 21) {
    return "E1";
  } else if (perc >= 0) {
    return "E2";
  }
};

Above is the logic, and your result should be provided in the message object which will duly returned to your first calcy function.

I would suggest you to add condition check to your input to make sure numbers is below 100 while input.

How to add a conditional statement to js for grade calculator

4 Answers