bloger bintang: Mini Project 4 (Modul 5)

Nama : Bintang Dwi Anggara

Kelas : X-RPL

CODE NYA :

<!DOCTYPE html>
<html lang="en"><head>    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table tr td, table tr th {
            border: 1px solid;
            text-align: center;
        }
        button {
            margin: 0 auto;
            display: block;
        }
        .berat {
            border-color: black;
            animation: beratAnimation 1s ease 0s infinite alternate;
        }
        @keyframes beratAnimation {
            0% {background-color: rgb(255, 114, 114); color: white;}
            100% {background-color: red; color: white;}
        }
    </style>
</head><body>    <form >
        <label>Nama Buah:</label>
        <input style="margin-bottom: 1px;" type="text" id="namaBuah"> <br>
        <label style="margin-right: 41px;">Berat:</label>
        <input type="number" id="beratBuah" min="0">
        <span>kg</span> <br>
        <button style="margin: 1px 0 0 84px;" onclick="saveFruit()">Simpan</button>
        <hr>
        <table id="tableBuah">
                <tr>
                    <th width="35px">No</th>
                    <th width="160px">Nama Buah</th>
                    <th width="70px">Berat</th>
                    <th width="75px">Action</th>
                </tr>
        </table>
    </form>
    <script>
        // Simpan elemen dalam variabel
        let tableBuah = document.getElementById("tableBuah");
        let namaBuah = document.getElementById("namaBuah");
        let beratBuah = document.getElementById("beratBuah");
        // Function menyimpan data buah
        function saveFruit() {
            // Check jika input memiliki nilai/value
            if ((namaBuah && namaBuah.value) && (beratBuah && beratBuah.value)) {
                event.preventDefault();
                // Buat element tr
                let tr = document.createElement("tr");
                // Buat variable untuk Nomor Urut
                let nomorUrut = document.createTextNode(tableBuah.childElementCount);
                // Buat variable untuk Nama Buah
                let addNamaBuah = document.createTextNode(namaBuah.value);
                // Buat variable untuk Berat Buah
                let addBeratBuah = document.createTextNode(beratBuah.value + " kg");
                // Buat Tombol Reset
                let deleteButton = document.createElement("button");
                deleteButton.textContent = "Hapus";
                // tambahkan attribute onclick untuk button dengan function deleteFruit
                // 'this' mengambil elemen (button) bila function dipanggil sebagai parameter
                deleteButton.setAttribute("onclick", "deleteFruit(this)");
                // Buat array agar bisa di iterasi for loops
                let tableDataArray = [
                    nomorUrut,
                    addNamaBuah,
                    addBeratBuah,
                    deleteButton
                ];
                // for loops appendChild setiap data di array ke dalam td
                for (let i = 0; i < tableDataArray.length; i++) {
                    let td = document.createElement("td");
                    td.appendChild(tableDataArray[i]);
                    // check jika berat di atas 5, dan apakah index sedang berada di addBeratBuah
                    if (Number(beratBuah.value) > 5 && i == tableDataArray.indexOf(addBeratBuah)) {
                        td.classList.add("berat");
                    }
                    tr.appendChild(td);
                    tableBuah.appendChild(tr);  
                }
            }
            // Jika tidak ada nilai di input, berikan alert
            else {
                window.alert("Masukan Input")
            }
        }
        // function untuk menghapus buah
        function deleteFruit(button) {
            // mencari elemen 'tr' yang terdekat dari elemen button
            let tableButtonRow = button.closest("tr");
            if (tableButtonRow) { // jika true...
                tableBuah.removeChild(tableButtonRow);
                updateNomorUrut();
            }
        }  
        // function update Nomor Urut
        function updateNomorUrut() {
            let rows = tableBuah.getElementsByTagName('tr');
            for (let i = 0; i < rows.length; i++) {
                // check setiap row (ditambah satu karena index 0 merupakan head)
                // check children pertamanya (column pertama)
                // tambahkan text content dengan index + 1
                rows[i + 1].children[0].textContent = i + 1;
            }
        }
    </script>
</body></html>

HASILNYA :

1. Struktur Dasar HTML

