Beranda blog

Pasang code Html ini blog mu - bisa bantu hitung pemakaian listrik selama satu bulan

0 • min read
Table of Contents

Hitung pemakaian listrik bulanan jadi gak ribet


LISTRIK menjadi kebutuhan utama dalam kehidupan ini, untuk tagihan listrik biasanya akan ditagih dibawah tanggal 20 setiap bulannya, dan jika tidak dibayar tagihannya bisa bisa kenapa copot tuh kwh meter kita, nah berbicara kwh meter ini tentunya sobat sudah tau ya kwh meter untuk rumah tangga bisa atau R1 ada model elektrik sistem prabayar atau token dan ada juga model analog atau pas a bayar, kedua model ini memiliki keuntungan masing masing.

Dalam satu waktu pernah sobat terpikir kok pemakaian saya tiap bulan naik terus khusus untuk kwh analog ini sering terjadi yang lucunya kamu pergi keluar kota dalam beberapa minggu karena urusan pekerjaan atau keluarga ketika tagihan datang malah jauh lebih besar dari pemakaian sebelumnya, sebenarnya banyak faktor lain yang dapat membuat hal ini terjadi seperti kaca pada kwh udah buram atau angkanya macet padahal piringan berputar yang akhirnya mereka terka saja angkanya. 

Berbeda dengan kwh elektrik atau token yang mana jelas penggunaannya berdasarkan nilai token yang ada cuma kerugian nya kalo token habis listrik langsung padam, agar hal ini bisa sobat antisipasi kali ini javasetid memberikan satu terobosan yang bisa sobat gunakan untuk memperkirakan pemakaian listrik serta jumlah tagihan yang nanti nya kalian bayar, walaupun ini bersifat prediksi paling tidak bisa memberikan gambaran kepada sobat semua. 

Tanpa basa basi lagi mari kita mulai instalasi code htmlnya

1. Login Blogger lalu pilih halaman

Buat halaman baru ketikan judul "Tools Penghitung pemakaian listrik rumah tangga" 

Tampilan halaman 


2. Pilih tampilan

Tampilan HTML dan copaskan code berikut ini :


<html lang="id">
<head>
  <meta charset="UTF-8"></meta>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
  <title>Penghitung Pemakaian Listrik Rumah Tangga</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f8f9fa;
      margin: 20px;
    }
    h2 {
      text-align: center;
      color: #333;
    }
    .container {
      max-width: 700px;
      margin: auto;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    label {
      display: block;
      margin-top: 10px;
      font-weight: bold;
    }
    input {
      width: 100%;
      padding: 8px;
      margin-top: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    button {
      margin-top: 15px;
      padding: 10px 15px;
      font-size: 14px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: bold;
    }
    .tambah { background: #28a745; color: white; }
    .reset { background: #dc3545; color: white; }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    table, th, td {
      border: 1px solid #ddd;
      text-align: center;
    }
    th, td {
      padding: 10px;
    }
    th {
      background: #f1f1f1;
    }
    #hasil {
      margin-top: 20px;
      padding: 15px;
      background: #f1f5f9;
      border-radius: 8px;
    }
  </style>
</head>
<body>

  <div class="container">
    <h2>🔌 Penghitung Pemakaian Listrik Rumah Tangga</h2>
    
    <label>Nama Alat:</label>
    <input id="nama" placeholder="Contoh: Lampu" type="text" />

    <label>Daya (W):</label>
    <input id="daya" placeholder="Contoh: 60" type="number" />

    <label>Jam/Hari:</label>
    <input id="jam" placeholder="Contoh: 5" type="number" />

    <label>Jumlah:</label>
    <input id="jumlah" type="number" value="1" />

    <label>Hari:</label>
    <input id="hari" type="number" value="31" />

    <div style="display: flex; gap: 10px;">
      <button class="tambah" onclick="tambahAlat()">+ Tambah Peralatan</button>
      <button class="reset" onclick="resetData()">⟳ Reset</button>
    </div>

    <h3>📋 Daftar Peralatan</h3>
    <table id="tabel">
      <thead>
        <tr>
          <th>Nama</th>
          <th>Daya (W)</th>
          <th>Jam/Hari</th>
          <th>Jumlah</th>
          <th>Hari</th>
          <th>Konsumsi (kWh)</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

    <h3>📊 Hasil</h3>
    <label>Tarif Listrik (Rp/kWh):</label>
    <input id="tarif" type="number" value="0" />

    <div id="hasil"></div>
  </div>

  <script>
    let totalKwh = 0;

    function tambahAlat() {
      let nama = document.getElementById("nama").value;
      let daya = parseFloat(document.getElementById("daya").value);
      let jam = parseFloat(document.getElementById("jam").value);
      let jumlah = parseInt(document.getElementById("jumlah").value);
      let hari = parseInt(document.getElementById("hari").value);

      if (!nama || isNaN(daya) || isNaN(jam) || isNaN(jumlah) || isNaN(hari)) {
        alert("⚠️ Mohon isi semua data dengan benar!");
        return;
      }

      let konsumsi = (daya * jam * jumlah * hari) / 1000;
      totalKwh += konsumsi;

      let tabel = document.getElementById("tabel").getElementsByTagName("tbody")[0];
      let row = tabel.insertRow();
      row.innerHTML = `
        <td>${nama}</td>
        <td>${daya}</td>
        <td>${jam}</td>
        <td>${jumlah}</td>
        <td>${hari}</td>
        <td>${konsumsi.toFixed(2)}</td>
      `;

      hitungTotal();
    }

    function hitungTotal() {
      let tarif = parseFloat(document.getElementById("tarif").value);
      let biaya = totalKwh * tarif;

      document.getElementById("hasil").innerHTML = `
        🔹 Total Konsumsi: <b>${totalKwh.toFixed(2)} kWh</b><br>
        🔹 Total Biaya: <b>Rp ${biaya.toLocaleString("id-ID")}</b>
      `;
    }

    function resetData() {
      totalKwh = 0;
      document.getElementById("tabel").getElementsByTagName("tbody")[0].innerHTML = "";
      document.getElementById("hasil").innerHTML = "";
      document.getElementById("nama").value = "";
      document.getElementById("daya").value = "";
      document.getElementById("jam").value = "";
      document.getElementById("jumlah").value = 1;
      document.getElementById("hari").value = 31;
      document.getElementById("tarif").value = 0;
    }
  </script>

</body>
</html>

3. Tampilan codingan

Tools Penghitung pemakaian listrik rumah tangga


Kesimpulan :

Jumlah pemakaian listrik dalam satu itu tergantung dari banyaknya jumlah peralatan elektronik yang kita pakai semakin banyak maka semakin besar, oleh karena itu buat sobat yang ingin menhemat biaya pemakaian listrik ini mohon untuk menggunakan lampu hemat energi ya, semoga artikel ini bisa memberikan manfaat buat teman teman semua.

Posting Komentar