Live Code Editor Version 2.0

Hướng dẫn tạo một To Do List với CSS và Javascript - Giao diện 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>
</html>