Kode HTML yang pertama mendefinisikan struktur dasar dokumen. Dengan menggunakan tag <form>, kita membuat formulir untuk memasukkan data buah seperti nama dan berat. Informasi ini kemudian dapat disimpan dan ditampilkan.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags dan judul dokumen -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Penyimpanan Data Buah</title>

    <!-- Style untuk tata letak dan animasi -->
    <style>
        /* Style untuk tabel dan tombol */
        /* ... (diberikan dalam kode) ... */
    </style>
</head>
<body>
    <!-- Formulir input dan tabel untuk menampilkan data -->
    <!-- ... (diberikan dalam kode) ... -->

    <!-- Script JavaScript untuk logika aplikasi -->
    <script>
        // ... (diberikan dalam kode) ...
    </script>
</body>
</html>

2. Formulir Input
Formulir input menggunakan elemen <form> dan menyediakan kolom untuk memasukkan nama buah dan beratnya. Tombol "Simpan" diprogram untuk menyimpan data buah ke dalam tabel.

fungsi dan Kegunaan:Input Fields: Menyediakan input untuk nama buah dan beratnya.
<button>: Tombol "Simpan" yang, ketika diklik, memanggil fungsi saveFruit() untuk menyimpan data buah.

<form>
    <label>Nama Buah:</label>
    <input type="text" id="namaBuah"> <br>
    <label>Berat:</label>
    <input type="number" id="beratBuah" min="0">
    <span>kg</span> <br>
    <button onclick="saveFruit()">Simpan</button>
    <!-- ... (diberikan dalam kode) ... -->
</form>

3. Tabel Penyimpanan Data Buah

Tabel digunakan untuk menampilkan data buah yang telah dimasukkan. Setiap baris tabel memiliki nomor urut, nama buah, berat, dan tombol "Hapus" untuk menghapus data buah tertentu.

<table id="tableBuah">
    <tr>
        <th>No</th>
        <th>Nama Buah</th>
        <th>Berat</th>
        <th>Action</th>
    </tr>
</table>

4.Variabel dan Element HTML

Fungsi dan Kegunaan:tableBuah: Menyimpan referensi ke elemen tabel dengan id "tableBuah".
namaBuah dan beratBuah: Menyimpan referensi ke elemen input dengan id "namaBuah" dan "beratBuah" untuk mendapatkan nilai yang dimasukkan pengguna.

let tableBuah = document.getElementById("tableBuah");
let namaBuah = document.getElementById("namaBuah");
let beratBuah = document.getElementById("beratBuah");

5. Fungsi saveFruit().

Fungsi dan Kegunaan:Validasi Input: Memeriksa apakah kedua input, namaBuah dan beratBuah, memiliki nilai atau tidak.
Membuat Elemen Baru: Jika valid, membuat elemen <tr> baru untuk menampilkan data buah di dalam tabel.
Memeriksa Berat: Jika berat buah di atas 5 kg, menambahkan kelas CSS "berat" untuk memberikan efek visual tertentu.
Menambahkan Data ke Tabel: Menambahkan elemen baru ke dalam tabel dengan nomor urut, nama buah, berat, dan tombol "Hapus".
Memanggil updateNomorUrut(): Untuk memastikan nomor urut di tabel diperbarui.

function saveFruit() {
    // ... (diberikan dalam kode) ...
}

6. Fungsi deleteFruit(button)

Fungsi dan Kegunaan:

Menghapus Baris Tabel: Menghapus baris tabel yang sesuai dengan tombol "Hapus" yang diklik.
Memanggil updateNomorUrut(): Untuk memastikan nomor urut di tabel diperbarui setelah penghapusan

function deleteFruit(button) {
    // ... (diberikan dalam kode) ...
}

7.Fungsi updateNomorUrut()

Fungsi dan Kegunaan:

Memperbarui Nomor Urut: Mengubah nomor urut di kolom pertama setiap baris tabel setelah penghapusan.

function updateNomorUrut() {
    // ... (diberikan dalam kode) ...
}

terimakasih :)

bloger bintang

Senin, 19 Februari 2024

Mini Project 4 (Modul 5)

Tidak ada komentar:

Posting Komentar

TUGAS DPK Cara kolaborasi di Github

Laporkan Penyalahgunaan