Dalam tutorial ini, kita akan belajar bagaimana membuat aplikasi To-Do List yang mudah digunakan, di mana data tugas Anda akan disimpan secara lokal di browser menggunakan fitur Local Storage. Ini berarti, setiap kali Anda membuka kembali aplikasi ini, daftar tugas Anda akan tetap ada dan tidak akan hilang. Mari kita mulai perjalanan ini untuk membuat aplikasi produktivitas yang berguna hanya dengan menggunakan JavaScript!
Membuat Aplikasi Todolist dengan Javascript
1. Buatlah sebuah folder baru dengan nama todolist
2. Buatlah sebuah file baru dengan nama index.html lalu copy script di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todolist App</title>
<!-- import bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row d-flex justify-content-center">
<div class="col-lg-8">
<h1 class="text-center">Todo List</h1>
<a href="add.html" class="btn btn-primary btn-sm my-4">
Add New Task
</a>
<div id="todo-list"></div>
</div>
</div>
</div>
<!-- import bootstrap javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
//mengambil data dari local storage
const todos = JSON.parse(localStorage.getItem('todos')) || [];
let list = ''
//lakukan perulangan dari data todos
//kita buat dalam bentuk card
todos.forEach((todo, index) => {
list += `<div class="card mb-4">
<div class="card-body">
<div>
<h5>${todo.keterangan}</h5>
<p>Due: ${todo.dueDate} | Status: ${todo.status}</p>
</div>
<div>
<a href="edit.html?index=${index}" class="btn btn-secondary btn-sm">Edit</a>
<button onclick="deleteTask(${index})" class="btn btn-danger btn-sm">Delete</button>
</div>
</div>
</div>
`
});
//tampilkan daftar todolist ke dalam id todo-list
document.getElementById('todo-list').innerHTML = list
})
//membuat fungsi delete
function deleteTask(index){
//mengambil data dari local storage
const todos = JSON.parse(localStorage.getItem('todos')) || [];
//menghapus data
todos.splice(index, 1)
localStorage.setItem('todos', JSON.stringify(todos))
//reload halaman
location.reload()
}
</script>
</body>
</html>3. Buatlah sebuah file baru dengan nama add.html lalu copy script di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Todo List</title>
<!-- import bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row d-flex justify-content-center">
<div class="col-lg-8">
<h1 class="text-center">Add New Task</h1>
<div class="card">
<div class="card-body">
<form id="add-task-form">
<div class="mb-4">
<label for="">Keterangan</label>
<textarea name="keterangan" id="keterangan" class="form-control" rows="5" required placeholder="Keterangan"></textarea>
</div>
<div class="mb-4">
<label for="">Due Date</label>
<input type="date" class="form-control" id="dueDate" required>
</div>
<div class="mb-4">
<label for="">Status</label>
<select name="status" id="status" class="form-control" required>
<option value="Pending">Pending</option>
<option value="Progress">Progress</option>
<option value="Completed">Completed</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Add Task</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- import bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
//script ini bereaksi saat tombol submit diklik
document.getElementById('add-task-form').addEventListener('submit', function(event){
//mencegah form direload
event.preventDefault();
//menangkap data dari form yang diisi
const keterangan = document.getElementById('keterangan').value;
const dueDate = document.getElementById('dueDate').value;
const status = document.getElementById('status').value;
//membuat objek
const todo = { keterangan, dueDate, status };
const todos = JSON.parse(localStorage.getItem('todos')) || [];
//menyimpan data
todos.push(todo);
localStorage.setItem('todos', JSON.stringify(todos));
//kembali ke halaman index
window.location.href = 'index.html'
})
</script>
</body>
</html>4. Buatlah file baru dengan nama edit.html lalu copy script di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Todo List</title>
<!-- import bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row d-flex justify-content-center">
<div class="col-lg-8">
<h1 class="text-center">Edit Task</h1>
<div class="card">
<div class="card-body">
<form id="edit-task-form">
<div class="mb-4">
<label for="">Keterangan</label>
<textarea name="keterangan" id="keterangan" class="form-control" rows="5" required placeholder="Keterangan"></textarea>
</div>
<div class="mb-4">
<label for="">Due Date</label>
<input type="date" class="form-control" id="dueDate" required>
</div>
<div class="mb-4">
<label for="">Status</label>
<select name="status" id="status" class="form-control" required>
<option value="Pending">Pending</option>
<option value="Progress">Progress</option>
<option value="Completed">Completed</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Add Task</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- import bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
//mengambil parameter url
const params = new URLSearchParams(window.location.search);
const index = params.get('index');
//mengambil data berdasarkan index
const todos = JSON.parse(localStorage.getItem('todos')) || [];
const todo = todos[index];
//menampilkan data ke dalam form
document.getElementById('keterangan').value = todo.keterangan;
document.getElementById('dueDate').value = todo.dueDate;
document.getElementById('status').value = todo.status;
//script di bawah ini untuk menyimpan data
document.getElementById('edit-task-form').addEventListener('submit', function(event){
//mencegah form direload
event.preventDefault();
//mengambil data dari form
const keterangan = document.getElementById('keterangan').value
const dueDate = document.getElementById('dueDate').value;
const status = document.getElementById('status').value;
//membuat objek dan menyimpan data
todos[index] = { keterangan, dueDate, status };
localStorage.setItem('todos', JSON.stringify(todos));
//kembali ke halaman index
window.location.href = 'index.html'
})
})
</script>
</body>
</html>5. Hasil akhirnya jika dijalankan
 |
| Tampilan Akhir Aplikasi Todolist |
Selamat! Anda telah berhasil membuat aplikasi To-Do List sederhana menggunakan JavaScript dan Local Storage. Aplikasi ini tidak hanya membantu Anda mengelola tugas-tugas harian dengan lebih baik, tetapi juga memberikan pemahaman yang lebih mendalam tentang bagaimana JavaScript dan Local Storage.
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi