javascript module 5

MODULE 5 PROJECT 4

 

• Revisi Mini Project 1 •

 

Pada saat awal, item list dibuat kosong •

 

Tambahkan 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  

KODE HTMLNYA : 

<!-- project 4 -->

<!--  list kosong -->

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

<form id="Item-Form">

    <!-- intput untuk text dan jumlah yang diinginkan oleh user -->

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

    <input type="text" id="text-item" name="text-item">

    <label for="item-Count">Jumlah:</label>

    <input type="number" id="item-Count" name="item-Count" min="1">

    <button type="button" onclick="generate()">Generate Item</button>

    <br>

</form>

<br>

Zz

<form id="addColor">

    <!-- pilihan untuk mengubah color font -->

    <input type="radio" onclick="ubahmerah()" name="warna">merah

    <input type="radio" onclick="ubahbiru()" name="warna">biru

    <input type="radio" onclick="ubahhijau()" name="warna">hijau

</form>

<br>

<form id="addHover">

    <!-- piihan untuk hover  -->

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

id="hoverBlue">brown

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

id="hoverRed">purple

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

id="hoverGreen">aqua

 

KODE JAVASCRIPT :

function generate() {

 

        // kode untuk generate list sesuai dengan text dan jumlah quantity yang diinginkan user

    var itemText = document.getElementById('text-item').value;

    var itemCount = parseInt(document.getElementById('item-Count').value);

 

    var listContainer = document.getElementById('List-item');

    listContainer.innerHTML = '';

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

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

        listItem.textContent = itemText;

        listContainer.appendChild(listItem);

    }

}

// kode untuk merubah warna font

function ubahmerah(){

    var merah = document.getElementById("List-item")

    merah.style.color = "red"

}

function ubahbiru(){

    var merah = document.getElementById("List-item")

    merah.style.color = "blue"

}

function ubahhijau(){

    var merah = document.getElementById("List-item")

    merah.style.color = "green"

}

function ubahbgmerah(){

    var bgmerah = document.getElementById("List-item")

    bgmerah.style.color= 'red'

}

function outBgmerah(){

    var outmerah= document.getElementById('List-item')

    outBgmerah.style.color = ''

}

// kode untuk merubah hover sesuai dengan pilihan user

function changeHoverColor(color) {

      var listItems = document.querySelectorAll("#List-item li");

      listItems.forEach(function (item) {

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

          item.style.color = color;

        });

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

          item.style.color = "";

        });

      });

    }

   

       </script>

DAN INI ADALAH HASILNYA :