Javascript Project to Calculate Student Marks & Percentage of Student in Browser Full Project For Beginners

 

 

 

index.html

 

 

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <div class="row">
   <div class="col-sm-4">
    <h3 class="text-primary">Calculate Marks Percentage</h3> 
      
    <!--=== Marks Input Fields=== -->
<div class="form-group">
  <label>Total Marks</label>
  <input type="text" class="form-control" placeholder="Total Marks" id="totalMarks">
  </div>

 <div class="form-group">
 <label>Obtained Marks</label>
     <input type="text" class="form-control" placeholder="Obtained Markes" id="obtainedMarks">
  </div>
  <div class="form-group input-group">
      <input type="text" class="form-control" placeholder="Marks Percentage" id="marksPercentage" disabled>
      <div class="input-group-append">
         <span class="input-group-text">%</span>
      </div>
   </div>
<!--=== Marks Input Fields=== -->

  
 
   </div>
   <div class="col-sm-4"></div>
</div>
</div>


</body>
<script type="text/javascript">
     
    document.addEventListener('focusout', function(event){
        marksPresentagae()
    });
     
    function marksPresentagae() {
    
      let totalMarksInput = document.getElementById("totalMarks");
      let obtainedMarksInput = document.getElementById("obtainedMarks");
      let marksPercentageMarksInput = document.getElementById("marksPercentage");
    
      totalMarks = totalMarksInput.value
      obtainedMarks= obtainedMarksInput.value
        
      if(totalMarks>0 && obtainedMarks>0){
         let tp = (obtainedMarks/totalMarks)*100;
         marksPercentageMarksInput.value=tp.toFixed(2);
      }else{
        marksPercentageMarksInput.value=""
        }
     }
    </script>
</html>

Leave a Reply