10 JavaScript Projects - Coding Challenge
看到 10 JavaScript Projects in 10 Hours - Coding Challenge 影片, 對於很久沒重頭寫 Web 端純 JavaScript code 來說, 覺得是個不錯的練習, 故重造輪子.
Countdown Timer
- Design: https://uidesigndaily.com/posts/sketch-countdown-timer-day-876
- future date
- timer
- Code
note
- 影片中的新年日期常數寫死, 我改用當前日期去計算下一個新年日期.
- 影片中倒數的小時, 分, 秒都是用當前時間到新年日期的秒數計算得知.
我僅計算當下時間到隔天所剩餘時間.
理論上計算複雜度會比影片的計算少, 實際上仍需跑 benchmark 才能確定.
也許
Date.getHours()/Date.getMinutes()/Date.getSeconds()... 等內建函數效能比想像中慢, 自己運算可能更快也說不定.
Quiz App
- Design: https://uidesigndaily.com/posts/sketch-questionnaire-choice-submit-day-924
- questions from obj
- select answer
- at the end show score
- Code
note
- 題庫來源透過 Open Trivia DB: Free to use, user-contributed trivia question database. API 取得.
- 在抓取 Radio input 時, 透過
document.getElementsByName()取得使用者選擇的答案. DOM 結構上和影片中減少一個ˊ class 屬性. 但不確定document.getElementsByName()和document.querySelectAll()實際效能是 否有差異.
Recipe App
- Design: https://uidesigndaily.com/posts/sketch-recipe-app-food-mobile-day-615
- recipe info on click
- fav recipe (w/ localStorage)
- Code
note
- 居然有 public-apis, 對於開發取得練習資源真是太方便了.
- 把食譜改成酒譜 App, 比較符合我的個性. :p
Summary
- 影片中先定下題目, 再去 UI Design Daily 找適當的版面來進行, 從無到有完整刻出一個個 WebApp, 對於有些基本基礎, 但不知如何找題目進行練習這個找題目的過程是很有幫助的.
- 不透過框架進行前端開發真的太久, 一些 CSS 語法也是看影片才知道可以這樣使用. UI Framework 是兩面刀刃, 加速開發之餘卻也減低了對底層基礎的熟悉.
- 影片中對於版面 CSS 和 UI 設計的一致性真的挺要求的, 是個認真的前端工程師. 自己對於版面就容易得過且過.
- 看了影片後的實作, 排版上受影片影響很大, 而程式架構還比較維持自己想法進行.
- VSCode + Emmt 很方便, 要更加熟悉一下一些使用 tips.
See Also
影片中用到許多前端設計的資源網站. 整理如下:
- UI Design Daily | Weekly FREE UI resources straight to your inbox
- Beautiful Free Images & Pictures | Unsplash
- Gradient Background Colors - Eggradients.com
- CSS Gradient — Generator, Maker, and Background
- Palettes | Flat UI Colors 🎨 280 handpicked colors ready for COPY & PASTE
- public-apis/public-apis: A collective list of free APIs
- cdnjs - The #1 free and open source CDN built to make life easier for developers
- Font Awesome
- Heroicons
其他類似的前端 Coding Challenge: