Cara Menghitung Harga Diskon dengan html,css dan javascript

Hallo sahabat learning , sekarang Saya akan membahas bagaimana sih membuat web yang bisa menghitung harga diskon ?, Nah ayo kita mulai.

Sebelum melanjutkan ke materi Saya akan menjelaskan terlebih dahulu apa itu diskon, Diskon adalah potongan harga pada barang yang di jual.

Hal yang harus di pahami terlebih dahulu sebelum melanjutkan ke materi yaitu bagimana cara menghitung diskon ? Cara menghitung diskon yang dengan persen di bagi 100 contoh : (30/100) lalu di kalikan dengan harga barang lalu jumlah kan setelah di jumlahkan di kurangi dengan harga barang dan hasil itu adalah harga yang harus di bayar. Untuk lebih jelas sekarang melanjutkan ke souce code nya.

Tampilan atau Review

Source Code dan Penjelasannya


<!DOCTYPE html>
<html>
<head>
    <title>Hitung Diskon</title>
    <!-- JUDUL -->
    <style type="text/css">
        /* Membuat border / box */
        main{
            max-width: 100%;
            /* Mengatur Maxsimal Ukuran*/
            margin-left: 30%;
            /* Mengatur margin kiri*/
            border: 4px solid gray;
            /* Ukuran border 4px solid warna abu"*/
            border-radius: 10px 10px;
            /* Ukuran border 4px solid warna abu"*/
            width: 40%;
            height: 40%;
            /* Mengatur Ukuran */
            text-align: center;
            /* text di pindahkan ke tengah */
            background-color: lightblue;
            /* background warna biru cerah */
        }
    </style>
</head>
<body>
    <main>
        <h1> PENGHITUNGAN DISKON </h1>
        <!-- Nama Judul -->
        <form name="Diskon">
        <!-- Membuat form yang bernama Diskon -->
            <p></p>
            Harga<br>
            <input type="text" name="harga">
            <!-- Membuat input yang bernama harga -->
            <p></p>
            Persen<br>
            <input type="text" name="persen">
            <!-- Membuat input yang bernama persen -->
            <br>
            <input type="button" name="cek" value="CEK" onclick="Cek_Diskon();">
            <!-- Membuat input tombol -->
            <div>
            Hasil Diskon
            <br>
            <input type="text" name="hasil">
            <!-- Membuat colom text bernama hasil -->
            <p></p>
            </div>
        </form>
        <!-- Setelah Membuat tampilannya maka lanjut ke java script -->
 
        <script type="text/javascript">
            function Cek_Diskon() { 
            // Membuat function bernama Cek_Diskon
                var harga = document.Diskon.harga.value; 
                // Mengambil nilai input bernama harga yang berada pada form bernama Diskon
                var persen = document.Diskon.persen.value; 
                // Mengambil nilai input bernama persen yang berada pada form bernama Diskon
                harga = parseInt(harga); 
                // Merubah data string menjadi integer
                persen = parseInt(persen); 
                // Merubah data string menjadi integer
                var hasil = harga * (persen/100); 
                // Penghitungan nya (Persen/100) lalu kali harga
                hasil = harga - parseInt(hasil); 
                // lalu hasil di kurangan harga
                document.Diskon.hasil.value = hasil; 
                // pindahkan nilai hasil ke input bernama hasil yang berada pada form Diskon
            }
        </script>
    </main>
</body>
</html>

Seperti itu penjelasan dari saya, Saya harap anda mencoba lalu memahami alur program nya. TERIMA KASIH.

Comments

Popular posts from this blog

Belajar Bahasa C - 1.1 Pengenalan dan Membuat Program Sederhana

Cara Memasang MinGW di Windows 7,8,10