【JS30-6】Ajax Type Ahead
閱讀時間約 1 分鐘
JavaScript30 傳送門：https://javascript30.com/
寫到挑戰六覺得心累ㄌ，向來不是一個可以長久堅持好習慣的人，30 個挑戰聽起來很少，但如果要日復一日堅持下去其實好長r 😮💨
挑戰六透過 input 來 filter 從 api 拿回來的資料結果，然後再後製 & 渲染到畫面。
看別人的成果：yhabib.github.io
本次練習の心得：
這次又是直接埋頭苦幹，沒有先釐清需求目標有哪些，函式寫起來亂七八糟，methods 也是亂用。
例如在匹配字串時，比起用 String.includes() 然後再轉換一堆沒用的大小寫，用正規表達式才是更好的作法！如果能冷靜下來考慮更多情境，就能減少一開始就走歪路的機率。
算了，我就是這樣心浮氣躁^_^
留言0
查看全部
你可能也想看
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
文、圖／傑思·愛德威提供
農曆新年將至，家家戶戶開始辦年貨，傑思·愛德威直接把年貨大街搬到公司，提前感受滿滿年味。「JS年貨大街」一條龍包辦過年會遇到的所有「吃」「喝」「玩」「樂」，像是除夕圍爐必吃的佛跳牆、拜年伴手禮、美妝保養品、果乾零嘴、醫美療程、旅遊行程等，通通都能在JS年貨大街一網
JavaScript callback, promise, async-await
本次的挑戰是「CSS Variables」，需要達成的目標是：「使用者操作拉桿或是選色器時，底下圖片的樣式會有對應的變化。」
本次的挑戰是「CSS + JS Clock」，需要達成的目標是：「時鐘的指針會轉動，指針都必須依據現實時鐘的規則前進。」這次需要搭配 CSS 動畫，製作時鐘的指針旋轉效果。
這系列文章會記錄 JS 30 當次挑戰時使用到的語法和相關知識。JS 30 官方有提供所有製作網頁的資源，不需要任何事前準備，就能無痛開始撰寫 JS，寫完之後還有 JS 30 作者提供的解答，不知道怎麼下手時可以參考、寫完之後也能了解更多解法，改善自己的寫法。
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
文、圖／傑思·愛德威提供
農曆新年將至，家家戶戶開始辦年貨，傑思·愛德威直接把年貨大街搬到公司，提前感受滿滿年味。「JS年貨大街」一條龍包辦過年會遇到的所有「吃」「喝」「玩」「樂」，像是除夕圍爐必吃的佛跳牆、拜年伴手禮、美妝保養品、果乾零嘴、醫美療程、旅遊行程等，通通都能在JS年貨大街一網
JavaScript callback, promise, async-await
本次的挑戰是「CSS Variables」，需要達成的目標是：「使用者操作拉桿或是選色器時，底下圖片的樣式會有對應的變化。」
本次的挑戰是「CSS + JS Clock」，需要達成的目標是：「時鐘的指針會轉動，指針都必須依據現實時鐘的規則前進。」這次需要搭配 CSS 動畫，製作時鐘的指針旋轉效果。
這系列文章會記錄 JS 30 當次挑戰時使用到的語法和相關知識。JS 30 官方有提供所有製作網頁的資源，不需要任何事前準備，就能無痛開始撰寫 JS，寫完之後還有 JS 30 作者提供的解答，不知道怎麼下手時可以參考、寫完之後也能了解更多解法，改善自己的寫法。