merubah warna teks dan hover pada list (modul 5 project 1)
Pada kesempatan kali ini saya akan membuat sebuah program yang dapat merubah warna teks dan
warna hover pada suatu list
SourceCode:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fruit List</title>
<style>
/* Style untuk warna teks dan hover */
.black-text {
color: black;
}
.blue-text {
color: blue;
}
.green-text {
color: green;
}
.yellow-text {
color: yellow;
}
.red-hover:hover {
color: red;
}
.purple-hover:hover {
color: purple;
}
.pink-hover:hover {
color: pink;
}
</style>
</head>
<body>
<ul id="fruitList">
<li class="black-text">Manggis</li>
<li class="bleck-text">Mangga</li>
<li class="black-text">Alpukat</li>
<li class="black-text">Sirsak</li>
<li class="black-text">Durian</li>
<li class="black-text">Rambutan</li>
</ul>
<h1>Warna Text</h1>
<div class="warnaText">
<input type="radio" onclick="textColorBlue('blue-text')" name="txt" />Biru
<input
type="radio"
onclick="textColorGreen('green-text')"
name="txt"
/>Hijau
<input
type="radio"
onclick="textColorYellow('yellow-text')"
name="txt"
/>Kuning
</div>
<h1>Warna Hover</h1>
<div class="hover">
<input
type="radio"
onclick="hoverColorRed('red-hover')"
name="hvr"
/>Merah
<input
type="radio"
onclick="hoverColorPurple('purple-hover')"
name="hvr"
/>Ungu
<input
type="radio"
onclick="hoverColorPink('pink-hover')"
name="hvr"
/>Pink
</div>
<script>
function textColorBlue() {
var fruitList = document.getElementById("fruitList");
var fruitItems = fruitList.getElementsByTagName("li");
for (var i = 0; i < fruitItems.length; i++) {
fruitItems[i].classList.remove("green-text", "yellow-text");
fruitItems[i].classList.add("blue-text");
}
}
function textColorGreen() {
var fruitList = document.getElementById("fruitList");
var fruitItems = fruitList.getElementsByTagName("li");
for (var i = 0; i < fruitItems.length; i++) {
fruitItems[i].classList.remove("blue-text", "yellow-text");
fruitItems[i].classList.add("green-text");
}
}
function textColorYellow() {
var fruitList = document.getElementById("fruitList");
var fruitItems = fruitList.getElementsByTagName("li");
for (var i = 0; i < fruitItems.length; i++) {
fruitItems[i].classList.remove("green-text", "blue-text");
fruitItems[i].classList.add("yellow-text");
}
}
function hoverColorRed() {
var fruitList = document.getElementById("fruitList");
var fruitItems = fruitList.getElementsByTagName("li");
for (var i = 0; i < fruitItems.length; i++) {
fruitItems[i].classList.remove("purple-hover", "pink-hover");
fruitItems[i].classList.add("red-hover");
}
}
function hoverColorPurple() {
var fruitlist = document.getElementById("fruitList");
var fruitItems = fruitlist.getElementsByTagName("li");
for (var i = 0; i < fruitItems.length; i++) {
fruitItems[i].classList.remove("red-hover", "pink-hover");
fruitItems[i].classList.add("purple-hover");
}
}
function hoverColorPink() {
var fruitlist = document.getElementById("fruitList");
var fruitItems = fruitlist.getElementsByTagName("li");
for (var i = 0; i < fruitItems.length; i++) {
fruitItems[i].classList.remove("purple-hover", "red-hover");
fruitItems[i].classList.add("pink-hover");
}
}
</script>
</body>
</html>
Berikut penjelasan lebih rinci tentang kode tersebut:
1. Di bagian <style> terdapat definisi beberapa kelas CSS yang digunakan untuk mengatur
warna teks (black-text, blue-text, green-text, yellow-text) dan warna hover (red-hover,
purple-hover, pink-hover).
2. Di dalam <body>, terdapat sebuah <ul> dengan id fruitList yang berisi beberapa elemen
<li> yang mewakili daftar buah-buahan. Setiap elemen <li> memiliki kelas yang menentukan
warna teksnya, namun terdapat kesalahan penulisan kelas pada elemen kedua
(<li class="bleck-text">Mangga</li>).
3. Di bawah daftar buah-buahan, terdapat dua bagian dengan judul "Warna Text" dan "Warna
Hover". Masing-masing bagian memiliki radio button untuk memilih warna teks dan warna hover.
4 .Di bagian <script>, terdapat beberapa fungsi JavaScript yang akan dijalankan ketika
radio button ditekan:
a. textColorBlue(), textColorGreen(), dan textColorYellow(): Mengubah warna teks dari
elemen daftar menjadi biru, hijau, atau kuning. Fungsi-fungsi ini menghapus kelas warna
yang tidak diinginkan dan menambahkan kelas warna yang sesuai.
b. hoverColorRed(), hoverColorPurple(), dan hoverColorPink(): Mengubah warna hover dari
elemen daftar menjadi merah, ungu, atau pink. Fungsi-fungsi ini juga menghapus kelas
warna hover yang tidak diinginkan dan menambahkan kelas warna hover yang sesuai.
Hasilnya:
Komentar
Posting Komentar