### Membuat Aplikasi Kecil dengan JavaScript: **To-Do List** dan **Kalkulator**
Untuk memahami bagaimana fitur-fitur JavaScript yang sudah kita pelajari bisa diterapkan dalam pengembangan aplikasi, kita akan membuat dua aplikasi kecil: **To-Do List** dan **Kalkulator**. Kedua aplikasi ini akan menggunakan manipulasi DOM, event handling, dan beberapa konsep JavaScript lainnya.
## 1. **Aplikasi To-Do List**
To-Do List adalah aplikasi sederhana yang memungkinkan pengguna menambahkan tugas (to-do), menandai tugas yang telah selesai, dan menghapus tugas dari daftar. Aplikasi ini memanfaatkan HTML, CSS, dan JavaScript untuk manipulasi DOM dan event handling.
### Langkah-langkah Pembuatan:
#### a) **HTML untuk To-Do List**:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<style>
body {
font-family: Arial, sans-serif;
}
ul {
list-style-type: none;
}
li {
padding: 10px;
border: 1px solid #ccc;
margin: 5px 0;
display: flex;
justify-content: space-between;
}
.completed {
text-decoration: line-through;
color: #888;
}
</style>
</head>
<body>
<h1>To-Do List</h1>
<input type="text" id="new-task" placeholder="Tambah tugas baru">
<button id="add-task-btn">Tambah Tugas</button>
<ul id="task-list"></ul>
<script src="todo.js"></script>
</body>
</html>
```
Pada kode di atas, kita memiliki input teks untuk menambahkan tugas baru dan tombol "Tambah Tugas". Daftar tugas akan muncul dalam elemen `<ul>` dengan ID `task-list`.
#### b) **JavaScript untuk To-Do List** (todo.js):
```javascript
document.getElementById('add-task-btn').addEventListener('click', function() {
let taskInput = document.getElementById('new-task');
let taskValue = taskInput.value;
if (taskValue.trim() === "") {
alert("Tugas tidak boleh kosong!");
return;
}
// Membuat elemen list baru
let li = document.createElement('li');
li.textContent = taskValue;
// Membuat tombol hapus
let deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Hapus';
deleteBtn.style.marginLeft = '10px';
// Event handler untuk tombol hapus
deleteBtn.addEventListener('click', function() {
li.remove();
});
// Event handler untuk menandai tugas sebagai selesai
li.addEventListener('click', function() {
li.classList.toggle('completed');
});
li.appendChild(deleteBtn);
document.getElementById('task-list').appendChild(li);
// Kosongkan input setelah menambah tugas
taskInput.value = "";
});
```
Pada kode JavaScript di atas:
- Ketika tombol "Tambah Tugas" diklik, kita mendapatkan nilai input dan menambahkannya sebagai item baru dalam daftar.
- Setiap item memiliki tombol "Hapus" untuk menghapus tugas dari daftar.
- Jika item diklik, tugas tersebut akan diberi garis tengah, menandakan bahwa tugas telah selesai.
#### c) **Fitur Tambahan**:
- **Mark as complete**: Dengan menggunakan class `completed`, kita bisa menambahkan gaya pada tugas yang telah selesai.
- **Delete task**: Tombol hapus dibuat pada setiap item yang memungkinkan pengguna untuk menghapus tugas.
### Contoh Demo:
Aplikasi ini akan memungkinkan pengguna untuk menambah tugas, menandainya sebagai selesai, dan menghapusnya.
## 2. **Aplikasi Kalkulator**
Kalkulator adalah aplikasi sederhana yang memungkinkan pengguna melakukan operasi dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian.
### Langkah-langkah Pembuatan:
#### a) **HTML untuk Kalkulator**:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Sederhana</title>
<style>
#calculator {
width: 200px;
margin: 50px auto;
text-align: center;
}
input {
width: 100%;
height: 40px;
text-align: right;
margin-bottom: 10px;
font-size: 18px;
}
button {
width: 45px;
height: 45px;
margin: 5px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled>
<br>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">/</button>
<br>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">*</button>
<br>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">-</button>
<br>
<button class="number">0</button>
<button id="clear">C</button>
<button id="equals">=</button>
<button class="operator">+</button>
</div>
<script src="calculator.js"></script>
</body>
</html>
```
Pada kode di atas, kita memiliki tampilan kalkulator yang terdiri dari tombol-tombol angka, operator matematika, dan tombol hasil (`=`) serta tombol untuk menghapus (`C`).
#### b) **JavaScript untuk Kalkulator** (calculator.js):
```javascript
let display = document.getElementById('display');
let buttons = document.querySelectorAll('button');
let displayValue = '';
buttons.forEach(function(button) {
button.addEventListener('click', function() {
let buttonValue = this.textContent;
if (buttonValue === 'C') {
displayValue = '';
display.value = displayValue;
} else if (buttonValue === '=') {
try {
displayValue = eval(displayValue); // Menggunakan eval untuk menghitung
display.value = displayValue;
} catch (error) {
display.value = 'Error';
}
} else {
displayValue += buttonValue;
display.value = displayValue;
}
});
});
```
Pada kode JavaScript di atas:
- Setiap tombol pada kalkulator akan dihubungkan dengan event `click` yang akan menambahkan angka atau operator ke display.
- Jika tombol `=` diklik, kita menggunakan fungsi `eval()` untuk menghitung ekspresi matematika dan menampilkan hasilnya.
- Tombol `C` akan menghapus semua input pada kalkulator.
### Catatan tentang `eval()`
Meskipun `eval()` mempermudah evaluasi string sebagai ekspresi matematika, kita harus berhati-hati menggunakannya karena ada risiko keamanan jika digunakan dengan input dari pengguna yang tidak dapat dipercaya.
### Kesimpulan
Dua aplikasi kecil ini memperlihatkan bagaimana konsep JavaScript seperti **manipulasi DOM**, **event handling**, **looping**, dan **fungsi** diterapkan dalam pembuatan aplikasi sederhana. Kamu bisa terus mengembangkan kedua aplikasi ini dengan menambahkan lebih banyak fitur, seperti validasi input, penyimpanan data di **localStorage**, atau membuat desain yang lebih interaktif dengan **CSS**.