Module 8

-



Project 8.1

Mini Project 1: Prime Generator


 • Buat sebuah halaman yang terdiri dari 2 input: Angka Pertama dan Angka Terakhir. Lihat halaman selanjutnya 
• Jika button diklik, maka generator bilangan prima antara Angka Pertama dan Angka Terakhir (tidak termasuk kedua angka tersebut) dalam bentuk table
• Gunakan array untuk menampung data bilangan prima 
• Catatan: bilangan prima adalah bilangan yang hanya bisa dibagi oleh 1 dan dirinya sendiri.

berikut ini adalah kodenya:

<!DOCTYPE html>
<html>
<head>
    <title>Generator Bilangan Prima</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        .container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 25px 30px 1px rgba(0, 0, 0, 0.1);
        }
        h1 {
            font-family: tahoma;
            text-align: center;
            color: #000000;
        }
        label {
            font-weight: bold;
            margin-top: 10px;
            display: block;
            color: #333333;
        }
        input[type="number"] {
            width: calc(100% - 22px);
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 15px;
            border: 2px solid gray;
            border-radius: 10px;
            font-size: 16px;
        }
        button {
            font-family: verdana;
            width: 100%;
            padding: 10px;
            background-color: #4125b1;
            color: #ffffff;
            border: none;
            border-radius: 10px;
            font-size: 20px;
            cursor: pointer;
        }
        button:hover {
            background-color: #2835c8;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #dddddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Generator Bilangan Prima</h1>
        <label for="angkaPertama">Angka Pertama:</label>
        <input type="number" id="angkaPertama" name="angkaPertama">
        <label for="angkaTerakhir">Angka Terakhir:</label>
        <input type="number" id="angkaTerakhir" name="angkaTerakhir">
        <button onclick="generatePrimes()">Generate</button>
       
        <table id="primeTable">
            <thead>
                <tr>
                    <th style="background-color: #cccccc;">Bilangan Prima</th>
                </tr>
            </thead>
            <tbody>
                <!-- Hasil bilangan prima akan dimasukkan di sini -->
            </tbody>
        </table>
    </div>

    <script>
        function isPrime(num) {
            if (num <= 1) return false;
            for (let i = 2; i <= Math.sqrt(num); i++) {
                if (num % i === 0) return false;
            }
            return true;
        }

        function generatePrimes() {
            const start = parseInt(document.getElementById('angkaPertama').value);
            const end = parseInt(document.getElementById('angkaTerakhir').value);
            const primes = [];

            for (let i = start + 1; i < end; i++) {
                if (isPrime(i)) {
                    primes.push(i);
                }
            }

            const tableBody = document.getElementById('primeTable').getElementsByTagName('tbody')[0];
            tableBody.innerHTML = ''; // Clear previous results

            primes.forEach(prime => {
                const row = tableBody.insertRow();
                const cell = row.insertCell();
                cell.textContent = prime;
            });
        }
    </script>
</body>
</html>


Dan berikut ini adalah hasil outputnya:





Project 8.2

Mini Project 2: Sorting


 • Buat sebuah halaman yang terdiri dari input angka dan pilihan sorting. Lihat halaman selanjutnya
 • Bilangan yg diinput adalah angka acak dan dipisah dengan tanda koma
.• Jika button sorting diklik, maka akan muncul table yang berisi angka dalam keadaan sudah terurut sesuai dengan urutan yang dipilih, apakah ascending atau descending.


berikut ini adalah kodenya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sorting Angka</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #e0f7fa;
            margin: 0;
        }
        .card {
            background: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            width: 300px;
            text-align: center;
        }
        .card h1 {
            color: #00796b;
            margin-bottom: 20px;
        }
        .card label {
            display: block;
            margin-bottom: 8px;
            color: #00796b;
            font-weight: bold;
        }
        .card input[type="text"],
        .card select {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-sizing: border-box;
        }
        .card button {
            width: 100%;
            padding: 10px;
            background: #00796b;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .card button:hover {
            background: #004d40;
        }
        .card table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        .card th, .card td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }
        .card th {
            background: #00796b;
            color: #fff;
        }
        .card tbody tr:nth-child(even) {
            background: #f1f1f1;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Sorting Angka</h1>
        <label for="angkaInput">Masukkan Angka (dipisah dengan koma):</label>
        <input type="text" id="angkaInput" name="angkaInput">
        <label for="sortOrder">Pilih Urutan:</label>
        <select id="sortOrder" name="sortOrder">
            <option value="ascending">Ascending</option>
            <option value="descending">Descending</option>
        </select>
        <button onclick="sortNumbers()">Sort</button>
       
        <table id="sortedTable">
            <thead>
                <tr>
                    <th>Angka</th>
                </tr>
            </thead>
            <tbody>
                <!-- Hasil angka yang sudah diurutkan akan dimasukkan di sini -->
            </tbody>
        </table>
    </div>

    <script>
        function sortNumbers() {
            const input = document.getElementById('angkaInput').value;
            const sortOrder = document.getElementById('sortOrder').value;

            // Memisahkan input menjadi array angka
            let numbers = input.split(',').map(Number);

            // Mengurutkan angka
            if (sortOrder === 'ascending') {
                numbers.sort((a, b) => a - b);
            } else {
                numbers.sort((a, b) => b - a);
            }

            // Mengisi tabel dengan angka yang sudah diurutkan
            const tableBody = document.getElementById('sortedTable').getElementsByTagName('tbody')[0];
            tableBody.innerHTML = ''; // Menghapus hasil sebelumnya

            numbers.forEach(number => {
                const row = tableBody.insertRow();
                const cell = row.insertCell();
                cell.textContent = number;
            });
        }
    </script>
</body>
</html>



Dan berikut ini adalah hasil outputnya:






Project 8.3

Mini Project 3: Min Max 


• Buat sebuah halaman terdiri dari input angka dan button Find 
• Bilangan yg diinput adalah angka acak dan dipisah dengan tanda        koma.
• Jika button diklik maka akan muncul table yg berisi nilai Min, Max dan Average dari angka yang ada diinput

berikut ini adalah kodenya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Find Min, Max, and Average</title>
    <style>
        body {
            font-family: 'tahoma', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: lightcyan;
            margin: 0;
        }
        .card {
            background: #f0f0f0;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 15px 30px 1px rgba(0,0,0,0.1);
            width: fit-content;
            text-align: center;
        }
        .card h1 {
            color: #000000;
            margin-bottom: 20px;
            font-size: 24px;
        }
        .card label {  
            display: block;
            margin-bottom: 10px;
            color: #363636;
            font-weight: bold;
            text-align: left;
        }
        .card input[type="text"] {
            background: rgb(255, 255, 255);
            width: calc(100% - 20px);
            padding: 10px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            margin-bottom: 20px;
            border: 2px solid gray;
            border-radius: 10px;
            box-sizing: border-box;
        }
        .card button {
            width: 100%;
            padding: 12px;
            background: #ff8400;
            font-weight: bold;
            color: #ffffffff;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;

        }
        .card button:hover {
            background: #e25f07;
        }
        table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;
        }
        th {
            background: lightgreen;
            color: #000000;
        }
        tbody tr:nth-child(even) {
            background: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Find Min, Max, and Average</h1>
        <label for="angkaInput">Masukkan Angka (dipisah dengan koma):</label>
        <input type="text" id="angkaInput" name="angkaInput">
        <button onclick="findValues()">Find</button>
       
        <table id="resultTable">
            <thead>
                <tr>
                    <th>Min</th>
                    <th>Max</th>
                    <th>Average</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="minValue"></td>
                    <td id="maxValue"></td>
                    <td id="avgValue"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        function findValues() {
            const input = document.getElementById('angkaInput').value;
            let numbers = input.split(',').map(Number);

            let min = Math.min(...numbers);
            let max = Math.max(...numbers);
            let avg = numbers.reduce((a, b) => a + b, 0) / numbers.length;

            document.getElementById('minValue').textContent = min;
            document.getElementById('maxValue').textContent = max;
            document.getElementById('avgValue').textContent = avg.toFixed(2);
        }
    </script>
</body>
</html>



Dan ini adalah hasil outputnya :







Project 8.4

Mini Project 4: Inventory Buah


 • Modifikasi Mini Project Inventory Buah, gunakan array untuk menyimpan data (sebagai data store)
.• Fungsi Add, Edit dan Delete akan melakukan Add, Edit dan Delete pada array.
 • Data yg tampil dalam HTML Table merupakan cerminan dari data pada array
 • Refresh data pada HTML table setiap kali terjadi operasi Add, Edit dan Delete pada array.


berikut ini adalah kodenya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inventory Buah</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f8f9fa;
            margin: 0;
        }
        .container {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            width: 600px;
        }
        .container h1 {
            color: #333;
            margin-bottom: 20px;
            font-size: 24px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }
        .form-group input {
            width: calc(100% - 20px);
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }
        .form-group button {
            padding: 10px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .form-group button:hover {
            background: #0056b3;
        }
        table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;
        }
        th {
            background: #007bff;
            color: white;
        }
        tbody tr:nth-child(even) {
            background: #f9f9f9;
        }
        .actions button {
            color: #0056b3;
            margin-right: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
        .actions .edit {
            background-color: #ffc107;
            color: white;
            border: none;
            border-radius: 5px;
        }
        .actions .delete {
            background-color: #dc3545;
            color: white;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Inventory Buah</h1>
        <div class="form-group">
            <label for="name">Nama Buah:</label>
            <input type="text" id="name">
        </div>
        <div class="form-group">
            <label for="quantity">Jumlah:</label>
            <input type="number" id="quantity">
        </div>
        <div class="form-group">
            <button onclick="addFruit()">Add</button>
        </div>
       
        <table id="fruitTable">
            <thead>
                <tr>
                    <th>Nama Buah</th>
                    <th>Jumlah</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                <!-- Data buah akan dimasukkan di sini -->
            </tbody>
        </table>
    </div>

    <script>
        let fruits = [];
        let editIndex = -1;

        function addFruit() {
            const name = document.getElementById('name').value;
            const quantity = document.getElementById('quantity').value;

            if (name === '' || quantity === '') {
                alert('Nama dan jumlah buah harus diisi!');
                return;
            }

            const fruit = { name, quantity: Number(quantity) };

            if (editIndex === -1) {
                fruits.push(fruit);
            } else {
                fruits[editIndex] = fruit;
                editIndex = -1;
            }

            clearForm();
            updateTable();
        }

        function editFruit(index) {
            document.getElementById('name').value = fruits[index].name;
            document.getElementById('quantity').value = fruits[index].quantity;
            editIndex = index;
        }

        function deleteFruit(index) {
            fruits.splice(index, 1);
            updateTable();
        }

        function clearForm() {
            document.getElementById('name').value = '';
            document.getElementById('quantity').value = '';
        }

        function updateTable() {
            const tableBody = document.getElementById('fruitTable').getElementsByTagName('tbody')[0];
            tableBody.innerHTML = '';

            fruits.forEach((fruit, index) => {
                const row = tableBody.insertRow();
                const nameCell = row.insertCell(0);
                const quantityCell = row.insertCell(1);
                const actionsCell = row.insertCell(2);

                nameCell.textContent = fruit.name;
                quantityCell.textContent = fruit.quantity;

                const editButton = document.createElement('button');
                editButton.textContent = 'Edit';
                editButton.className = 'edit';
                editButton.onclick = () => editFruit(index);

                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Delete';
                deleteButton.className = 'delete';
                deleteButton.onclick = () => deleteFruit(index);

                actionsCell.appendChild(editButton);
                actionsCell.appendChild(deleteButton);
            });
        }
    </script>
</body>
</html>


dan ini hasil outputnya: 







Project 8.5

Mini Project 5: Paging 

• Modifikasi Mini Project Inventory Buah, gunakan array untuk menyimpan data (sebagai data store).
• Buat paging jika dengan 5 baris per halaman

berikut ini adalah kodenya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inventory Buah</title>
    <style>
        table {
            border-collapse: separate;
            width: 80%;
            margin: 20px auto;
        }
        #itemWeight {
            margin-left: 41px;
            margin-top: 2px;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        #itemPicture {
            margin-left: 24px;
            margin-top: 2px;
        }
        tr.red-bg td:nth-child(3) {
            background-color: red;
        }
        #dataForm {
            margin-top: 20px;
            text-align: left;
        }
        .pagination {
            text-align: center;
            margin: 20px 0;
        }
        .pagination button, .pagination span {
            margin: 0 5px;
            padding: 8px 12px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .pagination .active {
            background-color: red;
            color: white;
            cursor: default;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">Project-2</h1>

    <!-- Form untuk tambah data -->
    <form id="dataForm">
        <label for="itemName">Nama Buah:</label>
        <input type="text" id="itemName" name="itemName" required>
        <br>
        <label for="itemWeight">Berat:</label>
        <input type="number" id="itemWeight" name="itemWeight" min="0" required>
        <br>
        <label for="itemPicture">Gambar:</label>
        <input type="text" name="itemPicture" id="itemPicture">
        <br>
        <button type="button" onclick="addData()">Add</button>
    </form>

    <!-- Table untuk menampilkan data -->
    <table id="dataTable">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama Buah</th>
                <th>Berat (kg)</th>
                <th>Gambar</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data akan ditambahkan di sini -->
        </tbody>
    </table>

    <div class="pagination">
        <!-- Pagination buttons will be dynamically inserted here -->
    </div>

    <script>
        let dataBuah = [];
        let currentPage = 1;
        const rowsPerPage = 5;

        function refreshTable() {
            const tableBody = document.querySelector("#dataTable tbody");
            tableBody.innerHTML = ""; // Clear previous data

            const start = (currentPage - 1) * rowsPerPage;
            const end = start + rowsPerPage;
            const pageData = dataBuah.slice(start, end);

            pageData.forEach((item, index) => {
                const newRow = tableBody.insertRow();
                const cell1 = newRow.insertCell(0);
                const cell2 = newRow.insertCell(1);
                const cell3 = newRow.insertCell(2);
                const cell4 = newRow.insertCell(3);
                const cell5 = newRow.insertCell(4);

                cell1.innerHTML = start + index + 1;
                cell2.innerHTML = item.name;
                cell3.innerHTML = item.weight;
                cell4.innerHTML = `<img src="${item.picture}" alt="Gambar" style="max-width: 100px; max-height: 100px;">`;
                cell5.innerHTML = `<button onclick="editRow(${start + index})">Edit</button> <button onclick="deleteRow(${start + index})">Delete</button>`;

                if (item.weight > 5) {
                    newRow.classList.add('red-bg');
                }
            });

            updatePagination();
        }

        function updatePagination() {
            const paginationDiv = document.querySelector(".pagination");
            paginationDiv.innerHTML = ""; // Clear previous pagination

            const totalPages = Math.ceil(dataBuah.length / rowsPerPage);

            const createPageButton = (pageNumber) => {
                const button = document.createElement("span");
                button.textContent = pageNumber;
                button.classList.add("page-number");
                if (pageNumber === currentPage) {
                    button.classList.add("active");
                }
                button.addEventListener("click", () => goToPage(pageNumber));
                return button;
            };

            if (currentPage > 1) {
                const prevButton = document.createElement("span");
                prevButton.textContent = "«";
                prevButton.addEventListener("click", prevPage);
                paginationDiv.appendChild(prevButton);
            }

            for (let i = 1; i <= totalPages; i++) {
                paginationDiv.appendChild(createPageButton(i));
            }

            if (currentPage < totalPages) {
                const nextButton = document.createElement("span");
                nextButton.textContent = "»";
                nextButton.addEventListener("click", nextPage);
                paginationDiv.appendChild(nextButton);
            }
        }

        function goToPage(pageNumber) {
            currentPage = pageNumber;
            refreshTable();
        }

        function prevPage() {
            if (currentPage > 1) {
                currentPage--;
                refreshTable();
            }
        }

        function nextPage() {
            const totalPages = Math.ceil(dataBuah.length / rowsPerPage);
            if (currentPage < totalPages) {
                currentPage++;
                refreshTable();
            }
        }

        function addData() {
            const itemName = document.getElementById("itemName").value;
            const itemWeight = document.getElementById("itemWeight").value;
            const itemPicture = document.getElementById("itemPicture").value;

            dataBuah.push({
                name: itemName,
                weight: parseFloat(itemWeight),
                picture: itemPicture
            });

            refreshTable();

            document.getElementById('itemName').value = '';
            document.getElementById('itemWeight').value = '';
            document.getElementById('itemPicture').value = '';
        }

        function editRow(index) {
            const item = dataBuah[index];

            const row = document.querySelector("#dataTable tbody").rows[index % rowsPerPage];
            const cells = row.getElementsByTagName("td");

            const originalValues = [
                item.name,
                item.weight,
                item.picture
            ];

            cells[1].innerHTML = `<input type="text" value="${item.name}">`;
            cells[2].innerHTML = `<input type="number" value="${item.weight}" min="0">`;
            cells[3].innerHTML = `<input type="url" value="${item.picture}">`;
            cells[4].innerHTML = `<button onclick="saveRow(${index})">Save</button> <button onclick="cancelEditRow(${index}, '${originalValues.join("','")}')">Cancel</button>`;
        }

        function saveRow(index) {
            const row = document.querySelector("#dataTable tbody").rows[index % rowsPerPage];
            const cells = row.getElementsByTagName("td");

            const itemName = cells[1].getElementsByTagName("input")[0].value;
            const itemWeight = cells[2].getElementsByTagName("input")[0].value;
            const itemPicture = cells[3].getElementsByTagName("input")[0].value;

            dataBuah[index] = {
                name: itemName,
                weight: parseFloat(itemWeight),
                picture: itemPicture
            };

            refreshTable();
        }

        function cancelEditRow(index, itemName, itemWeight, itemPicture) {
            dataBuah[index] = {
                name: itemName,
                weight: parseFloat(itemWeight),
                picture: itemPicture
            };

            refreshTable();
        }

        function deleteRow(index) {
            dataBuah.splice(index, 1);
            refreshTable();
        }
    </script>
</body>
</html>


dan berikut ini adlaha hasil outputnya:







See you in the next project

Komentar

Posting Komentar

Postingan populer dari blog ini

Pemrograman berorientasi objek

-
Gambar
PEMROGRAMAN BERORIENTASI OBJEK   A. Pengertian   Pemrograman berorientasi objek (OOP) adalah model pemrograman komputer yang mengatur desain perangkat lunak seputar data, atau objek, bukan fungsi dan logika.  OOP berfokus pada objek yang ingin dimanipulasi oleh pengembang daripada logika yang diperlukan untuk,    Hal ini mencakup program untuk manufaktur dan desain, serta aplikasi seluler; misalnya OOP dapat digunakan untuk pembuatan perangkat lunak simulasi sistem . B. Struktur pemrograman berorientasi objek stuktur OOP mencangkup beberapa hal diantaranya adalah: Class adalah tipe data yang ditentukan pengguna yang bertindak sebagai cetak biru untuk objek, atribut, dan metode individual. Objek  adalah turunan dari kelas yang dibuat dengan data yang ditentukan secara spesifik. Objek dapat berhubungan dengan objek dunia nyata atau entitas abstrak. Ketika class didefinisikan pada awalnya, deskripsi adalah satu-satunya objek yang didefinisikan. Metode  a...
Baca selengkapnya

Data Analytic

-
DATA  ANALYTIC 1. APA ITU DATA ? Data merupakan sekelompok informasi atau fakta mentah yang dapat berupa simbol, angka, kata-kata, atau citra. Informasi ini diperoleh melalui proses pengamatan atau pencarian dari sumber-sumber tertentu. Secara etimologis, istilah “data” berasal dari bentuk jamak kata Latin “datum,” yang artinya “sesuatu yang diberikan.” Dalam penggunaan sehari-hari, data, baik dalam bentuk angka maupun kata-kata, mengacu pada fakta objek yang diamati. Sementara, dari sudut pandang statistika, data merupakan fakta-fakta yang digunakan untuk membuat kesimpulan. 2. APA ITU DATA ANALYST ? data analyst  (atau analis data) adalah orang yang bekerja dengan data.  Data analyst  ahli dalam bidang analisis data, salah satu pekerjaan dalam bidang  data science .  Data science  adalah sebuah cara untuk meneliti dan mengolah data mentah untuk menarik sebuah kesimpulan.  Lebih tepatnya lagi,  data analysis  berkaitan dengan  data...
Baca selengkapnya

module 7

-
Gambar
 PROJECT 7.2 Saya akan membuat sebuah program javascript dengan hasil seperti gambar berikut: dengan ketentuan seperti berikut: • 1. Modifikasi table buah pada Mini Project sebelumnya •  2. Jika button edit diklik maka input edit langsung muncul pada baris tersebut dan tombol edit berubah menjadi save (perhatikan gambar berikut)  • 3. Ketika button save diklik maka, baris tersebut menjadi normal kembali yaitu berupa text dan gambar, tetapi dengan menggunakan nilai yang baru sesui hasil edit. Dan button save kembali menjadi edit langsung kita mulai saja: 1. berikut kode HTML nya :     < form id =" dataForm ">         < label for =" itemName ">Nama Buah:</ label >         < input type =" text " id =" itemName " name =" itemName " style =" margin-left: 11px; ">     < br >         < label for =" itemWeight ">Berat:</ label >       ...
Baca selengkapnya