新手學習JavaScript：day28 - Todolist(1) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 28

自我挑戰組

純新手學習 JavaScript系列第 28 篇

新手學習JavaScript：day28 - Todolist(1)

12th鐵人賽

Will

2020-10-12 02:13:45

2345 瀏覽

分享至

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"
  }
})

以上就是今天的實作內容，這樣子我們就完成兩個功能啦！那刪除任務以及確認任務都完成後，按下完成任務就會跑到完成的區域，讓我們明天再繼續吧！