Cara Membuat Program Luas Lingkaran dengan JavaScript

By Posted on

Cara Membuat Program Luas Lingkaran dengan JavaScript – Program Luas Lingkaran dengan JavaScript adalah cara cerdas untuk menghitung luas sebuah lingkaran berdasarkan jari-jari yang diberikan. Dengan menggunakan rumus matematika sederhana π * r^2, program ini dapat memberikan jawaban dengan cepat dan akurat.

Sekarang pada artikel kali ini, kelasjava akan memberikan kamu panduan langkah demi langkah untuk cara membuat dan menggunakan Program Luas Lingkaran dengan JavaScript untuk menghasilkan hasil yang berguna dan informatif.

Hal yang Dibutuhkan untuk Membuat Program Luas Lingkaran dengan JavaScript

  • Perangkat laptop.
  • Sublime Text (Editor kode teks).
  • Google Chrome (Peramban web).
  • Niat yang kuat untuk belajar dan berkarya.

Dengan mempersiapkan hal-hal diatas yang diperlukan, kita siap untuk mulai membuat Program Luas Lingkaran menggunakan JavaScript, berikut langkah-langkah dibawah ini akan membantu dalam proses pembuatan dan implementasi.

Cara Mudah Membuat Program Luas Lingkaran dengan JavaScript

1. Siapkan Folder dan File

Pertama-tama kita perlu membuat struktur folder untuk proyek, folder ini akan berisi file HTML, CSS, dan JavaScript yang diperlukan untuk membuat program.

Baca Juga:   Cara Membuat Kalkulator Sederhana dengan JavaScript

Proyek Luas Lingkaran

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

2. Coding File HTML

Buatlah file HTML (index.html) dan tambahkan struktur dasar HTML, 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 Lingkaran</h1>
    <div id="input-container">
        <label for="radius">Jari-jari Lingkaran:</label>
        <input type="number" id="radius" placeholder="Masukkan jari-jari lingkaran">
        <button id="calculate-btn">Hitung Luas</button>
    </div>
    <div id="result-container">
        <p>Luas Lingkaran:</p>
        <span id="result">---</span>
    </div>

    <script src="script.js"></script>
</body>
</html>

3. Coding File CSS

Tambahkan styling CSS di file style.css untuk mempercantik tampilan halaman web, 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;
}

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

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

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

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

4. Coding File JavaScript

Tambahkan kode JavaScript untuk menghitung luas lingkaran berdasarkan jari-jari yang dimasukkan oleh pengguna, berikut adalah kode yang JS yang bisa kamu salin.

// Ambil elemen-elemen yang diperlukan
const radiusInput = document.getElementById('radius');
const calculateBtn = document.getElementById('calculate-btn');
const resultSpan = document.getElementById('result');

// Tambahkan event listener untuk tombol hitung
calculateBtn.addEventListener('click', function() {
    // Ambil nilai jari-jari dari input
    const radius = parseFloat(radiusInput.value);

    // Hitung luas lingkaran
    const area = Math.PI * radius * radius;

    // Tampilkan hasil perhitungan pada halaman HTML
    resultSpan.textContent = area.toFixed(2);
});

5. Jalankan Kode

Setelah semua kode ditulis, jalankan program untuk menampilkan menghitung Luas Lingkaran 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 menghitung Luas Lingkaran di JavaScript. Anda akan melihat form input untuk memasukkan jari-jari lingkaran. Setelah memasukkan nilai jari-jari dan mengklik tombol “Hitung Luas”, luas lingkaran akan ditampilkan di bawahnya.

Kesimpulan

Dengan mengikuti langkah-langkah yang telah disediakan, kita dapat membuat dan mengimplementasikan Program Luas Lingkaran dengan JavaScript. Dengan membuat program untuk menghitung luas lingkaran tersebut tentu bermanfaat dalam mengasah keterampilan pemrograman JavaScript dan memberikan hasil yang bermanfaat. Selamat mencoba!

Related posts: