To-do list

发布于 2020-02-13  145 次阅读

展示地址：http://show.cqdefxxx.com/To-do%20list/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>To-do list</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.css">
        <script src="jquery-1.11.1.min.js"></script>
	</head>
	<body>
		<div class="container">
            <input type="text" placeholder="Add a task" class="txtb">
            <div class="notcomp">
                <h3>Not complete</h3>                
               <div class="task">
                    Not complete-task-example
                    <i class="fas fa-trash-alt"></i>
                    <i class="fas fa-check"></i>
                </div>               

            </div>
                
            <div class="comp">
                <h3>complete</h3>
               <div class="task">
                    Not complete-task-example
                    <i class="fas fa-trash-alt"></i>
                </div>

            </div>
        </div>
        <script>
            $(".txtb").on("keyup",function(e){
                var v = $(this).val();
                if (e.keyCode == 13 && v != ""){
                    var task = $("<div class='task'></div>").text(v);
                    
                    var del = $("<i class='fas fa-trash-alt'></i>").click(function(){
                        var p = $(this).parent();

                        p.fadeOut(function(){
                            p.remove();
                        })
                    });
                    
                    var check = $("<i class='fas fa-check'></i>").click(function(){
                        var p = $(this).parent();
                        
                        p.fadeOut(function(){
                            $(".comp").append(p);
                            p.fadeIn();
                        });
                        $(this).remove();
                    });
                    task.append(del,check);
                    
                    $(".notcomp").append(task);
                    $(this).val("");
                }
            });
        </script>
	</body>
</html>

style.css:

*{
    margin:0;
    padding: 0;
    font-family: "montserrat",sans-serif;
    box-sizing: border-box;
}

body{
    background-image:linear-gradient(120deg,#487eb0,#fbc531);
    min-height: 100vh;
}

.container{
    max-width:800px;
    margin:auto;
    padding: 10px;
}

.txtb{
    width:100%;
    border:none;
    border-bottom:2px solid #000;
    background: none;
    padding:10px;
    outline:none;
    font-size:18px;
}

h3{
    margin:10px 0;
}

.task{
    width:100%;
    background: rgba(255,255,255,0.5);
    padding:18px;
    margin:6px 0;
    overflow: hidden;
}

.task i{
    float: right;
    margin-left:20px;
    cursor:pointer;
}

.comp .task{
    background: rgba(0,0,0,0.5);
    color:#fff;
}

 

注错之当