JavaScript 小作品展示

前端練習作品集

整理我目前學習 HTML、CSS、JavaScript 過程中完成的小作品, 包含 TodoList、API 資料渲染、搜尋、篩選與排序練習。

關於我

我目前正在學習前端開發,主要練習 HTML、CSS、JavaScript, 並透過小作品理解 DOM 操作、事件監聽、陣列資料處理、 API 串接與畫面渲染流程。作品集目前會以學習作品為主, 持續補強基礎能力。

能力與工具

HTML / CSS

練習網頁結構、排版、RWD、卡片版型與基本視覺調整。

JavaScript

練習事件監聽、DOM 操作、陣列方法、資料篩選、排序與畫面更新。

API 串接

使用 axios / fetch 取得資料,並將資料渲染到畫面上。

作品整理

整理練習作品、紀錄學習過程,並逐步補充 README 與專案說明。

精選專案

這裡先放目前整理好的兩個小作品,主要是練習 JavaScript、 API 資料處理和畫面更新。

練習作品

TodoList 待辦清單

練習新增、刪除、完成狀態切換、Tab 篩選與清除已完成項目。

負責與練習內容

  • 新增待辦事項
  • checkbox 切換完成狀態
  • 全部 / 已完成 / 未完成篩選
  • 清除已完成項目
  • 剩餘待辦數量計算
HTML CSS JavaScript DOM
API 串接

農產品比價查詢

使用 axios 串接公開 JSON 資料,練習作物名稱搜尋、 分類篩選、價格排序與表格渲染。

負責與練習內容

  • axios 取得資料
  • 作物名稱搜尋
  • 分類按鈕切換
  • select 排序
  • 表頭點擊排序
  • currentData 狀態管理
HTML CSS JavaScript Axios

專注方向

目前先把基礎練熟,再慢慢整理更多小作品。

JavaScript 基礎

  • DOM 操作
  • 事件監聽
  • 陣列方法
  • 資料篩選與排序

API 串接與資料處理

  • axios / fetch 使用
  • JSON 資料讀取
  • 資料狀態管理
  • 畫面資料渲染

前端切版與 RWD

  • 區塊切版
  • 卡片排版
  • 導覽列設計
  • 手機版畫面調整

聯絡我

目前持續整理前端練習作品,歡迎透過 Instagram 或 Email 與我聯繫。