新手学习JavaScript：day28 - Todolist(1)
Todolist 是JavaScript入门中的基础实作，能够练习基础的DOM操作。身为一个初学者就是需要刻意练习，今天就让我们来尝试用JavaScript来实作看看todolist吧！
先来看看成品是什麽样子吧：
完整的 HTML 及 CSS如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="todolist.css">
<script src="https://kit.fontawesome.com/3c031d0545.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="todolist-section">
<div class="todo-container">
<div class="todo-header">
<h1>My To-do List</h1>
</div>
<div class="todo-input-area">
<form action="" class="todo-form">
<input type="text" placeholder="在此输入........">
<input type="submit" value="新增任务">
</form>
</div>
<div class="task-list-area">
<div class = "tab">
<div class ="working tab-item active">进行中</div>
<div class ="finished tab-item">已完成</div>
</div>
<ul class = "todo-list active">
<h3 class="no-new-task">目前没有新的任务</h3>
</ul>
<ul class="finished-list ">
<h3 class="no-finished-task">尚未有任务完成</h3>
</ul>
</div>
<button class = "finished-button">确认完成</button>
</div>
</div>
<template>
<li class = "task">
<input type="checkbox" class="check item">
<p class= "content item"></p>
<span class="delete item"><i class="far fa-trash-alt"></i></span>
</li>
</template>
<script src="todolist.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
}
.todolist-section{
padding:100px;
}
.todo-container{
max-width: 1200px;
width: 100%;
margin: auto;
border: 1px solid rgb(39, 44, 44);
border-radius: 20px;
background-color: rgb(9, 135, 173);
min-height: 400px;
padding:20px 0;
}
.todo-header h1 {
padding: 0 0 20px;
text-align: center;
letter-spacing: 5px;
border-bottom: 1px solid white;
color:#fff;
}
.todo-input-area{
padding: 20px 20px 10px;
box-sizing: border-box;
}
.todo-form{
position: relative;
}
.todo-input-area input[type="text"]{
width: 100%;
box-sizing: border-box;
padding: 10px 10px;
border-radius: 10px;
border: none;
box-shadow: 2px 2px 2px rgb(69, 85, 88);
height: 40px;
font-size:20px
}
.todo-input-area input[type="submit"],
.todo-input-area input[type="text"]:focus{
outline: none;
}
.todo-input-area input[type="submit"]{
position: absolute;
width: 15%;
right: 0;
top: -1px;
bottom: 0;
margin: auto;
box-sizing: border-box;
padding: 10px;
border: none;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
color: #fff;
background-color: rgb(73, 165, 177);
}
.task-list-area{
padding: 10px 20px;
}
.task-list-area .tab{
display: flex;
}
.tab-item{
width: 100px;
background-color: #fff;
text-align: center;
padding: 10px 0;
border-radius: 10px 10px 0 0;
cursor: pointer;
}
.working{
position: relative;
z-index: 1;
}
.finished{
position: relative;
margin-left: -25px;
z-index: 0;
}
.finished-list,
.todo-list{
width: 100%;
min-height: 250px;
border-radius: 0 10px 10px 10px;
box-shadow: 2px 2px 2px rgb(59, 59, 59);
box-sizing: border-box;
padding: 20px 10px;
display: none;
}
.active{
background-color: rgb(154, 213, 236);
display: block;
z-index: 1;
}
.finished-list .task,
.todo-list .task{
padding: 0 20px;
display: flex;
align-items: center;
min-height: 65px;
border-radius: 10px;
background-color: rgb(66, 154, 196);
box-shadow: 2px 2px 2px rgb(126, 141, 155);
color:white;
}
.finished-list li + li,
.todo-list li + li{
margin-top: 20px;
}
.task p{
box-sizing: border-box;
width: 0;
flex-grow: 1;
font-size: 24px;
margin-left: 10px;
word-break: break-all;
}
.task input{
width: 20px;
height: 20px;
}
.task .delete{
color: rgb(185, 77, 77);
font-size:18px;
font-weight: bold;
cursor: pointer;
}
.no-finished-task,
.no-new-task{
text-align: center;
line-height: 210px;
font-size: 30px;
letter-spacing: 10px;
}
.finished-button{
display: block;
margin-right: 45px;
margin-left: auto;
padding:10px;
border:none;
box-shadow: 2px 2px 2px black;
border-radius: 15px;
cursor: pointer;
}
.finished-button:focus{
box-shadow: 0 0 0 transparent;
outline: none;
}
Todolist 主要功能有：
- 新增任务
- 完成任务打勾会将任务划掉
- 可以删除任务
- 确认任务都完成後，按下完成任务就会跑到完成的区域
今天就先来谈谈新增任务跟完成後将任务划掉的功能吧！
新增任务
- 我们必须先取得form、input和事先准备的template（里面是每一个list的结构），最後是放置任务的区域。
let addTodoElement = () => {
let todoForm = document.querySelector(".todo-form")
let todoInput = document.querySelector(".todo-form input[type='text']")
let todoListArea = document.querySelector(".todo-list")
let listTemplate = document.querySelector("template")
element = {
todoForm,
todoInput,
todoListArea,
listTemplate,
}
return element
}
- 当form提交（submit）出去後我们要取得input中是填入什麽内容,并把内容指派至template中的list，然後让他出现在放置任务的区域。
addTodo()
function addTodo(){
// 将input 的内容指派至template中的li里面的p，然後让他出现在放置任务的区域。
let renderTemplate = (value, list)=>{
let clone = document.importNode(addTodoElement().listTemplate.content,true)
clone.querySelector(".task .content").textContent = value
list.appendChild(clone)
}
// 监听form的submit事件
addTodoElement().todoForm.addEventListener("submit",(e)=>{
e.preventDefault();
let content = addTodoElement().todoInput.value
renderTemplate(content, addTodoElement().todoListArea)
addTodoElement().todoForm.reset()
})
}
完成任务打勾将任务划掉
- 监听任务区域是不是有被点击，点击的对象是不是checkbox，如果是而且checkbox被勾起来，那就让文字加上line-through，反之就取消。
addTodoElement().todoListArea.addEventListener("click",(e)=>{
if(e.target.classList[0] === "check" && e.target.checked){
e.target.parentNode.style.textDecoration = "line-through black"
}
if(e.target.classList[0] === "check" && !e.target.checked){
e.target.parentNode.style.textDecoration = "none"
}
})
以上就是今天的实作内容，这样子我们就完成两个功能啦！那删除任务以及确认任务都完成後，按下完成任务就会跑到完成的区域，让我们明天再继续吧！
<<: 【验证模型】3-7 「今晚，我想来点⋯⋯」动手做的餐点选择器进化！（上集）
Day 14-制作购物车系统之安装及资料夹结构(三)
今天要说git repository的部分。 go go~ 以下内容有参考教学影片，底下有附网址。 ...
09 | WordPress 图片区块 Image Block
一般阅读的文章是由标题和段落文字组成，如果是长篇内容，容易让读者感到沉闷。这时候你可以试试适当加入...
[SQL] 读 XML 格式文件写入 SQL table
范例 XML 档案格式内容如下，想抓 XML 几个栏位的资料写入 table 中，SQL 语法如下 ...
DAY 30 好用的套件
推荐扩充套件 Color Highlight 这边跟大家推荐 Color Highlight 这个扩...
成员 8 人：先知预言，公司会爆发绝望病毒
「以前我不觉得发薪日很烦，最近觉得超烦，唉......」 今日跟过去有什麽不同吗？ 若你现在 4个合...