todolist 全能版

App.js

import React, { Component } from "react";
import './App.css'
export default class App extends Component {
  state = {
    // 将数据保存到浏览器中
    data: JSON.parse(window.localStorage.getItem('todo')) || [],
    // 控制显示与隐藏
    active: 0,
    value: ""
  }
  // 获取到input框中的值
  insert(ev) {
    this.setState({
      value: ev.target.value
    })
  }

  // 控制筛选按钮
  isHaschk() {
    let len = this.state.data.filter(item => item.ischk === true).length
    if (len > 0 && len < this.state.data.length) {
      return true
    } else if (len === this.state.data.length) {
      return false
    } else {
      return false
    }
  }
  // 控制清空完成按钮
  isCanClo() {
    let len = this.state.data.filter(item => item.ischk === true).length
    if (len > 0 && len < this.state.data.length) {
      return true
    } else if (len === this.state.data.length) {
      return true
    } else {
      return false
    }
  }
  // 添加
  // 保存到浏览器里面
  add() {
    let info = { id: new Date().getTime(), data: this.state.value, ischk: false }
    console.log(info);
    this.setState({
      data: [info, ...this.state.data]
    }, () => {
      window.localStorage.setItem('todo', JSON.stringify(this.state.data))
    })
    this.setState({
      value: ""
    })
  }
  // 更改按钮状态事件
  changeChk(id) {
    let info = this.state.data.map(item => {
      if (item.id === id) {
        item.ischk = !item.ischk
      }
      return item
    })
    this.setState({
      data: info
    }, () => {
      window.localStorage.setItem('todo', JSON.stringify(this.state.data))
    })
  }
  // 删除
  del(id) {
    let info = this.state.data.filter(item => item.id !== id)
    this.setState({
      data: info
    }, () => {
      window.localStorage.setItem('todo', JSON.stringify(this.state.data))
    })
  }

  // 删除全部
  delEnd() {
    let info = this.state.data.filter(item => item.ischk === false)
    this.setState({
      data: info,
      active: 1
    }, () => {
      window.localStorage.setItem('todo', JSON.stringify(this.state.data))
    })
  }
  render() {
    let { value, data, active } = this.state
    let nodo = data.filter(item => item.ischk === false).length
    return (
      <div className="app">
        < div className="box" >
          <img src="user1.png" alt="" />
          <h4>~Today I need to ~</h4>
          <input type="text" className="addInp" value={value} onChange={(ev) => this.insert(ev)} placeholder="Add new todo..." />
          <button className="sub" onClick={() => this.add()}>Submit</button>

          <ul>
            {
             data.map(item => {
              if (active === 0) {
                return <li key={item.id} className={item.ischk === true ? 'chk' : ''}>
                  <input type="checkbox" onChange={() => {
                    this.changeChk(item.id)
                  }} checked={item.ischk} />
                  <span>{item.data}</span>
                  <p className="clo" onClick={() => this.del(item.id)}>X</p>
                </li>
              } else if (active === 1 && item.ischk === false) {
                return <li key={item.id}>
                  <input type="checkbox" onChange={() => {
                    this.changeChk(item.id)
                  }} checked={item.ischk} />
                  <span>{item.data}</span>
                  <p className="clo" onClick={() => this.del(item.id)}>X</p>
                </li>
              } else if (active === 2 && item.ischk === true) {
                return <li key={item.id} className='chk'>
                  <input type="checkbox" checked onChange={() => {
                    this.changeChk(item.id)
                  }} />
                  <span>{item.data}</span>
                  <p className="clo" onClick={() => this.del(item.id)}>X</p>
                </li>
              }
              return false
            })}
          </ul>



          <footer style={{ display: data.length === 0 ? '' : 'none' }}>
            <span className="null">Congrat,you have no more tasks to do</span>
          </footer>
          <footer className="notnull" style={{ display: data.length > 0 ? '' : 'none' }}>
            <span className="notnullFount">{nodo}item left</span>
            <button onClick={() => {
              this.setState({
                active: 0
              })
            }} className={active === 0 ? 'all' : ''}>All</button>
            <button onClick={() => {
              this.setState({
                active: 1
              })
            }} className={active === 1 ? 'all' : ''} style={{ display: this.isHaschk() ? '' : 'none' }}>Active</button>
            <button onClick={() => {
              this.setState({
                active: 2
              })
            }} className={active === 2 ? 'all' : ''} style={{ display: this.isHaschk() ? '' : 'none' }}>Completed</button>
            <button onClick={() => this.delEnd()} style={{ display: this.isCanClo() ? '' : 'none' }}>Clear completed</button>
          </footer>
        </div >
      </div>
    );
  }
}

APP.css

*{
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
  height: 100px;
  background: linear-gradient(to right, rgb(255, 179, 0), pink);
}
.app{
  width: 100%;
  height: 100%;
  
}
.box {
  width: 50%;
  min-height: 350px;
  background-color: #f2f2f2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 25px;
  text-align: center;
}

.box img {
  margin-top: 30px;
}
.box input{
  width: 300px;
  height: 40px;
  border: 0;
  border-bottom: 2px dotted #ea7a56;
}

.sub {
  border: 2px solid black;
  padding: 5px 10px;
  border-radius: 6px;
  background-color: #fff;
  margin-left: 15px;
}
ul{
  list-style: none;
  text-align: left;
  padding-left: 60px;
  width: 80%;
  margin-top: 40px;
  
} 
.clo{
  display: inline-block;
  font-weight: 600;
}
li{
  display: flex;
  align-items: center;
  height: 35px;
  margin-top: 15px;
}
.chk{
  background-color: #fe7345;
  color: white;
  border-radius: 5px;
  
}
.chk span{
  text-decoration: line-through;
}

li:last-child{
  margin-bottom: 100px;
}

li input[type='checkbox']{
  width: 5%;
}

li span{
  width: 80%;
}
.notnull{
  text-align: left;
  padding: 0px 40px 30px;
  display: flex;
  justify-content: space-between;
}
.null{
  color: #b4b9c1;
  letter-spacing: 0px;
  margin-bottom: 10px;
}
.notnullFount{
  color: #827870;
  letter-spacing: 0px;
}
.all{
  background-color: #fe7444;
  border: 0;
  border-radius: 5px;
  color: white;
  padding: 3px 8px;
}
footer button{
  border: none;
}
footer button:hover{
  background-color: #fe7444;
  color: white;
  border-radius: 5px;

}