iT邦幫忙

2024 iThome 鐵人賽

DAY 5
0
JavaScript

每天都進步一點!從零開始的JavaScript 與基礎網路知識學習系列 第 5

Day5 練習製作簡易待辦事項清單(下)

  • 分享至 

  • xImage
  •  

大家好,今天要來跟著練習製作簡易待辦事項清單,並稍微加上多一點功能。
HTML

<!DOCTYPE html>
<html>
<head> 
    <title> 待辦事項 </title>
</head>
<body>
    <input class="word" placeholder="新增項目"> 
    <button class="botan">+</button>
    <ul class="list">
    </ul>
    <script src="script.js"></script>
</body>
</html>

JS

.innerHTML= 能一次插入一大段html
win+。 表情符號

const words=document.querySelector(".word")
const lists=document.querySelector(".list")
const botan=document.querySelector(".botan")
function newtask(){
    if (words.value==="") return;
    const task=document.createElement("li");
    task.innerHTML=`
        <input type="checkbox" class="tick">
        <label>${words.value}</label>
        <button class="trashcan">🗑️</button>
    `
    const trashcan=task.querySelector(".trashcan");
    trashcan.addEventListener("click",function(){
        task.remove();
    });

    const tick=task.querySelector(".tick");
    tick.addEventListener("change",function(){
        if(tick.checked){ //若打勾方塊被勾選
        task.style.textDecoration="line-through"; //task文字上方畫刪除線
        task.style.color="#999"; //文字顏色改淺灰
        lists.append(task); //移到清單底部
        }
        else{
        task.style.textDecoration="none"; //task文字還原
        task.style.color=""; //顏色還原
        lists.append(task); //移到清單上方
        }
    });
    lists.append(task);
    words.value="";
}

botan.addEventListener("click",newtask);
words.addEventListener("keyup",function(keyname){
if(keyname.key==="Enter") newtask();
});

成果
成果圖

基本的大略認識大概就先到這邊了,在這個練習中也學到很多語法以及邏輯的架構。
明天來看彭彭老師的函式及物件基礎。


上一篇
Day4 練習製作簡易待辦事項清單(上)
下一篇
Day 6 HTML DOM核心觀念
系列文
每天都進步一點!從零開始的JavaScript 與基礎網路知識學習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言