Cara Membuat Program Kubus dan Balok dengan JavaScript

By Posted on

Cara Membuat Program Kubus dan Balok dengan JavaScript – Sobat Java, apakah kamu sudah tahu tentang bagaimana cara menghitung volume kubus dan balok menggunakan JavaScript? Dalam dunia matematika dan pemrograman, menghitung volume adalah langkah penting untuk memahami ruang yang ditempati oleh suatu objek.

Volume kubus dan balok adalah konsep yang mendasar namun penting dalam matematika dan fisika. Namun, perbedaan struktur dan dimensi antara keduanya memerlukan pendekatan yang berbeda dalam menghitung volume. Yuk, mari kita bahas lebih lanjut ulasan dari kelasjava dibawah ini!

Volume Kubus dan Cara Menghitungnya

Kubus adalah bentuk tiga dimensi yang memiliki sisi-sisi yang sama panjangnya. Untuk menghitung volume kubus, kita hanya perlu mengalikan panjang salah satu sisinya dengan dirinya sendiri sebanyak tiga kali. Rumusnya cukup sederhana: \( \text{Volume Kubus} = s \times s \times s \), di mana \( s \) adalah panjang sisi kubus.

Menghitung volume kubus dengan JavaScript adalah langkah yang mudah dan cepat dilakukan. Dengan menggunakan rumus di atas, kita dapat membuat program yang meminta pengguna untuk memasukkan panjang sisi kubus dan kemudian menghitung volumenya secara otomatis.

Baca Juga:   Cara Membuat Program Luas Lingkaran dengan JavaScript

Cara Membuat Program Menghitung Volume Kubus dan Balok dengan JavaScript

1. Siapkan Folder dan File

Mulailah dengan membuat struktur folder untuk proyek. Pastikan ada file HTML, CSS, dan JavaScript yang diperlukan.

Proyek Volume Kubus dan Balok

  • index.html
  • style.css
  • script.js

2. Coding File HTML (index.html)

Buatlah file HTML dengan struktur dasar yang diperlukan untuk tampilan program, berikut kode HTML yang bisa kamu salin dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="input-container">
        <h2>Kubus</h2>
        <label for="side">Sisi:</label>
        <input type="number" id="side" placeholder="Masukkan panjang sisi">
        <br>
        <button id="calculate-cube-btn">Hitung Volume Kubus</button>

        <h2>Balok</h2>
        <label for="length">Panjang:</label>
        <input type="number" id="length" placeholder="Masukkan panjang">
        <br>
        <label for="width">Lebar:</label>
        <input type="number" id="width" placeholder="Masukkan lebar">
        <br>
        <label for="height">Tinggi:</label>
        <input type="number" id="height" placeholder="Masukkan tinggi">
        <br>
        <button id="calculate-rectangular-btn">Hitung Volume Balok</button>
    </div>
    <div id="result-container">
        <p id="result"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Coding File CSS (style.css)

Tambahkan kode CSS untuk mempercantik tampilan halaman web agar lebih menarik, berikut kode CSS yang bisa kamu salin dibawah ini.

body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 50px;
}

h2 {
    color: #333;
}

#input-container {
    margin-bottom: 20px;
}

label {
    font-weight: bold;
    margin-right: 10px;
}

input {
    padding: 5px;
    margin-bottom: 10px;
}

button {
    padding: 5px 10px;
    background-color: #008CBA;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #005f6b;
}

#result-container {
    margin-top: 20px;
}

#result {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

4. Coding File JavaScript (script.js)

Tambahkan logika JavaScript di dalam file script.js untuk menghitung volume kubus dan balok, berikut adalah kode yang JS yang bisa kamu salin.

document.getElementById('calculate-cube-btn').addEventListener('click', function() {
    var side = parseFloat(document.getElementById('side').value);
    var volume = Math.pow(side, 3);
    
    document.getElementById('result').textContent = 'Volume Kubus adalah: ' + volume.toFixed(2);
});

document.getElementById('calculate-rectangular-btn').addEventListener('click', function() {
    var length = parseFloat(document.getElementById('length').value);
    var width = parseFloat(document.getElementById('width').value);
    var height = parseFloat(document.getElementById('height').value);
    var volume = length * width * height;
    
    document.getElementById('result').textContent = 'Volume Balok adalah: ' + volume.toFixed(2);
});

5. Jalankan Kode

Setelah semua kode ditulis, jalankan program untuk menampilkan volume kubus dan balok di JavaScript dengan cara membuka file index.html pada folder yang kamu simpan tadi, atau bisa juga dengan melakukan klik kanan pada kode index.html lalu pilih opsi “Open in Browser”.

6. Menampilkan Hasil

Jika sudah muncul halaman browser baru dan tampil seperti gambar diatas, maka kamu telah berhasil menampilkan web untuk menghitung volume kubus dan balok di JavaScript. Anda sekarang memiliki program yang dapat menghitung volume kubus dan balok dan menampilkan hasilnya dalam sebuah website yang telah dipercantik.

Penutup

Dengan mengikuti langkah-langkah di atas, kita dapat membuat Program Menghitung Volume Kubus dan Balok dengan JavaScript dengan mudah. Dengan mempraktikkan langkah-langkah diatas, kamu bisa mempelajari pemrograman JavaScript dan memahami konsep volume dalam matematika.

Related posts: