JSFiddle - React, Tailwind, and code Playground

by erika_sun

HTML

<input id='input'/>
 <button onclick="add()">新增</button>
 <select>
  <option value="normal">一般</option>
  <option value="important">重要</option>
  <option value="urgent">緊急</option>
</select>
<div id="root">
 
</div>

CSS

.normal{
  color:black;
}
.important{
  color:orange;
}
.urgent{
  color:red;
}
span{
  margin-left:18px
}
button{
  margin: 0px 14px
}

JavaScript

var todos = [
  {
    title: "倒垃圾",
    category: "normal",
    isCompleted:false
  },
  {
    title: "繳電話費",
    category: "important",
    isCompleted:false
  },
  {
    title: "採買本週食材",
    category: "urgent",
    isCompleted:false
  },
];




function render()
{
    console.log('todos', todos)
    const root = document.querySelector('#root')
    const ul = document.createElement('ul')
 	root.textContent = ''
     root.append(ul)
     for(  let  index in  todos ){
     const li = document.createElement('li')
     const span = document.createElement('span')
      const completedText = document.createElement('span')
     const delBtn = document.createElement('button')
      const completedBtn = document.createElement('button')
     	completedText.textContent = '(已完成)'
      completedText.style.display = 'none'
      completedBtn.textContent = '標示已完成'
      delBtn.textContent = '刪除'
      if(todos[index].isCompleted){
        completedText.textContent = '(已完成)'
        completedText.style.display = 'inline'
      }else{
          completedText.style.display = 'none'
      }
  
    
       span.textContent = todos[index].title
       span.classList.add(todos[index].category)
       li.append(span)
       li.append(completedText)
       li.append(completedBtn)
       li.append(delBtn)
       ul.append(li)
       
       
       delBtn.onclick = ()=>{
          console.log('index',index)
          todos.splice(index, 1)
          render()
       }
       
       completedBtn.onclick = ()=>{
       
       	todos[index].isCompleted= !todos[index].isCompleted
        render()
       }
     }
}

function add(){
	  const input = document.querySelector('input')
    const select = document.querySelector('select')
    console.log('select  ==> ', select.value)
    todos.push({ 
    title: input.value,
    category:select.value
    })
    input.value = ''
    render();
   
}

render();