Todo List-CSDN博客

本文链接：https://blog.csdn.net/h083417172_/article/details/116110679

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./base.css">
  <script src="./index.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="index">
    <div class="header">
      <h1 class="header-left">Todo List</h1>
      <button id="buttonAdd" class="header-right">+</button>
    </div>
    <div class="container">
      <div class="item">
        <div class="content">今天的任务</div>
        <button class="delete">-</button>
      </div>
      <div class="item">
        <div class="content">lll</div>
        <button class="delete">-</button>
      </div>
    </div>
    <div id="windowAdd" class="add">     
      <div class="operate">
        <span>添加任务</span>
        <button class="cancel">×</button>
        <button class="finished">√</button>
      </div>
      <label for="content">
        <input id="taskInput" type="text" name="content" placeholder="请输入任务内容">
      </label>
    </div>
  </div>

</body>
</html>

body{
  margin: 0;
  padding: 0;
}
.index{
  width: 100%;
  height: 100%;
}
.header{
  width: 100%;
  height: 15%;
  overflow: hidden; 
  background-color: rgb(74, 197, 140);
}
.header-left{
  float: left;
  margin: .5rem;
  color: rgb(255, 255, 255);
}
.header-right{
  margin-top: .5rem;
  margin-right: .3125rem;
  float: right;
  font-size: 2.5rem;
  color: rgb(255, 255, 255);
  border-width: 0px;
  background-color: rgb(74, 197, 140);
}
.container{
  width: 100%;
  height: 85%;
  /* background-color: aquamarine; */
}
.item{
  height: 30%;
  margin: .5rem;
  overflow: hidden;
  border-radius: .25rem;
  background-color: aquamarine;
  display: flex;
  -webkit-align-items: center;
}
.content{
  float: left;
  margin: .5rem;
  width: 80%;
}
.delete{
  float: right;
  width: 20%;
  font-size: 2.5rem;
  color: rgb(255, 255, 255);
  border-width: 0px;
  background-color: aquamarine;
}
.add{
  display: none;
  position: fixed;
  top: 25%;
  bottom: 60%;
  left: 25%;
  right: 25%;
  background-color: white;
  border-radius: .5rem;
}
.operate{
  display: flex;
  -webkit-align-items: center;
  overflow: hidden;
  background-color: rgb(74, 197, 140);
}
.operate span{
  float: left;
  width: 80%;
  margin: .3125rem;
  color: white;
}
.operate button{
  margin: .3125rem;
  float: right;
  width: 10%;
  color: white;
  border-width: 0;
  background-color: rgb(74, 197, 140);
}
input{
  margin: 15px;
  width: 70%;
  height: 30px;
  border: none;
  border-bottom: 2px solid rgb(74, 197, 140);
}
input:focus {
  color: rgb(74, 197, 140);
  outline-color: white;
  background-color: white;

window.onload = function () {
  let data = ['vue', 'html', 'css', 'js', 'es6', 'http'];
  getData();

  let buttonAdd = document.getElementById("buttonAdd");
  let buttonDelete = document.querySelector(".delete");
  let windowAdd = document.getElementById("windowAdd");
  let finished = document.querySelector(".finished");
  let cancel = document.querySelector(".cancel");
  let taskInput = document.getElementById("taskInput");

  buttonAdd.onclick = function () {
    taskInput.value = '';
    windowAdd.style.display = 'block';
  }

  buttonDelete.onclick = function () {
    data.remove(this.parentNode.firstChild.textContent);
    console.log(this.parentNode.firstChild.textContent)
    saveData(data);
    getData();
  }

  finished.onclick = function () {
    if (taskInput.value == '') {
      alert('请输入任务哦')
    } else {
      data.push(taskInput.value)
      saveData(data);
      let container = document.querySelector(".container");
      container.innerHTML += `<div class="item"><div class="content">` + taskInput.value + `</div>
      <button class="delete">-</button></div>`
      windowAdd.style.display = 'none';
      console.log(data)
    }
  }

  cancel.onclick = function () {
    windowAdd.style.display = 'none';
  }

  function getData() {
    let container = document.querySelector(".container");
    let preData = [];
    preData.push(container.textContent.split('\n'));
    console.log(preData)
    for(let i=0; i< data.length; i++){
      if(preData.indexOf(data[i]) >= 0){
        container.innerHTML += '';
      }else{
        container.innerHTML += `<div class="item"><div class="content">` + data[i] + `</div>
        <button class="delete">-</button></div>`;
      }
    }
  }

  function saveData(data) {
    localStorage.setItem('todoList', data);
  }

  Array.prototype.remove = function (val) {
    let index = this.indexOf(val);
    if (index > -1) {
      this.splice(index, 1);
    }
  };
}