THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Student Grade Calculator in JavaScript with Code Hindi

Student Grade Calculator in JavaScript with Code Hindi 




 Student Grade Calculator


Each student has to enter respective subject marks.

1. Find Total?
2. Find Percentage?
3. Find Grade?
4. Check Pass or Fail.
5. Combined all and show Output.

Source Code:



<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
  <style>
  
body {
  background:#33d9b2;
  font-size: 12px;
}

body, button, input {
  font-family: 'Righteous', cursive;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.background {
  display: flex;
  min-height: 100vh;
}

.container {
  flex: 0 1 700px;
  margin: auto;
  padding: 10px;
}

.screen {
  position: relative;
  background: #3e3e3e;
  border-radius: 15px;
}

.screen:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  bottom: 0;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
  z-index: -1;
}

.screen-body {
  display: flex;
}

.screen-body-item {
  flex: 1;
  padding: 50px;
}

.screen-body-item.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.app-title {
  display: flex;
  /*flex-direction: column;*/
  justify-content: center;
  align-items: center;
  color: #33d9b2;f;
  font-size: 26px;
  text-transform: uppercase;
  border-left: 4px solid #218c74;
  padding: 10px;
}

.app-form-group {
  margin-bottom: 15px;
}

.app-form-group.buttons {
  margin-bottom: 0;
  text-align: right;
}

.app-form-control {
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 1px solid #666;
  color: #ddd;
  font-size: 14px;
  text-transform: uppercase;
  outline: none;
  transition: border-color .2s;
}

.app-form-control::placeholder {
  color: #FFF;
}

.app-form-control:focus {
  border-bottom-color: #ddd;
}

.app-form-button {
  background: none;
  border: none;
  color: #33d9b2;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  text-transform: uppercase;
}

.app-form-button:hover {
  color: #218c74;
}

.showdata{
  text-align: center;
  color: white;
  font-size: 1.2rem;
  padding-top: -10px;
  padding-bottom: 10px;
}

  </style>
</head>
<body>






<!-- Student Grade Calculator

Each student has to enter respective subject marks.
1. Find Total?
2. Find Percentage?
3. Find Grade?
4. Check Pass or Fail.
5. Combined all and show Output.

DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi  -->










<div class="background">
  <div class="container">
    <div class="screen">
      <div class="screen-body">
        <div class="screen-body-item left">
          <div class="app-title">
            <div class="animated infinite pulse">
              Student <br> Grade <br> Calcy
            </div>
          </div>
        </div>
        <div class="screen-body-item">
          <div class="app-form">
            <div class="app-form-group">
              <input type="text" class="app-form-control" placeholder="WEB PROGRAMMING" id="wd">
            </div>
            <div class="app-form-group">
              <input  type="text"  class="app-form-control"   placeholder="MATHS" id="maths">
            </div>
             <div class="app-form-group">
              <input  type="text"  class="app-form-control"   placeholder="COMPUTER" id="comp">
            </div>
            <div class="app-form-group">
              <input  type="text"  class="app-form-control"   placeholder="PHYSICS" id="phy" >
            </div>
            <div > 
              <input type="button" name="" value="showPercentage" class="app-form-button" onclick="calcy()">
            </div>            
          </div>
      </div>

    </div>
      <div class="app-form-group showdata">
              <p id="showData" >  </p>
     </div>
  </div>
</div>

<script>
  
const calcy = () =>{
  let wd = document.getElementById('wd').value;
  let maths = document.getElementById('maths').value;
  let comp = document.getElementById('comp').value;
  let phy = document.getElementById('phy').value;
  let grades = "";


  let totalGrades = parseFloat(wd) + parseFloat(maths) + parseFloat(comp) + parseFloat(phy);
  alert(totalGrades);

  let perc = (totalGrades/400) * 100;
  alert(perc);

  debugger;

  if(perc <= 100  && perc >= 80){
    grades = 'A';
  }else if(perc <= 79  && perc >= 60){
     grades = 'B';
  }else if(perc <= 59  && perc >= 40){
     grades = 'C';
  }else{
     grades = 'F';
  }

  if(perc >= 39.5){
    document.getElementById('showData').innerHTML = ` Out of 400 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade is ${grades}. You are Pass. `
  }
  else{
    document.getElementById('showData').innerHTML = ` Out of 400 your total is  ${totalGrades} and percentage is ${perc}%. <br> Your grade is ${grades}. You are Fail. `
  }

  
}


