Modul 5 JavaScript project 1-5
kode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>Manggis</li>
<li>Mangga</li>
<li>Alpukat</li>
<li>Sirsak</li>
<li>Durian</li>
<li>Rambutan</li>
</ul>
<hr>
<span style="font-size: 4vh;"><b>Warna Text</b></span>
<form id="warnaText" onchange="textColor()">
<input type="radio" name="clr" id="textBiru-Btn">
<label>Biru</label>
<input type="radio" name="clr" id="textHijau-Btn">
<label>Hijau</label>
<input type="radio" name="clr" id="textKuning-Btn">
<label>Kuning</label>
</form>
<br>
<span style="font-size: 4vh;"><b>Warna Hover</b></span>
<form id="warnaHover" onchange="hoverColor()">
<input type="radio" name="clr" id="hoverMerah-Btn">
<label>Merah</label>
<input type="radio" name="clr" id="hoverCokelat-Btn">
<label>Cokelat</label>
<input type="radio" name="clr" id="hoverPink-Btn">
<label>Pink</label>
</form>
<script>
// simpan list
let list = document.getElementsByTagName("li");
// simpan elemen text
let textBiru = document.getElementById("textBiru-Btn");
let textHijau = document.getElementById("textHijau-Btn");
let textKuning = document.getElementById("textKuning-Btn");
// simpan elemen hover
let hoverMerah = document.getElementById("hoverMerah-Btn");
let hoverCokelat = document.getElementById("hoverCokelat-Btn");
let hoverPink = document.getElementById("hoverPink-Btn");
// buat fungsi, iterasi List buat ganti color
function iterateListColor(property, value) {
for (let index = 0; index < list.length; index++) {
list[index].style[property] = value;
}
}
function textColor() {
if (textBiru.checked) {
iterateListColor("color", "blue");
} else if (textHijau.checked) {
iterateListColor("color", "green");
} else if (textKuning.checked) {
iterateListColor("color", "yellow");
}
}
function hoverColor() {
for (let index = 0; index < list.length; index++) {
list[index].onmouseover = function() {
if (hoverMerah.checked) {
list[index].style.color = "red";
} else if (hoverCokelat.checked) {
list[index].style.color = "brown";
} else if (hoverPink.checked) {
list[index].style.color = "pink";
}
}
list[index].onmouseout = function() {
if (textBiru.checked || textHijau.checked || textKuning.checked) {
textColor();
} else {
list[index].style.color = "";
}
}
}
}
</script>
</body>
</html>
Hasil :
.png)
.png)
Hasil :
.png)
.png)
Kode :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mini Project 2</title>
</head>
<body>
<h1>Mini Project 2</h1>
<ul id="list">
<li>Acura</li>
<li>Alfa Romeo</li>
<li>Aston Martin</li>
<li>Audi</li>
<li>Bentley</li>
<li>BMW</li>
<li>Bugatti</li>
<li>Burik</li>
</ul>
<button id="button">Ubah Warna Elemen Genap</button>
<script>
const list = document.querySelector("#list");
const button = document.querySelector("#button");
let isToggled = false;
function changeColor() {
for (let i = 0; i < list.children.length; i++) {
if (i % 2 === 1) {
list.children[i].style.color = isToggled ? "black" : "blue";
list.children[i].style.fontWeight = isToggled ? "normal" : "bold";
}
}
isToggled = !isToggled
}
button.addEventListener("click", changeColor);
</script>
</body>
</html>
Project 3
Hasil :
.png)
Kode :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>Project-3</h1>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
<label for="colorSelector"> Ubah Angka Genap
<select id="colorSelector" onchange="ubahWarna()">
<option value="">Pilih Warna</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>
</label>
<br>
<label for="colorSelector"> Ubah Angka Ganjil
<select id="colorList" onchange="changeColor()">
<option value="">Pilih Warna</option>
<option value="purple">Purple</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
</select>
</label>
</div>
<script>
function ubahWarna() {
var selectElement = document.getElementById("colorSelector");
var selectColor = selectElement.value;
var listItem = document.querySelectorAll("#myList li")
var i = 1;
while (i < listItem.length) {
listItem[i].style.color = selectColor;
listItem[i].style.fontWeight = "bold"
i += 2
}
}
function changeColor() {
var selectElement = document.getElementById("colorList");
var selectColor = selectElement.value;
var listItem = document.querySelectorAll("#myList li")
var j = 0;
do {
listItem[j].style.color = selectColor;
listItem[j].style.fontWeight = "bold";
j += 2
}
while (j < listItem.length);
}
</script>
</body>
</html>
Projek 4
Hasil :
.png)
Kode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<strong>Item List</strong>:
<ul id="item-list"></ul>
</p>
<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>
<hr>
<span style="font-size: 4vh;"><b>Warna Text</b></span>
<form id="warnaText" onchange="textColor()">
<input type="radio" name="clr" id="textBiru-Btn">
<label>Biru</label>
<input type="radio" name="clr" id="textHijau-Btn">
<label>Hijau</label>
<input type="radio" name="clr" id="textKuning-Btn">
<label>Kuning</label>
</form>
<br>
<span style="font-size: 4vh;"><b>Warna Hover</b></span>
<form id="warnaHover" onchange="hoverColor()">
<input type="radio" name="clr" id="hoverMerah-Btn">
<label>Merah</label>
<input type="radio" name="clr" id="hoverCokelat-Btn">
<label>Cokelat</label>
<input type="radio" name="clr" id="hoverPink-Btn">
<label>Pink</label>
</form>
<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);
}
}
// simpan list
let list = document.getElementsByTagName("li");
// simpan elemen text
let textBiru = document.getElementById("textBiru-Btn");
let textHijau = document.getElementById("textHijau-Btn");
let textKuning = document.getElementById("textKuning-Btn");
// simpan elemen hover
let hoverMerah = document.getElementById("hoverMerah-Btn");
let hoverCokelat = document.getElementById("hoverCokelat-Btn");
let hoverPink = document.getElementById("hoverPink-Btn");
// buat fungsi, iterasi List buat ganti color
function iterateListColor(property, value) {
for (let index = 0; index < list.length; index++) {
list[index].style[property] = value;
}
}
function textColor() {
if (textBiru.checked) {
iterateListColor("color", "blue");
} else if (textHijau.checked) {
iterateListColor("color", "green");
} else if (textKuning.checked) {
iterateListColor("color", "yellow");
}
}
function hoverColor() {
for (let index = 0; index < list.length; index++) {
list[index].onmouseover = function() {
if (hoverMerah.checked) {
list[index].style.color = "red";
} else if (hoverCokelat.checked) {
list[index].style.color = "brown";
} else if (hoverPink.checked) {
list[index].style.color = "pink";
}
}
list[index].onmouseout = function() {
if (textBiru.checked || textHijau.checked || textKuning.checked) {
textColor();
} else {
list[index].style.color = "";
}
}
}
}
</script>
</body>
</html>
Projek 5
Hasil :
.png)
Kode :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project 5</title>
<style>
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: left;
}
.highlight {
background-color: red;
}
</style>
</head>
<body>
<h1>Data Barang</h1>
<form id="formTambah">
<label for="namaBarang">Nama Barang:</label>
<input type="text" id="namaBarang" required>
<br>
<label for="berat">Berat (kg):</label>
<input type="number" id="berat" required>
<br>
<button type="button" onclick="tambahData()">Tambah Data</button>
</form>
<h2>Daftar Barang:</h2>
<table id="barangTable">
<thead>
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Berat (kg)</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="barangBody"></tbody>
</table>
<script>
function tambahData() {
var namaBarangInput = document.getElementById("namaBarang");
var beratInput = document.getElementById("berat");
var barangBody = document.getElementById("barangBody");
var namaBarang = namaBarangInput.value;
var berat = parseFloat(beratInput.value);
// var backgroundColorClass = berat > 5 ? "highlight" : "";
if (berat > 5) {
var backgroundColorClass = "highlight";
}
var newRow = barangBody.insertRow();
var cellNo = newRow.insertCell(0);
var cellNamaBarang = newRow.insertCell(1);
var cellBerat = newRow.insertCell(2);
var cellAksi = newRow.insertCell(3);
cellNo.textContent = barangBody.rows.length;
cellNamaBarang.textContent = namaBarang;
cellBerat.textContent = berat + " kg";
cellBerat.classList.add(backgroundColorClass);
var btnHapus = document.createElement("button");
btnHapus.textContent = "Hapus";
btnHapus.onclick = function() {
hapusBaris(newRow);
};
cellAksi.appendChild(btnHapus);
namaBarangInput.value = "";
beratInput.value = "";
}
function hapusBaris(row) {
var barangBody = document.getElementById("barangBody");
barangBody.removeChild(row);
for (var i = 0; i < barangBody.rows.length; i++) {
barangBody.rows[i].cells[0].textContent = i + 1;
}
}
</script>
</body>
</html>
.png)
.png)
Komentar
Posting Komentar