Membuat sistem yang meng generate list sesuai input yang di masukkan menggunakan JavaScript

 Pada saat awal, item list dibuat kosong 

Menambahkan input teks dan jumlah. Jika input teks dan jumlah dirubah, maka secara otomatis mengenerate item dengan teks dan jumlah yang sesuai dengan input tadi.

Warna hover dan warna teks tetap sama dengan Mini Project 1

Berikut adalah kode html nya:

    <label for="text">Input Teks:</label>

    <input type="text" id="text" placeholder="Masukkan teks">

    <label for="quantity">Input Jumlah:</label>

    <input type="number" id="quantity" placeholder="Masukkan jumlah" min="1" value="1">

    <button onclick="generateListItem()">Generate Item</button>

<br>

    <ul id="myList2"></ul>

    <input onclick="ChangeBlue()" type="radio" name="color" id="blue">biru

    <input onclick="ChangeRed()" type="radio" name="color" id="red">merah

    <input onclick="ChangeGreen()" type="radio" name="color" id="green">hijau

    <h3>Warna Hover</h3>

  <input onmouseover="changeHoverColor('teal')" type="radio" name="hoverColor"

id="hoverBlue">Teal

  <input onmouseover="changeHoverColor('gold')" type="radio" name="hoverColor"

id="hoverRed">Gold

  <input onmouseover="changeHoverColor('lightgreen')" type="radio" name="hoverColor"

id="hoverGreen">Lightgreen

Berikut adalah kode java scriptnya

function generateListItem() {

    var textInput = document.getElementById("text").value;

    var quantityInput = document.getElementById("quantity").value;

    if (textInput && quantityInput > 0) {

      var myList = document.getElementById("myList2");

      // Menghapus semua elemen anak sebelum menambahkan yang baru

      while (myList.firstChild) {

        myList.removeChild(myList.firstChild);

      }

      // Membuat elemen-elemen list sesuai dengan input

      for (var i = 1; i <= quantityInput; i++) {

        var listItem = document.createElement("li");

        listItem.textContent = textInput + " " + i;

        myList.appendChild(listItem);

        }

      }

    }

  }

function ChangeBlue() {

  var blue = document.getElementById("myList2")

  blue.style.color=('blue')

}

function ChangeRed() {

  var blue = document.getElementById("myList2")

  blue.style.color=('red')

}

function ChangeGreen() {

  var blue = document.getElementById("myList2")

  blue.style.color=('green')

}

function changeHoverColor(color) {

  var listItems = document.querySelectorAll("#myList2 li");

  listItems.forEach(function (item) {

    item.addEventListener("mouseover", function () {

      item.style.color = color;

    });

    item.addEventListener("mouseout", function () {

      item.style.color = ""; // Reset to default color on mouseout

    });

  });

}

Berikut adalah output nya;

Penjelasan  

Fungsi generateListItem:

Fungsi ini digunakan untuk membuat daftar berdasarkan input teks dan jumlah dari pengguna. Jika input valid, daftar akan dibuat ulang sesuai dengan jumlah yang dimasukkan, dan elemen-genap akan diberi warna khusus.

Fungsi Perubahan Warna (ChangeBlue, ChangeRed, ChangeGreen):

Fungsi-fungsi ini digunakan untuk mengubah warna teks pada elemen daftar dengan ID "myList2" menjadi biru, merah, atau hijau, sesuai dengan fungsi yang dipanggil.