</script>

</body>
</html>

on

14 comments:

  1. Akash NishadMarch 14, 2020 at 9:57 AM

    Superb Sir
    Aao se achha koi bhi nahi padhata hai.
    Kripya sir codeigniter Ka bhi video banaiye kyunki sir job me sab framework par hi kaam karate hai to aao se niwedan hai ki kripya ISKA bhi video banaiye.

    ReplyDelete
  2. aman tiwariApril 30, 2020 at 10:10 AM

    thapa bhai tmhari help se kafi kuch seekh rha hu par ab js par aakr thoda atak gya hu ..todo list ka project bnao bhai js me..vaise to kafi videos h youtube pr par mujhe tmhara samjaya hua he samj aata h bs

    ReplyDelete
  3. UnknownMay 21, 2020 at 3:35 AM

    wow

    ReplyDelete
  4. UnknownMay 21, 2020 at 5:00 AM

    I have a doubt, In case if a student scored less than 40 in any one subject, want to fail him also.what is the logic ?

    ReplyDelete
    Replies
    1. UnknownAugust 8, 2020 at 5:35 AM

      you should use this only one if and then do the nested if
      If(wd < 40 || maths < 40 || comp < 40 || phy < 40 ) {
      alert ("You Failed")
      } else if (.....)
      ....
      ....

      Delete
    2. Kahaya of IslamJuly 26, 2021 at 6:18 AM

      but i want to print a subject name how can i print that
      i.e if i am score in physics and maths lower than 33 then i want to print you have supply in 2 subject. or you are fal in pass in phy and maths

      Delete
  5. UnknownNovember 16, 2020 at 8:46 AM

    Sir mera student grade calculator internet explorer pr nhi run ho rha pllllz sir explain

    ReplyDelete
  6. UnknownNovember 24, 2020 at 8:31 AM

    Thanks Bro...

    ReplyDelete
  7. UnknownNovember 24, 2020 at 9:02 AM

    Thanks

    ReplyDelete
  8. UnknownJanuary 16, 2021 at 9:13 AM

    wow...That's very fine.

    ReplyDelete
  9. SandeepFebruary 27, 2021 at 3:38 AM

    Sir JavaScript cookies ka video banao ki apni website ki cookies jaise stroe kare

    ReplyDelete
  10. hasnainJuly 5, 2021 at 6:21 AM

    With the advent of internet,matrix calculator these calculators have further been modified to be made available in online version.

    ReplyDelete
  11. Muhammad YousafJuly 5, 2021 at 11:57 AM

    Asalam ALAIKUM BHAI MY MUHAMMAD YOUSAF i have a problem that i have searched for a couple of days but i didnt solve it yet i show grade when i am going to show grade before submitting the data in database but it doesnt work properly my code is const grades = ()=>{
    let perc = document.getElementById('overall_percentage').value;
    let mygrade="";
    if(perc <= 100 && perc >= 80){
    mygrade = 'A';
    }else if(perc <= 79 && perc >= 60){
    mygrade = 'B';
    }else if(perc <= 59 && perc >= 40){
    mygrade = 'C';
    }else{
    mygrade = 'F';
    }
    document.getElementById('grade').innerHTML = `Grade ${mygrade}.`
    }

    ReplyDelete
  12. Muhammad YousafJuly 5, 2021 at 12:12 PM

    i wanna know how i will do or solve this problem i will be awaiting for your answer

    ReplyDelete

Subscribe to: Post Comments (Atom)
© ThapaTechnical 2018. By SoraTemplates | DSTB By MyBloggerThemes | FreeBloggerTemplates