Web ToDo List dengan HTML, CSS, dan JS

Pendahuluan:
Hai! Dalam artikel ini, kita akan menjelajahi cara membuat Web To-Do List yang sederhana menggunakan HTML, CSS, dan JavaScript. Dengan memahami konsep dasar ini, kamu akan bisa mengembangkan aplikasi web yang interaktif dan berguna.

1. Membuat Struktur HTML:
Langkah pertama adalah membuat struktur HTML yang diperlukan. Kamu akan membutuhkan elemen-elemen seperti input teks, tombol, dan daftar untuk menampilkan tugas yang ditambahkan. Berikut adalah contoh struktur HTML dasar untuk aplikasi To-Do List:

<!DOCTYPE html>
<html>
<head>
    <title>Web To-Do List</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Web To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Tambahkan tugas">
    <button onclick="addTask()">Tambah</button>
    <ul id="taskList"></ul>
    <script src="script.js"></script>
</body>
</html>

2. Menerapkan Desain CSS:
Setelah membuat struktur HTML, langkah selanjutnya adalah menerapkan desain CSS agar aplikasi To-Do List terlihat menarik. Kamu dapat menggunakan CSS untuk mengubah tampilan tombol, input teks, dan daftar tugas. Berikut adalah contoh kode CSS yang dapat kamu gunakan:

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    text-align: center;
}

input[type="text"] {
    padding: 10px;
    width: 70%;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 10px 0;
}

.completed {
    text-decoration: line-through;
}

3. Menambahkan Logika JavaScript:
Selanjutnya, kita akan menambahkan logika JavaScript ke dalam aplikasi agar pengguna dapat menambahkan tugas, menandai tugas sebagai selesai, dan menghapus tugas yang sudah selesai. Berikut adalah contoh kode JavaScript yang dapat kamu gunakan:

function addTask() {
    var taskInput = document.getElementById("taskInput");
    var taskList = document.getElementById("taskList");
    var newTask = document.createElement("li");
    var taskText = document.createTextNode(taskInput.value);

    newTask.appendChild(taskText);
    taskList.appendChild(newTask);
    taskInput.value = "";

    newTask.onclick = function () {
        if (newTask.classList.contains("completed")) {
            newTask.classList.remove("completed");
        } else {
            newTask.classList.add("completed");
        }
    };

    newTask.ondblclick = function () {
        taskList.removeChild(newTask);
    };
}

4. Menghubungkan Semua File:
Terakhir, pastikan kamu menghubungkan semua file HTML, CSS, dan JavaScript. Pastikan file style.css dan script.js berada di direktori yang sama dengan file HTML utama. Dengan cara ini, browser akan dapat mengakses semua file yang diperlukan. Setelah menghubungkan semua file, kamu dapat membuka file HTML pada browser untuk melihat aplikasi To-Do List yang telah berfungsi.

Kesimpulan:
Dalam artikel ini, kita telah menjelajahi cara membuat Web To-Do List yang sederhana menggunakan HTML, CSS, dan JavaScript. Dengan menggabungkan ketiga teknologi ini, kamu dapat membuat aplikasi web yang interaktif dan berguna untuk mengatur tugas harian atau pekerjaanmu. Dengan pemahaman yang lebih mendalam tentang HTML, CSS, dan JavaScript, kamu akan dapat mengembangkan aplikasi web yang lebih kompleks dan menarik. Selamat mencoba!

Blog

Web ToDo List dengan HTML, CSS, dan JS

Muhammad Hanif

Join Our Newsletter. No Spam, Only the good stuff.

Related