Membangun Konverter Kilogram ke Gram yang Sederhana dengan HTML, CSS, dan JavaScript

Jika Anda ingin mempraktikkan JavaScript dengan proyek kecil yang berguna, konverter berat adalah tempat yang baik untuk memulai. Dalam contoh ini, kita akan membangun konverter kilogram ke gram sederhana menggunakan HTML, CSS, dan JavaScript dasar.

Logika Konversi

1 kilogram = 1000 gram Jadi, rumusnya adalah: gram = kilogram × 1000

Langkah 1: Membuat HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Konverter Kilogram ke Gram</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 500px;
            margin: 40px auto;
            padding: 20px;
        }
        .converter {
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        input, button {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
            font-size: 16px;
        }
        .result {
            margin-top: 15px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="converter">
        <h2>Konverter Kilogram ke Gram</h2>
        <input type="number" id="kgInput" placeholder="Masukkan kilogram" />
        <button onclick="convertKgToGrams()">Konversi</button>
        <div class="result" id="result"></div>
    </div>
    <script>
        function convertKgToGrams() {
            const kg = parseFloat(document.getElementById("kgInput").value);
            const result = document.getElementById("result");
            if (isNaN(kg)) {
                result.textContent = "Silakan masukkan angka yang valid.";
                return;
            }
            const gram = kg * 1000;
            result.textContent = `${kg} kg = ${gram} gram`;
        }
    </script>
</body>
</html>

### Langkah 2: Memahami JavaScript
Bagian konversi hanya satu baris:
```javascript
const gram = kg * 1000;

Itu bekerja karena setiap kilogram mengandung tepat 1000 gram.

Fitur Utama

Mengambil input pengguna
Mengvalidasi nilai
Menghandle klik tombol
Mengupdate DOM
Menerapkan rumus dunia nyata

Pendapat Geek

Proyek kecil ini membantu Anda mempraktikkan JavaScript dengan cara yang menyenangkan dan interaktif. Anda dapat memperluas proyek ini dengan menambahkan konversi balik dari gram ke kilogram, auto-konversi saat mengetik, dan dropdown untuk satuan berat lainnya.

Utility Era - Konverter Kilogram ke Gram

Membangun Konverter Kilogram ke Gram yang Sederhana dengan HTML, CSS, dan JavaScript