Skip to content Skip to sidebar Skip to footer

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 :
Gambar gif program menghitung nilai akhir mahasiswa dengan javascript

Itulah cara mudah membuat program menghitung nilai akhir grade/ipk mahasiswa dengan javascript
Baca Juga : Membuat progam penjumlahan sederhana dengan Javascript

2 comments for "Membuat Program Menghitung Nilai Akhir Mahasiswa Dengan HTML dan JavaScript"

  1. tolong dong sy Uda coba kok hasilnya beda sih

    ReplyDelete
    Replies
    1. Maaf sebelumnya, artikel sudah di perbaiki. Silahkan mencoba kembali

      Delete