jQuery

9 作業

待辦事項(To-Do List)

在 assignment 資料夾下，建立以下資料夾及檔案：

  • index.html

  • css/index.css

  • js/index.js

  • vendors/jquery/jquery-3.4.1.min.js

第一步：基本介面及 text 欄位事件

提供 html 及 CSS：

<article class="task_container">
  <h1 class="title1">任務管理</h1>

  <div class="task_add_block">
    <input type="text" class="task_name" placeholder="輸入待辦事項…">
    <button type="button" class="task_add">新增</button>
  </div>

  <div class="task_list_parent">
    <ul class="task_list">
    </ul>
  </div>
</article>

完成以下項目：

  • index.html 頁面需載入 jquery 以及 index.js

  • input.task_name 在 focus 事件觸發時，div.task_add_block 加上 -on class。

  • input.task_name 在 blur 事件觸發時，div.task_add_block 移除 -on class。

結果示意：

第二步：新增待辦事項

更新 html、css：

<!-- 載入 Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

新增待辦事項的 html：

<li>
  <div class="item_flex">
    <div class="left_block">
      <div class="btn_flex">
        <button type="button" class="btn_up">往上</button>
        <button type="button" class="btn_down">往下</button>
      </div>
    </div>
    <div class="middle_block">
      <div class="star_block">
        <span class="star" data-star="1"><i class="fas fa-star"></i></span>
        <span class="star" data-star="2"><i class="fas fa-star"></i></span>
        <span class="star" data-star="3"><i class="fas fa-star"></i></span>
        <span class="star" data-star="4"><i class="fas fa-star"></i></span>
        <span class="star" data-star="5"><i class="fas fa-star"></i></span>
      </div>
      <p class="para">這是任務這是任務這是任務這是任務這是任務這是任務這是任務這是任務這是任務這是任務這是任務這是任務</p>
    </div>
    <div class="right_block">
      <div class="btn_flex">
        <button type="button" class="btn_update">更新</button>
        <button type="button" class="btn_delete">移除</button>
      </div>
    </div>
  </div>
</li>

完成以下項目：

  • 按下「新增」按鈕時，將以上的待辦事項 html，新增到 ul.task_list 裡，新增到裡面的最前面。

  • 如果沒有輸入待辦事項，按「新增」的話，不能有任何反應。

  • 新增成功的話，待辦事項欄位要清空。

  • 輸入的待辦事項，如果文字的最左邊、最右邊有空格，需移除。(語法：JS 內建的 trim() 函式)。

  • 按下「Enter」鍵，也要能新增待辦事項。

結果示意：https://youtu.be/Q_E4yKXPfn8

第三步：移除與清空

更新 index.html：

將以下這行放到 h1 標籤之前：

<button type="button" class="btn_empty">清空</button>

更新 index.css：

/* ===== 清空按鈕 ===== */
button.btn_empty{
  float: right;
  background: none;
  background-color: white;
  padding: 0;
  margin: 0;
  border: 1px solid lightgray;
  border-radius: 3px;
  height: 30px;
  width: 50px;
  outline: none;
  font-size: 1.6rem;
  cursor: pointer;
}

完成以下項目：

  • 按下「移除」按鈕，淡出 1 秒，然後移除該筆待辦事項。

  • 按下「清空」按鈕，淡出 1 秒，清除全部的待辦事項。

結果示意：https://youtu.be/XmwhmcSA-Ic

第四步：更新待辦事項

index.js，待辦項目更新以下結構，以老師自己寫的為例，有以下這行：

list_html +=       '<p class="para">' + task_text + '</p>';

在其下方，加上這行(留意有加上 -none 這個 class)：

list_html +=       '<input type="text" class="task_name_update -none" placeholder="更新待辦事項…" value="' + task_text + '">';

更新 index.css：

div.middle_block input.task_name_update{
  width: 100%;
  border: 1px solid lightgray;
  border-radius: 3px 0 0 3px;
  height: 40px;
  font-size: 2rem;
  padding: 5px 10px;
  outline: none;
}
div.middle_block input.task_name_update::placeholder{
  color: lightgray;
}

.-none{
  display: none;
}

完成以下項目：

  • 按下「更新」按鈕，出現一般文字框，然後可以更新。

  • 再按下「更新」按鈕，回到不可編輯的狀態，但待辦事項要是更新的。

  • 如果所更新的待辦事項，沒有輸入文字，跳出提醒視窗(alert)，顯示「請輸入待辦事項」。

  • 待辦事項的文字若最左邊、最右邊有空格的話，需移除。

結果示意：https://youtu.be/KaMN5o4JybM

第五步：排序

更新 index.css：

div.task_list_parent ul.task_list > li:first-child button.btn_up{
  background-color: lightgray !important;
  cursor: not-allowed !important;
  color: gray;
}
div.task_list_parent ul.task_list > li:last-child button.btn_down{
  background-color: lightgray !important;
  cursor: not-allowed !important;
  color: gray;
}

jQuery 其它提示：(以下這行可以判斷父層裡的 li，它是不是第一個子元素)

$(this).closest("li").is(':first-child')

jQuery 其它提示：(以下這行可以判斷父層裡的 li，它是不是最後一個子元素)

$(this).closest("li").is(':last-child')

完成以下項目：

  • 按下「往上」按鈕，與上面的待辦事項對調。(註：每個待辦事項是以 li 為單位。)

  • 按下「往下」按鈕，與下面的待辦事項對調。

  • 第一個的待辦事項，「往上」按鈕按了要沒反應；最後一個的待辦事項，「往下」按鈕按了要沒反應。

結果示意：https://youtu.be/-JXZ5VUC4DM

第六步：重要性的星號

更新 index.css：

/* ===== 重要性的星號 ===== */
div.star_block{
  display: inline-block;
}
div.star_block > span.star{
  cursor: pointer;
  display: inline-block;
  margin-right: 3px;
}
div.star_block > span.star.-on{
  color: yellow;
}

完成以下項目：

  • 點擊星號的時候，該星號加上 -on 這個 class，然後該筆待辦事項，星號數( data-star )小於等於點擊的星號數的話，也要加上 -on 這個 class；反之則移除。

結果示意：

繳交方式

最晚繳交日期：0/(日) 晚上 12 點之前。

先將 assignment 資料夾壓成壓縮檔，然後透過以下網址繳交：

前端班： https://frontend.tibame.com/

Java 班： https://java.tibame.com/

參考作法

Previous8 簡易 jQuery 套件Next10 參考資料

Last updated