前端練習小作品

Photo by Ian Schneider on Unsplash

1. CSS 漸層背景選擇器

Gradient Background

選擇兩個顏色後，可以生成 CSS 漸層代碼。

一個簡單的漸層代碼選擇器，用 querySelector 去取顏色的 value ，用 addEventListener 讓函式去渲染背景立即的漸層效果和下面的文字（RGB 和 HEX 兩種）。

Github：https://github.com/chelingliao/Background-Generator

2. 模仿 iPhone 計算機

iPhone Calculator by JS

用手機瀏覽就像內建的計算機。

模仿 iPhone 計算機外型和功能的計算機，在做的時候參考很多計算機的寫法，基本上大部分的功能是透過自己的 iPhone 慢慢測試出來的，是一個讓我沈迷在用 js 達成數學邏輯的作品。

3. JavaScript Frog Kit

Javascript Frog Kit

附上青蛙的名稱和學名，可以用叫聲認識台灣的青蛙～有些青蛙的聲音很像電音，很有趣。

用 keyCode 去做事件監聽，滑鼠或按鍵都可以發出聲音，按鍵的話持續按著可以連續。靈感是 JavaScript 30 Days Challenge 的 JavaScript Drum Kit，因為我很喜歡青蛙，就找了青蛙叫聲素材來剪輯，背景選了一個像青蛙會出沒的地方，並且把按鍵的 css 用 conic-gradient 做成荷葉的樣子。

Github：https://github.com/chelingliao/javascript-frog-kit

4. Tic Tac Toe

經典小遊戲。

上方會顯示下一步輪到 O 還是 X ，連成一條線時致勝的連線會變成紅色，否則會顯示平手。用 if , else if 去判斷是否有贏家，用 classList.add 搭配 css 的 content 增加點擊後出現於 div 中的顯示（O /X）以及改變致勝連線的顏色。

Github：https://github.com/chelingliao/Tic-Tac-Toe

5. To do list

To-Do-List

大概是前端作品集一定要出現的基本練習。

這個是用 React 做的，在 Enter Task 輸入後按 Add 或 Enter 鍵可以新增事項，新增後可以在事項上面直接鍵入編輯與修改，按右方垃圾桶可以刪除事項。

Github：https://github.com/chelingliao/to-do-list

6. React 機器人朋友通訊錄

Robofriends

這是跟著我的線上課程做的小作品。

也是用 React 做的，在 search bar 輸入可以直接過濾人名名單，做好後放上 gh pages 開啟時遇到瀏覽器產生 mixed content blocked，所以後來把 http fetch 改成包在專案內的清單。

Github：https://github.com/chelingliao/robofriends

7. 即時氣象資訊

Weather Setting

有夜間關燈模式，白天是白色的。

可以選擇地區並儲存的即時天氣資訊，這個小作品是跟著iT邦幫忙上 pjchender 大大的鐵人賽文做出來的，直接放在codesandbox 上面呈現。
最主要是增加 React 和 API 的練習，到中央氣象局抓取、過濾需要的資料，並且加上圖示、儲存地區等等。

原始碼：https://codesandbox.io/s/weatherapp-rhsh8?file=/src/WeatherSetting.js

8. 用 WordPress.com 搭的網站

葫蘆樂園：劇場發聲報

一個將近25年的在地劇場報數位化再出發，用了溫潤的色調和具有意義的創刊號做背景。

其實這是因為受前輩的委託，用 WordPress.com 架設了一個功能齊全的，雖然是固定的模板，但設定調整了很多地方，而且從無到有生出來和維護（還做了很多圖！），畢竟是自己的孩紙～很喜歡所以也把他放上來 XD。之後如果業餘有時間希望可以移到 WordPress.org 自己架設。

9. 葫蘆樂園小編催稿產生器

葫蘆樂園小編催稿產生器

是一個簡簡單單的產生器，這種重複性高又需要固定計算的事情最適合寫程式解決了，因為需要所以臨時想到做的哈哈（而且這樣催人家稿比較好意思，特別還用了愛心臉減低催稿殺傷力）。

比較花時間克服的地方是，因為截稿日期是看戲後 30 天，我讓網頁上只需要輸入該戲的日期，再到 js 裡面轉換日期自動算出截稿日並被 30 天扣除得到剩餘天數。給自己用的嘛功能取向，哪天想到再來 css 美化一下。

GitHub：https://github.com/chelingliao/deadline-text-generator

Photo by Carl Heyerdahl on Unsplash

以上是我的前端練習小作品，在做的時候帶給我很多的樂趣，尤其寫 code 的時候常常莫名達到一種心流的狀態，有時候一回神就是原本早上怎麼天黑了或是好幾個小時流走了這樣。

那種先分析功能、問題，再逐步試圖實踐的步驟和我的人格特質相當呼應，我非常喜歡用邏輯拆解和思考事情，所以在用 JavaScript 做出功能和達到目標的時候我覺得很過癮。我也喜歡在寫 css 的時候吹毛求疵，不斷嘗試怎麼樣的畫面、配置和配色看起來會更舒適。在做這些的時候讓我感受到源源的動力和正向的感受。期待將來每天都以此為業的生活。

雖然會一直覺得還可以更好還可以更多，但漸漸地我也學會在寫程式的時候做好自己的規劃和整理。

題外話，前幾天 518人力銀行跳出測驗，我被漂亮的網頁（絕對不是被 Line Point）吸引進去玩玩看職場測驗，結果如下，給了即將找工作的我一些信心。（所以我說那個網頁的美觀真的好重要啊）

第一行倒數第三個字，渴望的渴被瀏覽器吃掉了。

>///<

好，接下來要開始準備我的專案作品和履歷了，加油！