站長阿川 · 01月10日

JavaScript 系列三：練習2 ── toast 吐司元件

課程目標

認識並且能實做 toast 元件

課程內容

toast 中文叫「吐司」元件，就跟烤土司機，烤好吐司會跳出來一樣

用這元件來讓一些操作回饋訊息跳出，可以讓使用者體驗（User Experience，簡稱 UX）更好

很多網站因為沒有做好適當的 toast 元件，使用者在操作時常常覺得「表單到底有沒有送出？」「網站當機了是不是？」

通常要將 toast 做成幾種不同樣式，根據不同使用情境來使用

由於 toast 通常會直接蓋在網站的上方正中央（或者右上角、左下角，不一定）

會蓋到網頁畫面，所以通常會做成「顯示幾秒之後自動關閉」

請上網搜尋 toast ui toast component，四處觀摩一下業界常見的設計

要在倒數幾秒之後執行任務，你需要 setTimeout 這個函式。請自行上網搜尋一下，了解這個函式的用法

課後作業

請使用 https://jsfiddle.net

用以下 html 為基礎（你可以稍微修改），接著寫出 css 與 js 的部份

<button onclick="toastSuccess()">成功訂購商品</button>
<hr>
<button onclick="toastError()">訂購商品失敗</button>

<div class="toast toast-success">
  訂購成功！可以查看 Email 確認訂單細節！
</div>
<div class="toast toast-error">
  抱歉，訂購失敗！請稍後重新嘗試
</div>

這邊共有兩個按鈕，模擬兩種使用情境

兩個吐司元件，一開始預設是隱藏的，不會在畫面上看到

請寫出 toastSuccess 函式的內容，在點擊按鈕後，將「成功吐司」顯示在畫面上 5 秒鐘，之後自動消失

請寫出 toastError 函式的內容，在點擊按鈕後，將「錯誤吐司」顯示在畫面上 5 秒鐘，之後自動消失

成功吐司請做成綠色

錯誤吐司請做成紅色

這個顏色變化，可以是邊框、背景顏色、字體顏色、影子顏色，都可以，你自由決定

請稍微加一些 css 屬性，弄得漂亮一點

<hr> 只是方便隔開元素，方便別人查看元件用的，醜醜的留在畫面上沒關係

做出以上功能，你就完成這次的課程目標了！

歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！

可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！

發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！

貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！

未來面試時，分享給面試官看，會讓人知道你的積極程度！

站長阿川

每週二 YT 直播問答，DC 可 Call-in，一起討論技術、職涯發展。
YT 👇👇👇
https://www.youtube.com/@codelove_tw
DC 👇👇👇
https://discord.gg/fvCF2whZ9D

提供 Shopify 接案服務：阿川の電商水電行 - 專修 Shopify 網店 👇👇👇
https://job.turn.tw/shopify-services

管理台灣 Shopify 開發者 LINE 群組（非官方）👇👇👇
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA