Todo List

## 前情提要如果說蟑螂怕拖鞋，老鼠愛大米，任何事物都有相生相剋的道理，那麼前端最害怕什麼呢？恐怕就是todo-list。這應該是前端的四大惡夢之一，並不是因為太難了，而是因為太簡單而且太無聊了，不只無聊，還是每次教學都必須寫的一個磨難，簡直是瞬間殺死靈魂中，對前端的愛。今天要來用不同風格寫出todo-list，把代辦事項寫出新滋味。 body裡面一行都沒有也能搞？就是可以搞，讓我們馬上來欣賞這段有特別滋味的玩法！ε(*´･∀･｀)зﾞ ## 程式碼 ``` Todo List ``` [可以貼到try it的地方執行看看效果](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_submit) ## 觀念筆記所謂MVC架構就是模型、視圖、控制，背後其實有一個元素貫串任何程式，那就是：「邏輯」每當你要下手寫一個程式卻不知道怎麼開始動手，那就是邏輯沒有通順。網頁不外乎就是畫面，以及資料，還有使用者的操作。對於todo-list來說就是一個簡單的input畫面，使用者輸入的資料，點下按鈕送出的操作。這段程式特地不寫任何一行body裡面的東西，玩弄了一般人對於程式區分的概念。用模板符的特性讓所有一切交給變數與函式處理，最後三個function： AddHtml、CheckNull、AddItem完美演繹了代辦清單這個網頁所需要構成的底層邏輯。必須先加入畫面，然後確認使用者操作的條件，最後新增資料。這樣子的流程對於新手或許不習慣，但是以邏輯面來看比一般人的寫法清晰許多。這也是未來框架導入後，對資料流更敏感的培養練習。 ## 心得無聊的todo-list竟然可以搞成這樣！？真的是太有趣了(๑╹◡╹๑)！原來前端的惡夢也可以變成寫不同風格的天堂，沒錯，寫程式就是這麼千變萬化！重點是背後的邏輯抓到了，那麼想要怎麼寫，真的就是藝術的發揮。請繼續關注，跟著我們這個系列繼續動手玩創意！！未來還有更多更新鮮的花招呢(｡◕∀◕｡)