tạo danh sách công việc

Trong bài thực hành này, chúng ta sẽ tạo một danh sách các việc cần làm trong ngày bằng HTML, CSS và JavaScript.

Danh sách công việc

Bổ sung thêm việc cần làm bằng cách điền vào tên công việc và click nút "Add"

My to do list

Hit the gym
Play bills
Meat Geogre
Buy eggs
Read a book
Go to office

Xem kết quả

Cách tạo danh sách công việc

Bước 1) Thêm HTML:

Ví dụ

<div class="myContainer">
    <h2 style="color:white;">My to do list</h2>
    <div class="myGroup">
        <input id="myInput" type="text" placeholder="Title" />
        <button type="button" id="myBtn" onclick="addLi();">Add</button>
    </div>
</div>
<ul class="myUl">
    <li>Hit the gym</li>
    <li>Play bills</li>
    <li>Meat Geogre</li>
    <li>Buy eggs</li>
    <li>Read a book</li>
    <li>Go to office</li>
</ul>

Bước 2) Thêm CSS:

Ví dụ

/* Vùng chứa header */
.myContainer {
    padding:30px;
    background-color:#F60;
    text-align:center;
    overflow:hidden;    
}
/* Tạo kiểu cho trường input */
.myContainer .myGroup #myInput {
    width:80%;
    float:left;
    border:none;
    outline:none;
    background-color:white;
    padding:10px;    
}
/* Tào kiểu cho nút button */
.myContainer .myGroup #myBtn {
    width:20%;
    float:left;
    border:none;
    padding:10px 0;
    text-align:center;
    background-color:#ccc;
    cursor:pointer;    
}
.myContainer .myGroup #myBtn:hover {
    background-color:dodgerblue;
    color:white;    
}
/* Xóa phần mặc định của phần tử ul */
.myUl {
    margin:0;
    padding:0;    
}
/* Tạo kiểu cho phần tử list */
.myUl > li {
    padding:15px 30px;    
    background-color:#ddd;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    -webkit-transition:background-color 0.2s;
    -webkit-user-select:none;
}
/* Tạo kiểu cho nút close list */
.myUl > li > .listClose {
    position:absolute;
    top:0;
    right:0;
    padding:15px 20px;
    font-size:20px;    
    -webkit-transition:background-color 0.2s;
}
.myUl > li > .listClose:hover {
    background-color:red;
    color:white;    
}
.myUl > li:nth-child(even) {
    background-color:#f1f1f1;    
}
.myUl > li:hover:not(.active) {
    background-color:#999;    
}
.myUl .active {
    background-color:green !important;
    color:white;
    text-decoration:line-through;
    position:relative;    
}
/* Tạo icon checked */
.myUl .active:before {
    content:"";
    position:absolute;
    border:3px solid;
    border-color:transparent white white transparent;
    width:4px;
    height:10px;
    top:28%;
    left:10px;    
    -webkit-transform:translateY(-50%);
    -webkit-transform:rotate(45deg);
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>
createSpanClose();
removeLi();

/* Tạo phần tử span và gắn vào phần tử li */
function createSpanClose() {
    var li, span, i;    
    li = document.querySelectorAll("li");
    
    for(i = 0; i < li.length; i++) {
        // Thêm lớp active cho phần tử li
        li[i].onclick = function() {
            if(this.className.indexOf("active") > -1) {
                this.classList.remove("active");
            }else{
                this.classList.add("active");    
            }
        }
        span = document.createElement("SPAN");
        span.setAttribute("class","listClose");
        span.setAttribute("title","Close");
        span.innerHTML = "&times;";
        li[i].appendChild(span);        
    }    
}

// Thêm phần tử li khi người dùng click vào nút Add
function addLi() {
    var input, val, li;
    input = document.getElementById('myInput');
    val = input.value;
    li = document.createElement("LI");
    li.innerHTML = val;
    if(val) {
        document.getElementsByClassName('myUl')[0].appendChild(li);    
    }else{
        alert("Please fill your list to do!");    
    }
    document.getElementById('myInput').value = "";
    createSpanClose();
    removeLi();
}

// Xóa phần từ li khi người dùng click vào phần tử span
function removeLi() {
    var span, i;
    span = document.getElementsByClassName('listClose');
    for(i = 0; i < span.length; i++) {
        span[i].onclick = function() {
            x = this.parentNode;
            x.parentNode.removeChild(x);    
        }
    }    
}
</script>