Membuat Program Menghitung Nilai Akhir Mahasiswa Dengan HTML dan JavaScript

Pada kesempatan kali ini saya berbagi koding atau program untuk menginput nilai akhir mahasiswa menggunakan javascript. Yang sebelumnya juga telah saya bahas program menghitung nilia akhir mahasiswa dengan netbeans.

Sama halnya seperti yang telah saya bahas, program nilai akhir mahasiswa javascript ini juga saya tentukan beberapa variabel sebagai mana user akan menginput Nama, absen, tugas, uts dan uas.

Dengan nilai kalkulasi sebagai berikut :

Absen : 14 = ((14/14)*0.1)*100 = 10%

Tugas : 100 = 100*0.2 = 20%

UTS : 100 = 100*0.3 = 30%

UAS : 100 = 100*0.4 = 40%

Jadi jika dijumlahkan keseluruhan nilai grade nya adalah 100 atau 100%

Pogram ini saya sajikan dengan Form kemudian lalu mengunakan fungsi onclick event dan parseInt() untuk mengubah nilai string.

Beriku adalah source code-nya.

Program Menghitung Nilai Alkhir Mahasiswa Dengan Javascript


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>

  <style>
   body{
    background: rgb(2,0,36);
background: linear-gradient(to bottom, #0477c2 0%,rgba(0,212,255,1) 100%);
    text-align: center;
    margin: 10%;
   }
   p#grade_out{
    font-weight: bold;
   }
  </style>

 </head>
<body> 
 <div>
 <form action="#" id="myform">
  Nama <input type="text" id="nama_in"><br><br>
  Absen <input type="text" id="n1"><br><br>
  Tugas <input type="text" id="n2"><br><br>
  UTS <input type="text" id="n3"><br><br>
  UAS <input type="text" id="n4"><br><br>
  
  <input type="button" onclick="data()" value="simpan">
  <input type="reset" value="reset"><br><br>

<!-- output -->
  <p id="nama_out"></p>
  <p id="absen_out"></p>
  <p id="tugas_out"></p>
  <p id="uts_out"></p>
  <p id="uas_out"></p>
  <br><br>
  <p id="note"></p>
  <p id="ket_absen"></p>
  <p id="ket_tugas"></p>
  <p id="ket_uts"></p>
  <p id="ket_uas"></p>

  <p id="jumlah_out"></p>
  <br>
  <p id="grade_out"></p>
 </form>
 <br><br>

 <script>
function data(){
   var nama = document.getElementById('nama_in').value;
   var m1 = document.getElementById('n1').value;
   var m2 = document.getElementById('n2').value;
   var m3 = document.getElementById('n3').value;
   var m4 = document.getElementById('n4').value;

   absen = ((m1/14)*0.1)*100;
   tugas = 0.2*m2;
   uts = 0.3*m3;
   uas = 0.4*m4;

   jumlah = absen+tugas+uts+uas;

  var grade;

     if(jumlah >=80)
    {
    grade= "A" ;
    }
    else if (jumlah >=70)
    {
    grade= "B" ;
    }

    else if (jumlah >=59)
    {
    grade= "C" ;
    }
    else if (jumlah >=50)
    {
    grade= "D" ;
    }
    else
    {
    grade="E" ;

    }


/*output*/
   document.getElementById("nama_out").innerHTML="Nama : "+nama;
   document.getElementById("absen_out").innerHTML="Absen : "+m1;
   document.getElementById("tugas_out").innerHTML="Tugas : "+m2;
   document.getElementById("uts_out").innerHTML="UTS : "+m3;
   document.getElementById("uas_out").innerHTML="UAS : "+m4;

   document.getElementById("note").innerHTML="Note : ";
   document.getElementById("ket_absen").innerHTML="Absen 10% : "+absen;
   document.getElementById("ket_tugas").innerHTML="Tugas 20% : "+tugas;
   document.getElementById("ket_uts").innerHTML="Tugas 30% : "+uts;
   document.getElementById("ket_uas").innerHTML="Tugas 40% : "+uas;


   document.getElementById("jumlah_out").innerHTML="Jumlah : "+jumlah;
   document.getElementById("grade_out").innerHTML="Grade : "+grade;
  

}
 </script>
 </div>
</body>
</html>

Hasil :