17King - 前端修練精神時光屋

挑戰紀錄列表

---

Week1：

挑戰主題：TodoList

作品連結：https://codepen.io/tinatyc/full/RJRQpQ

應用說明：代辦事項與清單

練習重點：

• React JS

  • 複習利用creat-react-app建立compenent並Layout頁面。

• Material Design CSS Framework

  • 引用Material CSS - https://materializecss.com/，使網站風格符合Google推出的Material Design Guide，提升使用者的體驗(User Experience)。

• ES6 (ECMAScript 6)

  • 讓自己慢慢習慣用ES6來寫JavaScript >''<

螢幕截圖

---

Week2：

挑戰主題：Filter

作品連結：https://tzeng17.com/TheF2E/Filter/

應用說明：串連高雄市觀光景點的API，使網頁可以做篩選景點的動作。

練習重點：

• BootStrap4 (CSS Framework)

  • 之前學的是BootStrap3，BootStrap4上了當然來學習看看。

• Flex

  • 對我來說是新屬性XD，但是一用下去不得了的好用啊！

PS：本來想學習用jQ的.filter()，但後來因為一點程式邏輯轉不過來，所以耽擱到開發時間來不及學TAT

螢幕截圖

---

Week3：

挑戰主題：Admin Order

作品連結：https://tzeng17.com/TheF2E/AdminOrder

應用說明：主要實作dashboard的應用，我做的是虛擬幣的dashboard。 API找了coinmarketcap的來串，Endpoint API五分鐘更新一次，但是我怕DEMO等太久，在原訂可以選日期的地方改成更新秒數，第二頁Orders是用ajax做的網址不變，表格裡面的數字和標籤都是亂數產生的。

練習重點：

• HighCharts.js

  • 本來想選D3.js但看了一下文件覺得學不完XD，改用HighCharts這套library，選用的原因是另外一套Chart.js是產生Canvas來顯示圖表，highcharts是用SVG來產生圖表，個人比較偏好SVG自由性比較高XD

• Bootstrap4

  • 快速切版、排版訓練。

螢幕截圖

---

Week4：

挑戰主題：Product Gallery

作品連結：https://tzeng17.com/TheF2E/ProductGallery/

應用說明：本週練習電商必備的產品展示頁面，雖然出題者主要要讓我們練習CSS的Grid屬性所設計的版，但是我想挑戰用之前在AMOS老師那邊學習到的Float排版來切版練習，加一些之前學的CSS Animation讓畫面更豐富。

練習重點：

• CSS排版：Float

  • 畫面定位練習position:relative;和position:absolute;

• CSS Animation

  • 做出縮放視窗時，手刻的動畫也可隨著視窗縮放。

螢幕截圖

---