Live Code Editor Version 2.0

Hướng dẫn tạo một To Do List với CSS và Javascript - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
          .container {
            width: 600px;
            margin: auto;
          }
          /* Chiều cao, chiều dài của phần tử sẽ bao gồm cả padding mà margin của nó */
          * {
            box-sizing: border-box;
          }

/* xóa bỏ padding và margin của thẻ ul*/
          ul {
            margin: 0;
            padding: 0;
          }

/* Định dạng các thẻ li */
          ul li {
            cursor: pointer;
            position: relative;
            padding: 12px 8px 12px 40px;
            background: #eee;
            font-size: 18px;
            transition: 0.2s;
            list-style: none;
          }

/* thiết lập các phần tử li lẻ một màu nền khác */
          ul li:nth-child(odd) {
            background: #f9f9f9;
          }

/* Đổi màu nền thẻ li khi nó được hover */
          ul li:hover {
            background: #ddd;
          }

/* khi thẻ li được chọn thì thêm màu nền và gạch ngang chữ */
          ul li.checked {
            background: #888;
            color: #fff;
            text-decoration: line-through;
          }

/* Thêm vào trước thẻ li một dấu tích khi thẻ được chọn */
          ul li.checked::before {
            content: '';
            position: absolute;
            border-color: #fff;
            border-style: solid;
            border-width: 0 2px 2px 0;
            top: 10px;
            left: 16px;
            transform: rotate(45deg);
            height: 15px;
            width: 7px;
          }

/* Định dạng button xóa công việc */
          .close {
            position: absolute;
            right: 0;
            top: 0;
            padding: 12px 16px 12px 16px;
          }

.close:hover {
            background-color: #f44336;
            color: white;
          }

/* phần header của danh sách */
          .header {
            background-color: #f44336;
            padding: 30px 40px;
            color: white;
            text-align: center;
          }

/* xóa float của các phần trước header */
          .header:after {
            content: "";
            display: table;
            clear: both;
          }

/* định dạng phần thẻ input */
          input {
            border: none;
            width: 75%;
            padding: 10px;
            float: left;
            font-size: 16px;
          }

/* định dạng button "thêm" */
          .addBtn {
            padding: 10px;
            width: 25%;
            background: #d9d9d9;
            color: #555;
            float: left;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
            transition: 0.3s;
          }

.addBtn:hover {
            background-color: #bbb;
          }
        </style>
    </head>
    <body> 
      <div class="container">
        <h2>Freetuts.net hướng dẫn tạo To Do List</h2>
        
        <div id="myDIV" class="header">
          <h2 style="margin:5px">Danh sách những việc cần làm trong năm</h2>
          <input type="text" id="myInput" placeholder="Title...">
          <span onclick="newElement()" class="addBtn">Thêm</span>
        </div>

<ul id="myUL">
          <li class="checked">Xin việc ở Google</li>
          <li class="checked">Mua biệt thự</li>
          <li>Cưới vợ</li>
          <li>Mua xe hơi</li>
          <li>Sinh con</li>
          <li>Đi du lịch vòng quanh thế giới</li>
        </ul>
      </div>
    </body>
    <script type="text/javascript">
      // Tạo button xóa và thêm nó vào trong cá thẻ li
      var myNodelist = document.getElementsByTagName("LI");
      var i;
      for (i = 0; i < myNodelist.length; i++) {
        var span = document.createElement("SPAN");
        var txt = document.createTextNode("\u00D7");
        span.className = "close";
        span.appendChild(txt);
        myNodelist[i].appendChild(span);
      }

// Khi button xóa được click thì ẩn phần tử li chứa nó
      var close = document.getElementsByClassName("close");
      var i;
      for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
          var div = this.parentElement;
          div.style.display = "none";
        }
      }

// Thêm class checked vào thẻ li nào được click
      var list = document.querySelector('ul');
      list.addEventListener('click', function(ev) {
        if (ev.target.tagName === 'LI') {
          ev.target.classList.toggle('checked');
        }
      }, false);

// Thêm công việc mới khi click vào button "thêm"
      function newElement() {
        // tạo node li
        var li = document.createElement("li");
        // lấy giá trị người dùng nhập
        var inputValue = document.getElementById("myInput").value;
        // tạo đối tượng text node
        var t = document.createTextNode(inputValue);
        // gán text node cho thẻ li vừa tạo
        li.appendChild(t);
        // kiểm tra nếu text node rỗng thì cảnh báo, nếu không thì thêm vào trong thẻ ul
        if (inputValue === '') {
          alert("You must write something!");
        } else {
          document.getElementById("myUL").appendChild(li);
        }
        // xóa giá trị thẻ input
        document.getElementById("myInput").value = "";
        // thêm button xóa vào thẻ li mới tạo
        var span = document.createElement("SPAN");
        var txt = document.createTextNode("\u00D7");
        span.className = "close";
        span.appendChild(txt);
        li.appendChild(span);
        // gán lại sự kiện cho các button xóa
        for (i = 0; i < close.length; i++) {
          close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
          }
        }
      }
    </script>
</html>