Cara Membuat Program Luas Persegi Panjang dengan JavaScript

By Posted on

Cara Membuat Program Luas Persegi Panjang dengan JavaScript – Program Luas Persegi Panjang dengan JavaScript adalah salah satu aplikasi yang berguna untuk menghitung luas dari sebuah persegi panjang berdasarkan panjang dan lebar yang diberikan.

Dengan menggunakan rumus sederhana, program ini memberikan kemudahan dalam menghitung luas persegi panjang. Contoh implementasi Program Luas Persegi Panjang dengan JavaScript:

// Input panjang persegi panjang
var panjang = parseFloat(prompt("Masukkan panjang persegi panjang:"));

// Input lebar persegi panjang
var lebar = parseFloat(prompt("Masukkan lebar persegi panjang:"));

// Perhitungan luas persegi panjang
var luas = panjang * lebar;

// Output hasil perhitungan
console.log("Luas persegi panjang dengan panjang " + panjang + " dan lebar " + lebar + " adalah " + luas);

Dibawah ini kelasjava akan memberikan kamu panduan langkah demi langkah cara membuat dan menggunakan Program Luas Persegi Panjang dengan JavaScript untuk memberikan hasil yang informatif dan berguna bagi pengguna.

Hal yang Dibutuhkan untuk Membuat Program Luas Persegi Panjang dengan JavaScript

  • Perangkat laptop.
  • Sublime Text (Editor kode teks).
  • Google Chrome (Peramban web).
  • Niat yang kuat untuk belajar dan berkarya.
Baca Juga:   Cara Membuat Objek JavaScript

Dengan mempersiapkan peralatan yang diperlukan, Sobat Java sudah siap untuk memulai perjalanan dalam menciptakan Program Luas Persegi Panjang menggunakan JavaScript. Berikut adalah langkah-langkah yang akan membantu dalam proses pembuatan dan implementasi dalam membuat program luas persegi panjang menggunakan JavaScript.

Cara Mudah Membuat Program Luas Persegi Panjang dengan JavaScript

1. Siapkan Folder dan File

Langkah pertama adalah membuat struktur folder untuk proyek, folder ini akan berisi file HTML, CSS, dan JavaScript yang diperlukan untuk membuat program.

Proyek Luas Persegi Panjang

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

2. Coding File HTML

Selanjutnya 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>
    <h1>Program Menghitung Luas Persegi Panjang</h1>
    <div id="input-container">
        <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>
        <button id="calculate-btn">Hitung Luas</button>
    </div>
    <div id="result-container">
        <p id="result">Luas Persegi Panjang adalah: <span id="area">0</span></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Coding File CSS

Untuk memberikan tampilan yang menarik, tambahkan sedikit gaya CSS untuk mempercantik halaman web dan berikut kode CSS yang bisa kamu salin dibawah ini.

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

h1 {
    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

Tambahkan logika JavaScript di dalam file script.js untuk menghitung luas persegi panjang, berikut adalah kode yang JS yang bisa kamu salin.

document.getElementById('calculate-btn').addEventListener('click', function() {
    var length = parseFloat(document.getElementById('length').value);
    var width = parseFloat(document.getElementById('width').value);
    
    var area = length * width;
    
    document.getElementById('area').textContent = area;
});

5. Jalankan Kode

Setelah semua kode ditulis, saatnya untuk melihat hasilnya. Buka file HTML di browser untuk menjalankan program 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 menghitung luas persegi panjang di JavaScript. Anda sekarang memiliki program yang dapat menghitung luas persegi panjang dan menampilkan hasilnya dalam sebuah website yang responsif.

Kesimpulan

Demikianlah artikel yang bisa kami sajikan tentang cara membuat program JavaScript untuk menghitung luas persegi panjang. Dengan mengikuti langkah-langkah membuat program menghitung luas persegi panjang diatas, Sobat Java dapat membuat dan mengimplementasikan Program untuk menghitung Luas Persegi Panjang dengan JavaScript.

Related posts: