TodoList

发表于 分类于

TodoList代码-项目模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html lang="en" dir="ltr">

 <head>

    <meta charset="utf-8">

  <title>document</title>

  <link rel="stylesheet" href="style.css">

  <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">

    <script src="/jQuery/jquery-3.5.1.js"></script>

 </head>

 <body>

  

    <div class="container">

   <input type="text" class="txtb" placeholder="Add a task">

   

      <div class="notcomp">

​    <h3>异常(Not Completed)</h3>

   </div>

   

      <div class="comp">

​    <h3>正常(Completed)</h3>

   </div>

   

  </div>

  

    <script src="ToDolist.js"></script>

 </body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
*{
  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,.5);
  color: #fff;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(".txtb").on("keyup",function(e){
  //13  means enter button
  if(e.keyCode == 13 && $(".txtb").val() != "")
  // val返回表单字段的值
  {
    var task = $("<div class='task'></div>").text($(".txtb").val());
    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);
      //to clear the input
    $(".txtb").val("");
  }
});