CodeLove-JS2-L5

by kulimusoda

HTML

<div class="wrap">
  <h1 class="mb-3">待辦事項</h1>
  <div class="todolist-input mb-3">
    <input type="text" class="inputItem" placeholder="增加事項">
    <select name="status" id="status" class="status_opt" onchange="status_color()">
      <option value="normal">一般</option>
      <option value="important">重要</option>
      <option value="urgent">緊急</option>
    </select>
    <button class="btn add" onclick="addItem()">新增</button>
  </div>

  <ul class="todolist-body mb-3">
  </ul>
  <div class="text-right p-1">
    <button class="btn export" onclick="exportAlert()">匯出</button>
  </div>

</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap');

/* base */

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
  font-family: 'Noto Sans TC', sans-serif;
  color: #030303;
background-color: #ffefd3;
}

h1 {
  font-size: 2rem;
}

input, button,select{
  border-radius: 0.25rem;
}

input {
  border: 1px solid #030303;
  padding: 0.25rem;
  font-size: 1rem;
}
select{
    border: 1px solid #030303;
    padding: 2px 0.25rem;
    font-size: 1rem;
}

button {
  background-color: transparent;
  border:none;
  border-radius: 0.25rem;
}

.wrap {
  width: 50%;
  margin: 2rem auto;
  padding: 1rem;
  background-color: #fff;
  -webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  -moz-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 6px;
}


/* spacing */
.mb-3 {
  margin-bottom: 1rem;
}
.p-1{
  padding: 0.5rem;
}

.text-right{
  text-align: right;
}

// utils
.btn{
  border: 1px solid;
  padding: 0.25rem 0.75rem;
}

.add {
  color: navy;
      &:hover{
        background-color: navy;
        color: #fff;
      }
}
.delete{
      color: #800020;
      &:hover{
        background-color: #800020;
        color: #fff;
      }
}

.export{
  color: green;
  &:hover{
    background-color: green;
    color: #fff;
  }
}


/* todolist */
.todolist {
  &-body {
    border: 2px solid #eee;
    border-radius: 0.25rem;
  }

  &-item {
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;

    &:not(:last-of-type) {
      border-bottom: 1px dashed #eee;
    }
  }
}

.important{
  font-weight: bold;
  color: orange;
}

.urgent{
    font-weight: bold;
  color: #800020;
}

/* status */
.orange{
  background-color: orange;
  color: #fff;
}

.red{
  background-color: red;
  color: #fff;
}

JavaScript

let inputItem = document.querySelector(".inputItem");
  let list = document.querySelector(".todolist-body");
  let btn_export = document.querySelector('.export');
  let todolist = [];
  let status = document.querySelector('.status_opt');

  function addItem() {
    let newItem = inputItem.value;
    let el = document.createElement('li');
    let item = document.createElement('span');
    let btn_del = document.createElement('button');
    let itemStatus = status.value;

    if(newItem === "") return alert("請先輸入事項");

    item.textContent = newItem;
    el.classList.add('todolist-item');
    btn_del.textContent = '刪除';
    btn_del.classList.add('btn', 'delete');
    btn_del.onclick = remove;

    todolist.push(`${newItem}-${itemStatus}`);
    console.log(todolist); 

    if (itemStatus === 'important') {
      item.className = "important";
    } else if (itemStatus === 'urgent') {
      item.className = "urgent";
    }

    el.append(item);
    el.append(btn_del);
    list.append(el);
    console.log(todolist);

    document.querySelector(".inputItem").value = '';
    document.querySelector('.status_opt').value = "normal";
  }


  function remove() {
    let delItem = todolist.indexOf(event.target.parentElement.children[0].textContent);
    todolist.splice(delItem, 1);
    event.target.parentElement.remove();
  }

  function exportAlert() {
    let result = "";
    for (let i = 0; i < todolist.length; i++) {
      let todoItem = todolist[i].split('-')[0];
      console.log(todoItem);
      let todoStatus = todolist[i].split('-')[1];
      if (todoStatus === 'important') {
        result += `${i + 1}. *${todoItem}*\n`;
      } else if (todoStatus === 'urgent') {
        result += `${i + 1}. **${todoItem}**\n`;
      } else {
        result += `${i + 1}. ${todoItem}\n`;
      }

    }
    if (result === '') return alert("今日無待辦事項");

   alert(`匯出待辦事項：\n\n${result}`);
  }
  
  function status_color(){
  	let status = event.target.options[event.target.selectedIndex];
 ...