Menghitung Nilai Tugas, UTS, UAS dengan menggunakan JavaScript/html

freeload November 04, 2020

Membuat Program Hitung Nilai Akhir mahasiswa dengan Javascript dan Html 

FreeLoad — Pada kesemmpatan hari ini saya akan membagikan Codingan cara untuk menghitung nilai akhir Mahasiswa dengan menggunakan Bahasa pemograman Javascript dan HTML nah di tutorial ini kita mempunyai kasus yaitu: 
Membuat halaman HTML untuk mengkonversi nilai angka menjadi nilai huruf dengan menggunakan Javascript.
Konversi: 
0-40 = E 
41-55 =D 
56-60=C
61- 65= C+
66-70=B
71-80=B+
81-100=A     


1. Membuat File HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   *{
       margin: 0;
       padding: 0;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 18px;
      
   }
   body{
       margin: 50px;
       background-image: url(webb.png);
   }
   .container{
       margin: 10px;
       text-align: center;
       
   }
   form{
       margin: 10px;
       display: flex;
       flex-direction: column;
      
            
       
   }
   h1{
       font-size: 2em;
       text-shadow: 0 2PX 3px rgba(20, 10, 20, 0.5);
   }
   h1, pre input{
    margin: 10px;
    justify-content: center;
   }

   pre {
      margin-left: -60px;
   }
   div .btn{
       display: flex;
       justify-content: center;
       margin-left: -20px;
   }
   .button{
       margin-bottom: 10px;
       padding: 5px;
       text-decoration: none;
       background-color: lightskyblue;
       margin: 10px;
       border: none;
       border-radius: 4px;
       color: white;
       
   }
   .reset{
       width: 100px;
       margin-bottom: 10px;
       padding: 5px;
       margin: 10px;
       border: none;
       border-radius: 4px;
       background-color: gray;
       color: white;
   }

   .button:hover{
    background-color: rgb(161, 215, 248);
   }
   .reset:hover{
    background-color: rgb(175, 175, 175);
   }


   
   
</style>
<body>
    <div class="container">
    <form name="fform">
        <h1>Masukkan nilai anda</h1>
       <pre>
            Nilai Tugas: <input type="text" name="bilangan1" id="b1"  size="11">
            Nilai UTS: <input type=" text" name="bilangan2" id="b2" size="11">
            Nilai UAS: <input type="text" name="bilangan3"  id="b3" size="11">
        </pre>
       <div class="btn"> 
       <div class="button1">
       <button class="button" type="button" value="jumblahkan" id="jumblah"
        onclick="jumlah()"> Jumblahkan 
        </button>
       </div>
        <div class="reset1">
            <button class="reset" type="reset" value="reset" > reset
            </button>
        </div>
    </div>

    </form>
   </div>


    <script src="script.js"></script>
</body>
</html>

Setelah Membuat file HTML di atas maka langkah selanjutnya Kita akan memmbuat file Javascriptnya.

2.Membuat File Javascript


function jumlah(){

    const bil1=parseFloat (document.fform.bilangan1.value);
    if(isNaN(bil1))
    bil1=0.0;

    const bil2=parseFloat (document.fform.bilangan2.value);
    if(isNaN(bil1))
    bil2=0.0;

    const bil3=parseFloat (document.fform.bilangan3.value);
    if(isNaN(bil1))
    bil3=0.0;

// Operator aritmmatika
const nilaiAkhir=(((2*bil1)+(3*bil2)+(5*bil3))/10)
alert('Nilai Akhir anda adalah =' +nilaiAkhir);

// percabangan IF ELSE

if(nilaiAkhir>=80)
{
    alert("A = Selamat Anda LULUS");
}
else if(nilaiAkhir>=70) 
{
alert("B+ = Selamat Anda LULUS");
}
else if(nilaiAkhir>=65)
{
alert("B = Selamat Anda LULUS");
}
else if(nilaiAkhir>=60)
{
alert("C+ = Selamat Anda LULUS");
}
else if(nilaiAkhir>=55)
{
alert("C = Selamat Anda LULUS");
}
else if(nilaiAkhir>=40)
{
    alert("D = Maaf Anda Belum LULUS Silahkan Ambil mata kuliah ini di semester depan");
}
else
{
    alert("E = Maaf Anda Belum LULUS Silahkan Ambil mata kuliah ini di semester depan");
}
    location.reload();
}



Nah Jika anda malas unutk menulis dari awal saya telah menyiapkan source kodenya di bawah ini 



Jika anda sudah menjalan kan program tersebut maka akan tampil Output seperti gambar di bawah ini.

1.mmasuk kan nilai Tugas, UTS, dan UAS.


2. lalu jumblahkan setelah di jumblahkan tampil total nilai yang anda inputkan.


3. Setelah itu akan tammpil hasil dari Grade yang anda hitung.


Nah sekian artikel ini selamat Mencoba.


Tags

Posting Komentar

0 Komentar