iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 1 留言 184 瀏覽

鐵人賽 JavaScript

React30——用 React 探索 JavaScript30 的魅力系列第 30 篇

技術 [Day30]_Whack-A-Mole

Day30 要來寫個打地鼠的小遊戲資料 const MOLE_IMAGE_URL = "https://raw.githubuserconten...

ayao ‧ 2024-10-19

0 Like 0 留言 110 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 29 篇

技術 [Day29]_Countdown-Timer

Day29 要來做個倒數計時器 Custom Hook function useTimer(initialTime: number): TimerHook {...

ayao ‧ 2024-10-13

0 Like 0 留言 102 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 28 篇

技術 [Day28]_Video-Speed-Controller

Day28 要來做個影片速度的控制器資料 const VIDEO_URL = "https://github.com/wesbos/JavaSc...

ayao ‧ 2024-10-13

0 Like 0 留言 165 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 27 篇

技術 [Day27]_Click-and-Drag

Day27 要來做個可以左右拖曳的目錄資料 const items: number[] = Array.from({ length: 25 }, (_, i)...

ayao ‧ 2024-10-12

0 Like 0 留言 90 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 26 篇

技術 [Day26]_Stripe-Follow-Along-Nav

Day26 要來做個有下拉選單的導覽列資料 const navItems: NavItem[] = [ { name: "About"...

ayao ‧ 2024-10-12

0 Like 0 留言 68 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 25 篇

技術 [Day25]_Event-Capture-Propagation-Bubbling-and-Once

Day25 主要聚焦於 JavaScript 中的各種事件處理，就讓我們寫個按鈕與互動畫面來觀察ㄅ資料 const colorMap: ColorMapTyp...

ayao ‧ 2024-10-11

0 Like 0 留言 125 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 24 篇

技術 [Day24]_Sticky-Nav

Day24 要做的是將導覽列黏到畫面最上方的功能定位屬性 sticky <nav className="sticky top-0 bg-w...

ayao ‧ 2024-10-10

0 Like 0 留言 124 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 23 篇

技術 [Day23]_Speech-Synthesis

Day23 要做的是將輸入的文字轉為聲音資料 const MESSAGE = "Hello!"; const [text, setT...

ayao ‧ 2024-10-07

0 Like 0 留言 62 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 22 篇

技術 [Day22]_Follow-Along-Link-Highlighter

Day22 要來做的是可以根據滑鼠滑過去就出現背景色的螢光筆資料 const [highlightStyle, setHighlightStyle] =...

ayao ‧ 2024-10-06

0 Like 0 留言 119 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 21 篇

技術 [Day21]_Geolocation

Day21 要來做個羅盤資料 const [geolocation, setGeolocation] = useState<Geolocation&...

ayao ‧ 2024-10-05

0 Like 0 留言 136 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 20 篇

技術 [Day20]_Speech-Detection

Day20 要來控制麥克風資料設定 const SpeechRecognition = (window as any).SpeechRecognition...

ayao ‧ 2024-10-05

0 Like 0 留言 158 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 19 篇

技術 [Day19]_Webcam-Fun

Day19 是要操作照相機來拍照，甚至可以加上濾鏡資料 const videoRef = useRef<HTMLVideoElement>(n...

ayao ‧ 2024-10-04

0 Like 0 留言 139 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 18 篇

技術 [Day18]_Adding-Up-Times-with-Reduce

Day18 主要是要練習用 Array 的 reduce 方法來做加總的計算資料 const videosData = [ { id: 1, title:...

ayao ‧ 2024-10-04

0 Like 0 留言 178 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 17 篇

技術 [Day17]_Sort-Without-Articles

Day17 要做的是幫列表排序，但要忽略開頭的定冠詞資料 const bands: string[] = [ "The Plot in You&...

ayao ‧ 2024-10-01

0 Like 0 留言 101 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 16 篇

技術 [Day16]_Mouse-Move-Shadow

Day16 要來玩的是讓文字產生背景的陰影，並會隨著滑鼠的移動更改方向資料 const [offset, setOffset] = useState&lt...

ayao ‧ 2024-09-30

0 Like 0 留言 84 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 15 篇

技術 [Day15]_LocalStorage

Day15 要撰寫的是待辦清單，並把資料存進瀏覽器的 LocalStorage 資料 const [todos, setTodos] = useState&...

ayao ‧ 2024-09-29

0 Like 0 留言 79 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 14 篇

技術 [Day14]_JavaScript-References-VS-Copying

Day14 要來學習怎麼複製資料 Q1 基本型別是 call by value ，所以不會更改到原始資料 let age = 100;...

ayao ‧ 2024-09-29

0 Like 0 留言 67 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 13 篇

技術 [Day13]_Slide-in-on-Scroll

Day13 要做的是類似視差滾動的圖片效果資料 const images = [ { src: "https://unsplash.it/400...

ayao ‧ 2024-09-28

0 Like 0 留言 62 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 12 篇

技術 [Day12]_Key-Sequence-Detection

Day12 是要來做偵測鍵盤輸入的彩蛋遊戲資料 const SECRET_CODE: string = "wesbos"; cons...

ayao ‧ 2024-09-28

0 Like 0 留言 73 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 11 篇

技術 [Day11]_Custom-Video-Player

Day11 要做的是客製化的影片播放器資料設定 const VIDEO_URL = "https://github.com/wesbos/Jav...

ayao ‧ 2024-09-28

0 Like 0 留言 110 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 10 篇

技術 [Day10]_Hold-Shift-and-Check-Checkboxes

Day10 是要實作可以用 Shift 來多選框框的題目建立資料 const checkboxData: string[] = [ "This...

ayao ‧ 2024-09-25

0 Like 0 留言 80 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 9 篇

技術 [Day09]_Dev-Tools-Domination

Day09 主要在介紹各種 console 的用法基本用法 console.log("Hello") 穿插字串 console.log(...

ayao ‧ 2024-09-24

0 Like 0 留言 66 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 8 篇

技術 [Day08]_Canvas

Day08 是要利用 HTML5 Canvas 來做出畫布資料狀態 canvasRef, ctxRef 用來取得顯示的內容 isDrawing 判斷是...

ayao ‧ 2024-09-22

0 Like 0 留言 126 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 7 篇

技術 [Day07]_Array-Cardio-Day2

今天跑去聽演唱會，完全忘記要來發文，太慘惹，我好蠢ＱＱ要能時時刻刻記得自己有在進行鐵人賽的參賽者們真的很不簡單明年真的要確實提早準備，還要記得每天訂鬧鐘提醒自...

ayao ‧ 2024-09-22

0 Like 0 留言 75 瀏覽

鐵人賽 JavaScript DAY 6

React30——用 React 探索 JavaScript30 的魅力系列第 6 篇

技術 [Day06]_Type-Ahead

Day06 要做的是動態搜尋功能，是個可以偵測使用者輸入字串的篩選器建立資料資料可以由 fetch 遠端取得 searchQuery 用來儲存搜尋字...

ayao ‧ 2024-09-20

0 Like 0 留言 79 瀏覽

鐵人賽 JavaScript DAY 5

React30——用 React 探索 JavaScript30 的魅力系列第 5 篇

技術 [Day05]_Flex-Panel-Gallery

Day05 是利用 CSS 的 flex 特性來完成伸縮畫廊，做出有互動效果的圖片展示面板建立資料之後會用這些資料來展示圖片需要的資訊 const i...

ayao ‧ 2024-09-19

0 Like 0 留言 62 瀏覽

鐵人賽 JavaScript DAY 4

React30——用 React 探索 JavaScript30 的魅力系列第 4 篇

技術 [Day04]_Array-Cardio-Day1

沒想到 Day04 是單純的 JS 題目，主要聚焦在 JavaScript 陣列方法的使用，但我最後還是有寫在 CodeSandBox 裡面惹，就開始ㄅ Q1...

ayao ‧ 2024-09-18

0 Like 0 留言 182 瀏覽

鐵人賽 JavaScript DAY 3

React30——用 React 探索 JavaScript30 的魅力系列第 3 篇

技術 [Day03]_CSS-Variables

Day03 是用 CSS 變數來更改圖片的樣式，可以做出簡單的圖片編輯器，但我剛開始的寫法似乎沒有符合原作的精神（？後來問了 AI 後，發現還是可以從 CSS...

ayao ‧ 2024-09-17

0 Like 0 留言 68 瀏覽

鐵人賽 JavaScript DAY 2

React30——用 React 探索 JavaScript30 的魅力系列第 2 篇

技術 [Day02]_Clock

Day02 要做的是虛擬時鐘，就讓我們直接開始ㄅ時間資料先用 useState 建立目前的時間 const [time, setTime] = useS...

ayao ‧ 2024-09-16

0 Like 1 留言 142 瀏覽

鐵人賽 JavaScript DAY 1

React30——用 React 探索 JavaScript30 的魅力系列第 1 篇

技術 [Day01]_Drum-Kit

Day01 是實作用鍵盤模擬打鼓的題目，當使用者按下對應的按鍵，就會播放對應的鼓聲，以下就讓我們來製作 React 的版本ㄅ（之後每天的示範樣式都會使用 Ta...

ayao ‧ 2024-09-15

技術 [Day30]_Whack-A-Mole

技術 [Day29]_Countdown-Timer

技術 [Day28]_Video-Speed-Controller

技術 [Day27]_Click-and-Drag

技術 [Day26]_Stripe-Follow-Along-Nav

技術 [Day25]_Event-Capture-Propagation-Bubbling-and-Once

技術 [Day24]_Sticky-Nav

技術 [Day23]_Speech-Synthesis

技術 [Day22]_Follow-Along-Link-Highlighter

技術 [Day21]_Geolocation

技術 [Day20]_Speech-Detection

技術 [Day19]_Webcam-Fun

技術 [Day18]_Adding-Up-Times-with-Reduce

技術 [Day17]_Sort-Without-Articles

技術 [Day16]_Mouse-Move-Shadow

技術 [Day15]_LocalStorage

技術 [Day14]_JavaScript-References-VS-Copying

技術 [Day13]_Slide-in-on-Scroll

技術 [Day12]_Key-Sequence-Detection

技術 [Day11]_Custom-Video-Player

技術 [Day10]_Hold-Shift-and-Check-Checkboxes

技術 [Day09]_Dev-Tools-Domination

技術 [Day08]_Canvas

技術 [Day07]_Array-Cardio-Day2

技術 [Day06]_Type-Ahead

技術 [Day05]_Flex-Panel-Gallery

技術 [Day04]_Array-Cardio-Day1

技術 [Day03]_CSS-Variables

技術 [Day02]_Clock

技術 [Day01]_Drum-Kit

標記使用者