MINI PROJECT 4 MODUL 5

Memanipulasi list yg awalnya kosong dan dapat ditambahkan menggunakan input

Code nya sebagai berikut:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Konfigurasi</title>

  <script>

    function changeColor1() {

        var li = document.getElementById('item-list');

        li.style.color = 'blue'

}

    function changeColor2() {

        var li = document.getElementById('item-list');

        li.style.color = 'green'

}

    function changeColor3() {

        var li = document.getElementById('item-list');

        li.style.color = 'yellow'

}

    function changeHover1() {

        var li = document.getElementById('item-list');

        li.classList.add('hover-biru');

}

    function changeHover2() {

        var li = document.getElementById('item-list');

        li.classList.add('hover-hijau');

}

    function changeHover3() {

        var li = document.getElementById('item-list');

        li.classList.add('hover-kuning');

}

</script>

</head>

<style>

    .hover-biru:hover {

        color: blue;

}

    .hover-hijau:hover {

        color: lime;

}

    .hover-kuning:hover {

        color: yellow;

}

</style>

<body>

  <h1>Konfigurasi</h1>

<p>

    <strong>Teks</strong>:

    <input type="text" id="teks" value="Item">

  </p>

<p>

    <strong>Jumlah Item</strong>:

    <input type="number" id="jumlah" value="6">

  </p>

<p>

    <strong>Item List</strong>:

    <ul id="item-list"></ul>

  </p>

  <script>

    // Inisialisasi item list

    const itemList = document.getElementById("item-list");

    itemList.innerHTML = "";

    // Set event listener untuk input teks dan jumlah

    const teksInput = document.getElementById("teks");

    const jumlahInput = document.getElementById("jumlah");

    teksInput.addEventListener("change", generateItems);

    jumlahInput.addEventListener("change", generateItems);

    // Fungsi untuk generate item list

    function generateItems() {

      // Dapatkan teks dan jumlah dari input

      const teks = teksInput.value;

      const jumlah = jumlahInput.value;

      // Hapus semua item dari daftar

      itemList.innerHTML = "";

      // Generate item baru

      for (let i = 0; i < jumlah; i++) {

        const item = document.createElement("li");

        item.innerText = teks;

        itemList.appendChild(item);

}

}

  </script>

  <h3>Warna teks</h3>

  <button onclick="changeColor1()">biru</button>

  <button onclick="changeColor2()">hijau</button>

  <button onclick="changeColor3()">kuning</button>

  <h3>Warna hover</h3>

  <button onclick="changeHover1()">biru</button>

  <button onclick="changeHover2()">hijau</button>

  <button onclick="changeHover3()">kuning</button>

</body>

</html>

dan output yg dihasilkan sebagai berikut:

Blog Pang5