JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<div class="container">
  <div class="input-wrap">
    <input class="input" type="text">
    <select class="task">
      <option value="normal">一般</option>
      <option value="important">重要</option>
      <option value="urgent">緊急</option>
    </select>
    <button class="new-btn">新增</button>
  </div>
  </div>
<div class="container2">


  <ul class="lists">
    <li class="list-title">
      <span>代辦事項</span>
      
      <button class="save">儲存</button>
      <button class="export">匯出</button>
    </li>
  </ul>
</div>

SCSS

* {
  list-style:none;
}
.input {
  border-radius: 10px;
}
.task {
  position: relative;
  left: 7px;
}
.container {
  background-color: #80ffff;
  display:flex;
  padding:10px 10px;
  width:300px;
  height:25px;
  border-radius:10px;
  margin: 30px auto;
    &.important {
        background-color: #fa0;
        
        & + .task {
          background-color: #fa0;
        }
        
        & ~ .new-btn {
          background-color: #fa0;
        }
      }
      
      &.urgent {
        background-color: #ff5f5f;
        
        & + .task {
          background-color: #ff5f5f;
        }
        
        & ~ .new-btn {
          background-color: #ff5f5f;
        }
      }
}
.new-btn {
  border:none;
  background-color: transparent;
  font-size: 15px;
  margin:1px auto;
   position: relative;
   left:10px;
}
.new-btn:hover {
    color: white;   
}
.lists {
   margin-top: 20px;
    background-color: #80ffff;
    margin: 10px auto;
    width:300px;
    border-radius: 8px;
    padding: 0 10px 10px 10px;
     
}
 .list {
      background-color: white;
      border-radius: 5px;
  height: 25px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between; 
       &.important {
        background-color: #fa0;
        box-shadow: 0 0 8px #fa0;
      }
      
      &.urgent {
        background-color: #ff5f5f;
        box-shadow: 0 0 8px #ff5f5f;
      }
  }
 
.list-title {
  text-align: center;
  position: relative;
  left: 20px;
      padding: 8px 0;
 }
 
 .export {       
  position: relative;
  left: 50px;
  cursor: pointer;
  background-color: #80ffff;
  border: none;
  font-size: 15px;
}
.export:hover {
  color: white;
  font-size: 15px;
}
.save {
  position: relative;
  left: 25px;
  cursor: pointer;
  background-color: #80ffff;
  border: none;
  font-size: 15px;
}
.save:hover {
  color: white;
  font-size: 15px;
}
.list > div > button {
  border: none;
  background-color: transparent;
  font-size: 15px;
}

.lists > li > div > button:hover  {
  color:...

JavaScript

const container = document.querySelector('.container'); 
const input = document.querySelector('.input');
const lists = document.querySelector('.lists');
const newButton = document.querySelector('.new-btn');
const exports = document.querySelector('.export');
const task = document.querySelector('.task');
const save = document.querySelector('.save');

function add() {
	let todoText = input.value;
  let taskValue = task.value;
  
  if (todoText.trim() === '') return;
  
  createList(todoText, taskValue);

  document.querySelector('.input').value = '';
  document.querySelector('.task').value = 'normal';
  inputInitClass();
}

function createList(todoText, taskValue) {
	let list = document.createElement('li');
  let content = document.createElement('div');
  let control = document.createElement('div');
  let text = document.createElement('span'); 
  let complete = document.createElement('span'); 
  let isComplete = document.createElement('button');
  let deleteButton = document.createElement('button');
  
  list.classList.add('list');  
  content.classList.add('content');
  control.classList.add('control');
  text.classList.add('text');
  complete.classList.add('complete');
  deleteButton.classList.add('del-btn');
  isComplete.classList.add('is-complete');
  
  text.textContent = todoText;
  complete.textContent = '(已完成)';
  complete.style.opacity = 0;
  isComplete.textContent = '標示為已完成';
  deleteButton.textContent = '刪除';
  
  isComplete.onclick = toggleComplete;
  deleteButton.onclick = remove;

  if (taskValue === 'important') {
    list.classList.add('important');
  } else if (taskValue === 'urgent') {
    list.classList.add('urgent');
  }
  
  lists.append(list);
  list.append(content);
  list.append(control);
  content.append(text);
  content.append(complete);
  control.append(isComplete);
  control.append(deleteButton);
  
  return {
  	isComplete, 
    complete,
  };
}

function remove() {
	event.target.closest('li').remove();
}

function exportAlert() {
	let...