javascript_series_2

by aelgy369

HTML

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>

<body>

  <div class="container">
    <div class="row" id="content">
      <div class="col-2">
      </div>
      <div class="col-8 bg-light" id="toDo">
        <div class="row g-3 align-items-center" id="addToDo">
          <div class="col-auto">
            <label class="col-form-label" id="">請輸入待辦事項：</label>
          </div>
          <div class="col-6">
            <input type="text" id="typeToDo" class="form-control border border-3">
          </div>
        </div>

        <div class="row">
          <div class="col-6" id="options">
            <select class="form-select" aria-label="Default select example" onchange="colorChange()">
              <option selected>Choose Level</option>
              <option value="1">Normal</option>
              <option value="2">Important</option>
              <option value="3">Urgent</option>
            </select>
          </div>
        </div>
        <div class="buttons">
          <div class="col-auto">
            <button type="button" class="btn btn-primary btn-buttons" onclick="addToDo()">
              add
            </button>
          </div>
          <div class="col-auto">
            <button type="button" class="btn btn-primary btn-buttons" onclick="outputFile()">export</button>
          </div>
          <div class="col-auto">
            <button type="button" class="btn btn-outline-primary btn-buttons" onclick="storage()">Save</button>
          </div>
        </div>

        <hr>

        <ul class="list-group" id="listGroup">
        </ul>

      </div>
      <div...

CSS

#content {
  padding: 48px 0px;
}

#toDo {
  padding: 12px 12px;
}

#addToDo {
  padding-bottom: 16px; 
}

label.form-check-label {
  margin: 0px 12px 0px 2px;
}

button.btn-outline-success {
  margin-right: 16px;
}

.buttons {
  margin-top: 24px;
  display: flex;
}

button.btn-buttons {
  margin: 0px 4px;
}

JavaScript

function addToDo() {
  const content = document.querySelector('#typeToDo').value;
  const ul = document.querySelector('.list-group');
  // 處理 li 
  const li = document.createElement('li');
  const removeButton = removeBtn()
  const liSpan = completeBtn();
  // 處理 input 元素
  const liInput = inputCreate();
  // 處理 label 元素
  const liLabel = document.createElement('label');
  liLabel.classList.add('form-check-label');
  // 加入驗證
  if (content != "") {
    liLabel.textContent = content;
    ul.append(li);
    li.append(liInput, liLabel, liSpan, removeButton);
    addInputBorder();
    afterInput();
  } else {
    alert("請輸入正確文字")
  }
}

// 按添加鈕之後，把 input 選項歸零
function afterInput() {
  const input = document.querySelector('#typeToDo');
  input.classList.remove('border-warning', 'border-danger');
  // input.setAttribute('onfocus', 'this.value=""')
  input.value = "";
}

// 添加 li 中的 Input 元素
function inputCreate() {
  const liInput = document.createElement('input');
  liInput.classList.add('form-check-input', 'me-1');
  liInput.setAttribute('type', 'checkbox')
  liInput.setAttribute('onClick', 'completeToggle()')
  return liInput
}

// 添加已完成區塊（用按鈕來表示）
function completeBtn() {
  const liSpan = document.createElement('button');
  liSpan.classList.add('btn', 'btn-outline-success', 'btn-sm');
  liSpan.setAttribute('type', 'button');
  liSpan.setAttribute('style', 'display:none')
  liSpan.textContent = '已完成';
  return liSpan
}

// 添加刪除鍵
function removeBtn() {
  const removeBtn = document.createElement('button');
  removeBtn.classList.add('btn', 'btn-secondary', 'btn-sm');
  removeBtn.setAttribute('type', 'button');
  removeBtn.setAttribute('onclick', 'removeAction()');
  removeBtn.textContent = 'delete';
  return removeBtn;
}

// 添加 li 的 border
function addInputBorder() {
  const value = document.querySelector('.form-select').value;
  const li = event.target.parentElement.parentElement.nextElementSibling.nextElementSibling.lastChild;
  if (value == "2") {
   ...