Rumus Hitung Luas Balok Dengan JavaScript dan Bootstrap

2 min readNov 21, 2023

#hicode Kali ini saya akan membagikan #code untuk menghitung Volume dan Luas Balok dengan menggunakan bahasa JavaSCript yang di desain dengan HTML dan Bootstrap(CSS) supaya lebih menarik.

Langsung saja, lihat di bawah ini!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Kalkulator Balok</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }

        button {
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        #loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            justify-content: center;
            align-items: center;
            z-index: 999;
        }

        .spinner-border {
            width: 3rem;
            height: 3rem;
        }
    </style>
</head>
<body>

    <h2>Kalkulator Volume dan Luas Permukaan Balok</h2>

    <label for="length">Panjang:</label>
    <input type="number" id="length" placeholder="Masukkan panjang">

    <label for="width">Lebar:</label>
    <input type="number" id="width" placeholder="Masukkan lebar">

    <label for="height">Tinggi:</label>
    <input type="number" id="height" placeholder="Masukkan tinggi">

    <button onclick="calculate()">Hitung</button>

    <div id="loading-overlay">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
    <script>
        function calculate() {
            // Menampilkan overlay loading
            $('#loading-overlay').css('display', 'flex');

            var length = parseFloat(document.getElementById('length').value);
            var width = parseFloat(document.getElementById('width').value);
            var height = parseFloat(document.getElementById('height').value);

            if (isNaN(length) || isNaN(width) || isNaN(height)) {
                alert("Silakan masukkan nilai yang valid untuk panjang, lebar, dan tinggi.");
                
                // Menyembunyikan overlay loading
                $('#loading-overlay').css('display', 'none');
                
                return;
            }

            var volume = length * width * height;
            var surfaceArea = 2 * (length * width + length * height + width * height);

            var resultMessage = "Volume Balok: " + volume.toFixed(2) + " satuan volume\n";
            resultMessage += "Luas Permukaan Balok: " + surfaceArea.toFixed(2) + " satuan luas";

            setTimeout(function() {
                // Menyembunyikan overlay loading
                $('#loading-overlay').css('display', 'none');
                
                // Menampilkan hasil perhitungan dalam modal Bootstrap
                $('#resultModalBody').text(resultMessage);
                $('#resultModal').modal('show');
            }, 500); // Menunda tampilan modal selama 8 detik (8000 milidetik)
        }
    </script>

    <!-- Modal -->
    <div class="modal" tabindex="-1" role="dialog" id="resultModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Hasil Perhitungan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="resultModalBody">
                    <!-- Result content goes here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Copas saja It’s okay!! Jika kalian butuh penjelasan detail silahkan berikan komentar di bawah, saya senang akan hal itu, buddy!!.

Ketiga kalinya saya ingatkan untuk mengikuti akun danixapple ini ya!!

Rumus Hitung Luas Balok Dengan JavaScript dan Bootstrap

Written by danixapple

No responses yet