Cara Membuat Program Luas Segitiga dengan JavaScript

By Posted on

Cara Membuat Program Luas Segitiga dengan JavaScript – Program Menghitung Luas Segitiga dengan JavaScript adalah salah satu aplikasi sederhana yang berguna untuk menghitung luas segitiga berdasarkan panjang alas dan tinggi yang diberikan.

Dengan menggunakan rumus matematika dasar, program ini dapat memberikan hasil yang akurat dengan cepat. Contoh implementasi Program Menghitung Luas Segitiga dengan JavaScript:

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

// Input tinggi segitiga
var tinggi = parseFloat(prompt("Masukkan tinggi segitiga:"));

// Perhitungan luas segitiga
var luas = 0.5 * alas * tinggi;

// Output hasil perhitungan
console.log("Luas segitiga dengan alas " + alas + " dan tinggi " + tinggi + " adalah " + luas);

Pada artikel kali ini, kelasjava akan memberikan kalian panduan cara membuat dan menggunakan Program Menghitung Luas Segitiga dengan JavaScript untuk memberikan hasil yang informatif dan berguna.

Hal yang Dibutuhkan untuk Membuat Program Luas Segitiga dengan JavaScript

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

Dengan mempersiapkan semua hal yang diperlukan, kita siap untuk memulai perjalanan kita dalam membuat Program Luas Segitiga menggunakan JavaScript. Langkah-langkah berikut akan membantu kita dalam proses pembuatan dan implementasi.

Baca Juga:   Cara Membuat Grade Nilai di JavaScript

Cara Mudah Membuat Program Luas Segitiga dengan JavaScript

1. Siapkan Folder dan File

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

Proyek Luas Segitiga

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

2. Coding File HTML (index.html)

Selanjutnya buatlah file HTML dengan struktur dasar yang diperlukan untuk tampilan program menghitung luas segitiga, 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 Segitiga</h1>
    <div id="input-container">
        <label for="base">Alas Segitiga:</label>
        <input type="number" id="base" placeholder="Masukkan alas segitiga">
        <br>
        <label for="height">Tinggi Segitiga:</label>
        <input type="number" id="height" placeholder="Masukkan tinggi segitiga">
        <br>
        <button id="calculate-btn">Hitung Luas</button>
    </div>
    <div id="result-container">
        <p>Luas Segitiga:</p>
        <span id="result">---</span>
    </div>

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

3. Coding File CSS (style.css)

Untuk membuat tampilan lebih menarik, tambahkan sedikit style CSS untuk mempercantik 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;
    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 kode JavaScript untuk menghitung luas segitiga berdasarkan alas dan tinggi yang dimasukkan oleh pengguna, berikut adalah kode yang JS yang bisa kamu salin.

// Ambil elemen-elemen yang diperlukan
const baseInput = document.getElementById('base');
const heightInput = document.getElementById('height');
const calculateBtn = document.getElementById('calculate-btn');
const resultSpan = document.getElementById('result');

// Tambahkan event listener untuk tombol hitung
calculateBtn.addEventListener('click', function() {
    // Ambil nilai alas dan tinggi dari input
    const base = parseFloat(baseInput.value);
    const height = parseFloat(heightInput.value);

    // Hitung luas segitiga
    const area = 0.5 * base * height;

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

5. Jalankan Kode

Setelah semua kode ditulis, jalankan program untuk menampilkan perhitungan luas segitiga 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 Segitigas di JavaScript. Anda akan melihat form input untuk memasukkan alas dan tinggi segitiga. Setelah memasukkan nilai-nilai tersebut dan mengklik tombol “Hitung Luas”, luas segitiga akan ditampilkan di bawahnya.

Penutup

Dengan mengikuti langkah-langkah cara membuat program JavaScript diatas, kita dapat membuat dan mengimplementasikan Program Menghitung Luas Segitiga dengan JavaScript. Terima kasih sudah mengunjungi artikel kelasjava kali ini, semoga bermanfaat dan selamat mencoba!

Related posts: