Tạo danh sách công việc (to-do list) với JavaScript

Ví dụ

Mã sau tạo một danh sách công việc đơn giản:

<!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> 
</head> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<body> 
  <input type="text" placeholder="Nhập công việc của bạn..." id="txtData"> 
  <button onclick="todoList()">Thêm công việc</button> 
  <ul id="to_do_list"> 
  </ul> 
</body> 
<script> 
  function todoList() { 
    const myTask = document.getElementById('txtData'); 
    const addToDoList = document.getElementById('to_do_list'); 
    let originalValue = `
 ${myTask.value} 
`; 
    myTask.value = ''; 
    addToDoList.insertAdjacentHTML('beforeend', originalValue); 
  } 
</script> 
</html>

Để chạy chương trình, lưu file với tên index.html. Nhấp chuột phải vào file và chọn Open with Live Server trong VSCode.

Kết quả

Giao diện sẽ hiển thị ô nhập liệu và nút thêm. Khi nhập công việc và nhấn nút, công việc sẽ được thêm vào danh sách bên dưới.