JS 30 challenge - 15 心得

Demo & Github

DEMO

ternary operator 三元運算子

      const item = {
        text,
        done: false,
      }

${plate.done ? 'checked' : ''}

這邊將 item 設為 object 後，賦予 done 的 initial value 是 false, 所以後面在座條件判斷時，用 done 的 boolean 值去判斷 css 的呈現。

.plates input + label:before {
	content: "⬜️";
	margin-right: 10px;
}

.plates input:checked + label:before {
	content: "🌮";
}

當 checked 屬性被賦予時，將會呈現出墨西哥捲 🌮 的圖案。

LocalStorage

在每次 items 中的內容有被變動時，都會使用 localStorage 去做儲存。

localStorage.setItem("items", JSON.stringify(items));

並且如果重新整理畫面的話，將可以使用

const items = JSON.parse(localStorage.getItem("items")) || [];

將儲存在 localStorage 裡面的 string 重新 parse 成 object 的格式。

小結

使用 vanilla JavaScript 去做 DOM 的操作的確沒有使用框架 React 來得順手，需要更多練習才能駕輕就熟。