

JavaScript30 傳送門：https://javascript30.com/



寫到挑戰六覺得心累ㄌ，向來不是一個可以長久堅持好習慣的人，30 個挑戰聽起來很少，但如果要日復一日堅持下去其實好長r 😮‍💨



挑戰六透過 input 來 filter 從 api 拿回來的資料結

創作

學習

文化生活

以行動支持創作者！付費即可解鎖

軟體開發

hunwooooof

【JS30-6】Ajax Type Ahead



JavaScript30 傳送門：https://javascript30.com/



挑戰５透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果，看別人的成果：yhabib.github.io





本次學習心得：

製造過度效果延遲的方法：transition-delay V.S

職場

【JS30-5】Flex Panels Image Gallery

JavaScript30 傳送門：https://javascript30.com/





Console.table



第四個練習是透過一些 array method 來操作 array 資料。

整個練習最讓我 WOW 的，是 console.table，竟然有這麼酷的 console 

音樂藝文

【JS30-4】Array Cardio Day 1



JavaScript30 傳送門：https://javascript30.com/



透過 JS 控制 CSS 變數



今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。

以前在 CSS 裡面看到 var(--xxxx) 這種東西都很

【JS30-3】Playing with CSS Variables and JS



JavaScript30 傳送門：https://javascript30.com/
今天才發現可以不用看著影片一步一步寫，可以自己先寫寫看😛



第二個挑戰是用 JS + CSS 寫一個時鐘，不過其實檔案裡面 HTML 跟 CSS 都已經寫好了，三個指針也都放好了，Go Live 起來就長

【JS30-2】CSS + JS Clock

想要找個地方記錄自己寫 JavaScript 30 挑戰時額外的小筆記✍🏻
JavaScript30 傳送門：https://javascript30.com/
第一個挑戰是寫一個 keydown 事件並讓頁面隨著不同的按鍵發出不同的聲音。