Sabtu, 16 September 2017

Rata-Rata

Hai guys!
kita akan mempelajari cara membuat rata-rata dengan menggunakan notepad++.
buat file dengan notepad++ seperti berikut:

<html>
    <head>
        <title>Penjumlahan 2 Variabel</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                .box {
                    width: 40%;
                    border-radius: 5px;
                    border: 1px solid #9b9b9b;
                    padding: 20px 0px 20px 0px;
                    margin-left: 30%;
                }
                .h2{
                    font-family: calibri;
                    font-weight: lighter;
                    letter-spacing: 3px;
                }
                #bil1{
                    padding: 5px;
                }
           
                #bil2{
                    padding: 5px;
                }
                #hasil{
                    color: #ff0b0b;
                }
                .tbl1{
                    font-family: calibri;
                }
                .btn{
                    padding: 10px;
                    border-radius: 5px;
                    cursor: pointer;
                    border: 0px;
                    color: #fff;
                    background: #3b7fff;
                }
            </style>
      
        <script>
            function Hitung(dat1,dat2,dat3,dat4,dat5,dat6){
                var total,totalrat;
                total = dat1+dat2+dat3+dat4+dat5+dat6;
              
                totalrat = total / 6;
                return totalrat;
            }
        </script>
    </head>
    <body>
        <div class="box">
            <center>
                <h2 class="h2">Aplikasi Rata-Rata Nilai Mahasiswa</h2>
              
        <table class="tbl1">
            <tr>
                <td><label>ALPRO</label></td>
                <td>=</td>
                <td><input type="text" id="alpro" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Basis Data</label></td>
                <td>=</td>
                <td><input type="text" id="bd" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Program Paket Niaga</label></td>
                <td>=</td>
                <td><input type="text" id="ppn" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>PTI</label></td>
                <td>=</td>
                <td><input type="text" id="pti" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Matematika</label></td>
                <td>=</td>
                <td><input type="text" id="mtk" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Bahasa Inggris</label></td>
                <td>=</td>
                <td><input type="text" id="bing" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Rata-Rata</label></td>
                <td>=</td>
                <td><label id="rata_rata"></label></td>
            </tr>
        </table>
  <br>
  <input type="button" id="btn" value="Rata-Rata" class="btn" onClick="Ratarata()">
            </center>
        </div>
      <script>
          function InputData(Bilangan){
            var data;
              data = parseFloat(document.getElementById(Bilangan).value);
            return data;
          }
        
          function Output(data){
              document.getElementById("rata_rata").innerHTML = data;
          }
        
          function Ratarata(){
            //Deklarasi Variable
            var dat1,dat2,dat3,dat4,dat5,dat6,ratarata;
            //Input
            dat1  = InputData("alpro");
            dat2  = InputData("bd");
            dat3  = InputData("ppn");
            dat4  = InputData("pti");
            dat5  = InputData("mtk");
            dat6  = InputData("bing");
            //Proses
            ratarata = Hitung(dat1,dat2,dat3,dat4,dat5,dat6);
            //OutPut
            Output(ratarata);
          }
        
      </script>
    </body>
</html>

Simpan lalu buka dengan browser dan hasilnya:

Tidak ada komentar:

Posting Komentar