128 lines
4.2 KiB
HTML
128 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Jawaban Latihan Project 08</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; padding: 20px; max-width: 600px; margin: auto; }
|
|
.exercise-box { background: #f9f9f9; padding: 15px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 5px; }
|
|
.hidden { display: none; }
|
|
#toggle-box { width: 100px; height: 100px; background: tomato; margin-top: 10px; color: white; display: flex; align-items: center; justify-content: center;}
|
|
ul { background: #fff; padding: 15px 30px; border: 1px solid #ccc; }
|
|
li { margin-bottom: 5px; }
|
|
.remove-btn { margin-left: 10px; background: red; color: white; border: none; cursor: pointer; padding: 3px 6px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Jawaban Latihan Project 08</h1>
|
|
|
|
<!-- EXERCISE 1 -->
|
|
<div class="exercise-box">
|
|
<h3>Exercise 1: Looping Angka 1-10</h3>
|
|
<ul id="number-list"></ul>
|
|
</div>
|
|
|
|
<!-- EXERCISE 2 -->
|
|
<div class="exercise-box">
|
|
<h3>Exercise 2: Filter Nama Huruf "A"</h3>
|
|
<ul id="name-list"></ul>
|
|
</div>
|
|
|
|
<!-- EXERCISE 3 -->
|
|
<div class="exercise-box">
|
|
<h3>Exercise 3: Toggle Button (Show/Hide)</h3>
|
|
<button id="toggle-btn">Tampilkan / Sembunyikan Kotak</button>
|
|
<div id="toggle-box">Ini Kotak!</div>
|
|
</div>
|
|
|
|
<!-- EXERCISE 4 -->
|
|
<div class="exercise-box">
|
|
<h3>Exercise 4: Live Character Counter</h3>
|
|
<textarea id="text-input" rows="4" style="width: 100%;" placeholder="Ketik sesuatu di sini..."></textarea>
|
|
<p>Jumlah karakter: <span id="char-count">0</span></p>
|
|
</div>
|
|
|
|
<!-- EXERCISE 5 -->
|
|
<div class="exercise-box">
|
|
<h3>Exercise 5: Mini To-Do List</h3>
|
|
<input type="text" id="todo-input" placeholder="Tugas baru...">
|
|
<button id="add-todo-btn">Tambah Tugas</button>
|
|
<ul id="todo-list"></ul>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
// JAWABAN EXERCISE 1
|
|
// Gunakan for loop untuk mengisi <ul> dengan angka 1 sampai 10
|
|
|
|
const numberList = document.getElementById("number-list");
|
|
let htmlNumbers = "";
|
|
for (let i = 1; i <= 10; i++) {
|
|
htmlNumbers += `<li>Angka ${i}</li>`;
|
|
}
|
|
numberList.innerHTML = htmlNumbers;
|
|
|
|
|
|
const names = ["Andi", "Budi", "Ayu", "Citra", "Agus", "Dewi"];
|
|
const nameList = document.getElementById("name-list");
|
|
let htmlNames = "";
|
|
|
|
for (let i = 0; i < names.length; i++) {
|
|
if (names[i].startsWith("A")) {
|
|
htmlNames += `<li>${names[i]}</li>`;
|
|
}
|
|
}
|
|
nameList.innerHTML = htmlNames;
|
|
|
|
|
|
|
|
const toggleBtn = document.getElementById("toggle-btn");
|
|
const toggleBox = document.getElementById("toggle-box");
|
|
|
|
toggleBtn.addEventListener("click", function() {
|
|
toggleBox.classList.toggle("hidden");
|
|
});
|
|
|
|
|
|
|
|
const textInput = document.getElementById("text-input");
|
|
const charCount = document.getElementById("char-count");
|
|
|
|
textInput.addEventListener("input", function() {
|
|
charCount.textContent = textInput.value.length;
|
|
});
|
|
|
|
|
|
|
|
const todoInput = document.getElementById("todo-input");
|
|
const addTodoBtn = document.getElementById("add-todo-btn");
|
|
const todoList = document.getElementById("todo-list");
|
|
|
|
|
|
addTodoBtn.addEventListener("click", function() {
|
|
if (todoInput.value.trim() === "") return; // Cegah input kosong
|
|
|
|
const li = document.createElement("li");
|
|
li.textContent = todoInput.value + " ";
|
|
|
|
const removeBtn = document.createElement("button");
|
|
removeBtn.textContent = "Hapus";
|
|
removeBtn.className = "remove-btn";
|
|
|
|
li.appendChild(removeBtn);
|
|
todoList.appendChild(li);
|
|
|
|
todoInput.value = "";
|
|
});
|
|
|
|
|
|
todoList.addEventListener("click", function(event) {
|
|
if (event.target.matches(".remove-btn")) {
|
|
event.target.closest("li").remove();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |