Day Bonus JavaScript 實作 To-Do List

更新於 2024/11/04發佈於 2024/11/04閱讀時間約 13 分鐘

這個單元裡我們會繼續用Codepen來製作簡單的To-Do List app。裡面會使用到基本的HTML和CSS來製作UI，別擔心會非常簡單。示範的Codpen同樣會附在今天的內容裡面，如果想看成果的話可以直接點前往。

基礎架構

為了完成這個web app，我們必須先理解HTML、CSS之間的關係。HTML就像房子的結構，CSS則是各種裝潢。毫無疑問，房子一定會有結構，某些要求也只有改結構才能達成，但裝潢這件事可能比大家想的更強大，建築物裝潢後有機會呈現完全不同的通透感，CSS做的事情也絕對不只是改顏色那麼簡單。

HTML和CSS關係先談到這邊，由於我們的重點並不是他們，直接叫GPT生成就可以了。我prompt ChatGPT「I want a very simple to-do list web app HTML」。由於Codepen的介面把HTML、CSS分開了，我們也必須把得到的結果再分成兩者。JavaScript它可能也會一起生成，但我們先忽略，自己寫。

HTML

<div id='app'>
	<h2>To-Do List</h2>
	<input type="text" placeholder="Add a new todo">
	<button id="add-btn">Add</button>
	<ul id="todo-list"></ul>
</div>

HTML是由一層一層的tag包裹住的文件檔，<...>是開頭</…>是結尾。圖中就是一個<div>包著<h2>、<input>、<button>等等其他的tag。其中我加了一些特別的屬性方便辨識，例如最外層的<div>有id=”app”可以再等一下JS裡面幫助識別、<ul>有id=”todo-list”等等。將這一串複製進Codepen上的HTML欄位後可以看見如下的畫面。

CSS

現在我們幫這份文檔加一點裝潢，我請GPT製作後只稍微修改了一些部分。

body {
	font-family: Arial, sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #f0f0f0;
	margin: 0;
}
#app {
	background: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	width: 300px;
	text-align: center;
}
h2 {
	margin: 0;
}
input[type="text"] {
	padding: 8px;
	width: 80%;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
button {
	padding: 8px 16px;
	border: none;
	background-color: #28a745;
	color: white;
	border-radius: 4px;
	cursor: pointer;
	transition: 0.2s;
}
button#add-btn:hover {
	background-color: #218838;
}
ul {
	list-style: none;
	padding: 0;
}
li {
	padding: 8px;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
li.done {
	text-decoration: line-through;
	color: gray;
}
.delete-btn {
	background: none;
	border: none;
	color: #f24;
	font-size: 16px;
	cursor: pointer;
	transition: 0.2s;
}
.delete-btn:hover {
	background: #f24;
	color: white;
}

這些語法都是CSS Selector（選擇器），我們可以用它來選擇對應的HTML tag，例如#app會選到id=”app”的這個tag，接著用CSS的指令編輯包括顏色、排版等等。最後大概會像這樣：

請記得，現在先不要太糾結於樣式調整之類的事，我們今天的目的是學會如何操作JavaScript。

JavaScript

取得按鈕HTML

我們先用內建的method來取得按鈕的HTML。

用內建的document內建的querySelector()method可以找到特定的HTML元素，用’#add-btn’作為參數可以找到id是’add-btn’那項。

接著我們可以為這個HTML加上event listener，就像之前在document上加上一樣。

第一個參數一樣用’click'，表示我們要監聽按鈕被點擊這件事，在按鈕被點擊後，執行add()這個function。

實作`add()`

接著定義add()function。

如此一來，id是’add-btn’的按鈕被點擊時，就會有訊息出現在console。

接下來我們希望點擊按鈕的時候，取得<input>裡的資料，然後創建新的格子來放這筆資料。接著改寫add()。

一樣使用querySelector()找到<input>這個元素，並且存取裡面的value。

把text印出來。

接下來的步驟會比較陌生，我們需要先用JS創立HTML tag，再把text放入HTML裡。

使用createElement()來創立HTML<li>，接著設定innerHTML為text和刪除按鈕。在刪除按鈕上加上’delete-btn’這個class讓之前寫的CSS可以運作。

這裡用到的HTML是用template literal語法，可以從這裡複製：

`
	<span>${text}</span>
	<button class="delete-btn" >x</button>
`

雖然我們創建好了新的tag而且也指定好值了，但我們還沒把它放進我們之前的HTML中。我想把它放進<ul>內部，現在就來做這件事：

這樣新增to-do的任務就完成啦！

實作`deleteTodo()`

因為delete在JS裡面是一個預設的關鍵字，我們就用deteleTodo這個名字。

我們先簡單的console.log()一些訊息。

把這個function加在刪除按鈕上面。

寫在HTML裡面的onclick可以用來連結JS程式碼。

好的這裡是很容易造成混淆的地方，我們現在在變更的是HTML的屬性，它讓我們可以在HTML上綁定元素被’click’時要執行什麼動作。後面要接的是function以及()，不只是function名字，跟JS不一樣。除了這種方式之外，我們還有很多方法可以綁定deleteTodo()和HTML，雖然HTML上面寫的語法有點不一樣，但這是最簡單的其中之一，我們先以簡單的為主。

完成後按下紅色按鈕就會出現”delete”。

然後為了刪除特定的項目，我們會用到this關鍵字。

現在是由刪除按鈕HTML來呼叫deleteTodo()，所以this指的就是那個HTML元素。

我們把它當作參數寫進deleteTodo()。

我們就能成功取得我們點擊的那顆按鈕的HTML，用它找到parentNode（包在它外面的<li>），然後用預設的methodremove()來刪除。

這樣就大功告成啦！

清理和優化

最後我們再稍微做一些優化，讓打完字送出之後input回歸空白。

我們稍微改寫input那塊，把HTML的<input>存成一個變數inputElement。在新增完to-do之後，清空<input>裡面的值，並且自動focus回去。

這樣一來，每次新增完<input>格子內就會回復原狀，並且會自動再次選擇它，讓我們繼續打字了。

結語

還有很多種優化這個小app的方式，例如：可以用HTML<form>來製作這個表單，如此一來就可以用預設的’submit’事件，讓使用者更直覺地按下enter鍵時自動提交表單。

總而言之，目前我們的重點還是在掌握JavaScript本身基礎語法以及運作規則。雖然經過10天的學習，我們目前還沒辦法做出非常精緻和實用的web app，但我們能夠理解基本的JS程式碼甚至是撰寫。當前的學習重點還是在於那些組成這個語言的骨架，包含.、[]、{}符號，還有let、var、funciton這些關鍵字的意義之類。至於一些預設的object和它們的method該如何使用，未來逐步接觸慢慢了解就可以了（甚至是有需要再問GPT都不會太晚）。

你會發現，我們目前的網頁只有一頁，而且資料重新整理之後就會消失。所以接下來的學習途徑可以朝著這些方向前進，你會開始製作包含多頁的網站、串接資料庫等等。進一步的發展過程中，你也會了解到為什麼很多人會使用JS framework（框架）來提升效率，例如 React、Vue、Next.js、Nuxt 等熱門選項。但請注意，了解這些框架存在的原因可能比學習它更為重要。另外，在討論這麼多JS之後，你應該會發現這裡對變數的type（類型）並沒有那麼重視，而這是一個非常大的問題 — string‘3’和number3總是會有差別的！因此有人將type的概念融合JS，創造出了TypeScript，這也是很主流的學習目標（基本上現代化的專案都是用TS寫的）。

「10日 Javascript」的內容大多改寫自Brad Schiff的線上課程「Learn JavaScript: Full-Stack from Scratch」。這門課程涵蓋的不僅是這10天的基礎，還有資料庫和前後端分工等更深入的內容。作為一門線上課，老師將內容切分的很適當，每支影片都在合理的時間內。而且口條、內容品質都非常好，即使不是非常熟悉英語，都能夠跟得上教學，是非常推薦的學習資源。

學習程式語言是一段不斷成長的旅程，技術不斷迭代，既有必須學的新知識，也有可以探索的更多機會。正因如此，學習過程中充滿成就感和驚喜。還記得我們在第一天看到的作品嗎？正是那些作品激發了我持續學習的動力。隨著深入了解，你會發現許多開源資源和社群支持，大家共同分享、學習，讓我們站在彼此的肩膀上成長。希望這段JavaScript的基礎學習之旅能為你開啟更多探索之門，繼續保持熱情，並享受每一個小小的進步。

完。