Wechat applet todo case

From the https://ask.csdn.net/questions/7759861 simplified .

effect

Code

index.js

Page({
    
  data: {
    
    //  To do list 
    todoList: [
      {
    
        thing: ' Wash the clothes ',
        completed: false
      },
      {
    
        thing: ' Brush your shoes ',
        completed: false
      },
      {
    
        thing: ' Write code ',
        completed: false
      }
    ],
    //  To do list 
    todoThing: ""
  },
  //  To do click 
  todoClick(e) {
    
    //  from wxml Index of incoming hits 
    let index = e.currentTarget.dataset.index;
    this.setData({
    
      //  Change entries by indexing 
      [`todoList[${
      index}].completed`]: !this.data.todoList[index].completed
    })
  },
  //  To do input 
  todoThingInput(e) {
    
    this.setData({
     todoThing: e.detail.value })
  },
  //  Add a button 
  addClick() {
    
    this.setData({
    
      //  Add one more line at the end of the array 
      [`todoList[${
      this.data.todoList.length}]`]: {
    
        thing: this.data.todoThing,
        completed: false
      },
      //  Clear the input box after adding 
      todoThing: ''
    })
  },
  //  Delete button 
  deleteClick(e) {
    
    //  from wxml Index of incoming hits 
    let index = e.currentTarget.dataset.index;
    //  Delete todoList The index for index The entry of 
    this.data.todoList.splice(index, 1)
    this.setData({
    
      //  Reassign the array 
      todoList: this.data.todoList
    })
  }
})

index.wxml

<wxs module="tools">
  module.exports.getProgress = function (todo) {
    var length = todo.length;
    var checked = 0;
    for (var i = 0; i < todo.length; i++) {
      if (todo[i].completed) {
        checked++;
      }
    }
    return ' To complete the degree :' + (checked / length * 100).toFixed(2) + '%'
  }
</wxs>
<view class="todo-completion">{
   {tools.getProgress(todoList)}}</view>
<view class="todo-list">
  <view class="todo-item" wx:for="{
     {todoList}}" wx:key="unique" bindtap="todoClick" data-index="{
     {index}}">
    <!--  Click the entry to add a strikethrough  -->
    <view class="todo-form-label {
     {item.completed?'delete-line':''}}">
      <radio checked="{
     {item.completed}}" /> {
   {item.thing}}
    </view>
    <!-- catchtap Prevent bubbling and bind events  -->
    <view class="todo-delete" catchtap="deleteClick" data-index="{
     {index}}"> Delete </view>
  </view>
</view>
<view class="todo-form">
  <!-- bindconfirm  Trigger... When the finish button is clicked  -->
  <input class="form-item" type="text" placeholder=" Please enter what you want to do " value="{
     {todoThing}}" bindinput="todoThingInput" bindconfirm="addClick" />
  <button type="primary" bindtap="addClick"> add to </button>
</view>

index.wxss

.todo-form {
    
  padding: 20rpx 60rpx;
}

.todo-form .form-item {
    
  margin-bottom: 40rpx;
  font-size: 36rpx;
}

.todo-item .todo-form-label {
    
  /*  Block the event of the original component  */
  pointer-events: none;
}

.delete-line {
    
  /*  Add a strikethrough to the text  */
  text-decoration: line-through;
  color: rgba(0, 0, 0, .5);
}

.todo-list {
    
  padding: 30rpx 60rpx;
  display: flex;
  /*  Control appending from the header by style  */
  flex-direction: column-reverse;
}

.todo-list .todo-item {
    
  margin-bottom: 40rpx;
  align-items: center;
  display: inline-flex;
  font-size: 28rpx;
  justify-content: space-between;
}

.todo-item .todo-delete {
    
  line-height: 48rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #ff0000;
}

.todo-completion{
    
  text-align: center;
  padding: 20rpx 0;
}

Complete code https://developers.weixin.qq.com/s/L1YEVWmD7LAo