Javascript 5.4: Membuat Mini Project Generate List Dan Ganti Warna
Javascript Bag. 5.4
Mmembuat Mini Project Generate List Dan Ganti Warna
HTML Markup:
<div class="project">: Mendefinisikan sebuah div (container) dengan class "project".<ul id="myList2"></ul>: Membuat daftar tak terurut (unordered list) dengan id "myList2".<label for="text">Teks:</label>: Membuat label untuk input teks dengan id "text".<input type="text" id="text" placeholder="Masukkan teks">: Membuat input teks dengan id "text" dan placeholder.<label for="quantity">Jumlah:</label>: Membuat label untuk input jumlah dengan id "quantity".<input type="number" id="quantity" placeholder="Masukkan jumlah" min="1" value="1">: Membuat input jumlah dengan id "quantity", dengan batasan minimal 1 dan nilai awal 1.<button onclick="generateListItem()">Generate Item</button>: Tombol yang akan memanggil fungsigenerateListItem()saat diklik.<h3>warna Teks</h3>dan<h3>Warna Hover</h3>: Heading untuk bagian pilihan warna teks dan warna hover.Input radio buttons untuk memilih warna teks dan warna hover.
JavaScript Functions:
generateListItem(): Menggunakandocument.getElementById()untuk mengambil nilai teks dan jumlah yang dimasukkan. Selanjutnya, menggunakandocument.createElement()untuk membuat elemen<li>(list item) dan menambahkannya ke dalam daftar<ul>dengan id "myList2".changeColor(color): Menggunakandocument.getElementById()untuk mendapatkan elemen dengan id "myList2" dan mengubah properti warna teksnya.changeHoverColor(color): Menggunakandocument.querySelectorAll()untuk mendapatkan semua elemen<li>di dalam daftar dengan id "myList2". Kemudian, menggunakan metodeforEachuntuk menambahkan event listener pada setiap elemen, sehingga dapat mengubah warna teks saat mouseover dan mereset ke warna default saat mouseout.
CSS Styling:
.project: Didefinisikan dalam tag<style>untuk memberikan gaya pada elemen dengan class "project". Dalam contoh ini, diberikan border, padding, dan margin agar tampil berbeda.- html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contoh Kode JavaScript</title> <style> /* Ini adalah CSS untuk memberikan gaya pada elemen dengan class "project" */ .project { border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; } </style> </head> <body> <!-- Container untuk proyek --> <div class="project"> <ul id="myList2"></ul> </div> <!-- Input teks dan jumlah --> <label for="text">Teks:</label> <input type="text" id="text" placeholder="Masukkan teks"> <br> <label for="quantity">Jumlah:</label> <input type="number" id="quantity" placeholder="Masukkan jumlah" min="1" value="1"> <!-- Tombol untuk menghasilkan item --> <button onclick="generateListItem()">Generate Item</button> <br> <!-- Pilihan warna teks --> <h3>Warna Teks</h3> <input onclick="changeColor('blue')" type="radio" name="color" id="blue">Biru <input onclick="changeColor('red')" type="radio" name="color" id="red">Merah <input onclick="changeColor('green')" type="radio" name="color" id="green">Hijau <br> <!-- Pilihan warna hover --> <h3>Warna Hover</h3> <input onmouseover="changeHoverColor('blue')" type="radio" name="hoverColor" id="hoverBlue">Biru <input onmouseover="changeHoverColor('red')" type="radio" name="hoverColor" id="hoverRed">Merah <input onmouseover="changeHoverColor('green')" type="radio" name="hoverColor" id="hoverGreen">Hijau <!-- Script JavaScript untuk manipulasi elemen --> <script> 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 item sebelumnya while (myList.firstChild) { myList.removeChild(myList.firstChild); } // Membuat item sebanyak jumlah yang dimasukkan for (var i = 1; i <= quantityInput; i++) { var listItem = document.createElement("li"); listItem.textContent = textInput + " " + i; myList.appendChild(listItem); } } } function changeColor(color) { var list = document.getElementById("myList2"); list.style.color = color; } function changeHoverColor(color) { var listItems = document.querySelectorAll("#myList2 li"); // Menetapkan warna saat mouseover dan mereset ke warna default saat mouseout listItems.forEach(function (item) { item.addEventListener("mouseover", function () { item.style.color = color; }); item.addEventListener("mouseout", function () { item.style.color = ""; // Mereset ke warna default saat mouseout }); }); } </script> </body> </html>
Penjelasan singkat:
HTML Structure: Ada struktur HTML yang mencakup container untuk proyek, input teks dan jumlah, tombol untuk menghasilkan item, pilihan warna teks, dan pilihan warna hover.
CSS Style: Diberikan gaya CSS sederhana untuk elemen dengan class "project" agar terlihat berbeda dan memiliki batasan.
JavaScript Functions:
generateListItem(): Membaca nilai teks dan jumlah yang dimasukkan, lalu membuat daftar item sesuai jumlah yang diminta.changeColor(color): Mengubah warna teks pada daftar sesuai pilihan warna yang dipilih.changeHoverColor(color): Mengubah warna teks saat mouseover pada setiap item daftar sesuai pilihan warna hover yang dipilih. Juga mereset ke warna default saat mouseout.
Komentar
Posting Komentar