Last active
March 18, 2025 06:31
-
-
Save nurrachmat-nr/6673d4eddb74801f765522a8df48713a to your computer and use it in GitHub Desktop.
Keuangan Harian
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Laporan Keuangan Harian</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| </head> | |
| <body class="container py-4"> | |
| <h2 class="text-center text-success">LAPORAN KEUANGAN HARIAN</h2> | |
| <p class="text-center text-muted">Mengelola keuangan Anda dengan lebih baik</p> | |
| <div class="row text-center mb-4"> | |
| <div class="col-md-4"><div class="p-3 bg-light border">Pemasukan: Rp <span id="totalPemasukan">0</span></div></div> | |
| <div class="col-md-4"><div class="p-3 bg-light border">Pengeluaran: Rp <span id="totalPengeluaran">0</span></div></div> | |
| <div class="col-md-4"><div class="p-3 bg-light border">Saldo Akhir: Rp <span id="saldoAkhir">0</span></div></div> | |
| </div> | |
| <h4 class="text-center">Tambah Transaksi</h4> | |
| <div class="card p-4"> | |
| <div class="mb-3"> | |
| <label for="tanggal" class="form-label">Tanggal:</label> | |
| <input type="date" id="tanggal" class="form-control"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="keterangan" class="form-label">Keterangan:</label> | |
| <input type="text" id="keterangan" class="form-control"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="tipe" class="form-label">Tipe Transaksi:</label> | |
| <select id="tipe" class="form-select"> | |
| <option value="Pemasukan">Pemasukan</option> | |
| <option value="Pengeluaran">Pengeluaran</option> | |
| </select> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="jumlah" class="form-label">Jumlah (Rp):</label> | |
| <input type="number" id="jumlah" class="form-control"> | |
| </div> | |
| <div class="row gap-2"> | |
| <button class="btn btn-success col" onclick="">Tambah Transaksi</button> | |
| <button class="btn btn-danger col" onclick="">Hapus Semua Data</button> | |
| <button class="btn btn-primary col" onclick="">Simpan PDF</button> | |
| <button class="btn btn-warning col" onclick="">Hapus Baris Terakhir</button> | |
| </div> | |
| </div> | |
| <h4 class="mt-4">Data Keuangan</h4> | |
| <table class="table table-bordered mt-2"> | |
| <thead> | |
| <tr> | |
| <th>Tanggal</th> | |
| <th>Keterangan</th> | |
| <th>Pemasukan (Rp)</th> | |
| <th>Pengeluaran (Rp)</th> | |
| <th>Saldo (Rp)</th> | |
| </tr> | |
| </thead> | |
| <tbody id="dataKeuangan"></tbody> | |
| </table> | |
| <script> | |
| //JavaScript Here | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment