{"id":21802559,"url":"https://github.com/rayc2045/vite-todo","last_synced_at":"2026-05-07T05:34:55.909Z","repository":{"id":140270230,"uuid":"375697580","full_name":"rayc2045/vite-todo","owner":"rayc2045","description":"To-do List build with Vite and Tailwind.","archived":false,"fork":false,"pushed_at":"2022-03-24T16:52:06.000Z","size":1049,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-16T20:41:35.446Z","etag":null,"topics":["crud","tailwind","tailwind-css","tailwindcss","todo","todo-app","todo-list","todoapp","todolist","todomvc","vanilla-javascript","vanilla-js","vanillajs","vite","vitejs"],"latest_commit_sha":null,"homepage":"https://vite-todo.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rayc2045.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-10T12:56:13.000Z","updated_at":"2022-03-24T16:52:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"fbe1f087-f529-4c11-8d74-152b501b1064","html_url":"https://github.com/rayc2045/vite-todo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fvite-todo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fvite-todo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fvite-todo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fvite-todo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rayc2045","download_url":"https://codeload.github.com/rayc2045/vite-todo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244752360,"owners_count":20504256,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["crud","tailwind","tailwind-css","tailwindcss","todo","todo-app","todo-list","todoapp","todolist","todomvc","vanilla-javascript","vanilla-js","vanillajs","vite","vitejs"],"created_at":"2024-11-27T11:29:27.734Z","updated_at":"2026-05-07T05:34:55.864Z","avatar_url":"https://github.com/rayc2045.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vite Todo｜使用 Vite 和 Tailwind 打造的待辦事項清單\n\n![Photo](https://raw.githubusercontent.com/rayc2045/vite-todo/master/src/image/production.png)\n\n[\u003e Vite Todo](https://vite-todo.netlify.app/) / [設計稿](https://hexschool.github.io/js-todo/)\n\n### 簡介\n這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發。\n\n### 外觀與互動設計\n- 使用圓體無襯線字體 [Baloo Tamma 2](https://fonts.google.com/specimen/Baloo+Tamma+2) 作為標題字體\n- 使用深灰而非黑色字體以達到閱讀和諧\n- 每次更新觸發輸入框的集中 (focus)，省去額外點擊\n- 將過長或連字的段落 (例如 `THISISAPARAGRAPHWITHOUTSPACE`) 強制換行，維持待辦清單任務的一致性\n- 除了將勾選完成的任務以灰色字和刪除線表示，另外使用灰階對 Emoji 做去色處理\n- 加大勾選框和刪除按鈕的點選範圍，增進操作體驗和容錯率\n- 完成勾選所有任務，或是清除所有已完成任務後，自動回到「全部」任務區塊中以優化使用體驗\n\n### 開發紀錄\n- 使用 [Vite](https://vitejs.dev/) 進行專案開發和打包\n- 使用 Utility-First CSS 框架 [Tailwind](https://tailwindcss.com/) 開發外觀、滑鼠觸碰效果與 RWD 響應式設計\n- 透過 [Purge 過濾未使用的 CSS](https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css)，優化專案打包\n- 透過官方插件 [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) 實現客製化勾選框 (checkbox)\n- 使用 `dataset` 標記任務 id\n- 使用箭頭函式、三元運算子、forEach、filter、find 等 ES6 JavaScript 開發功能\n- 加入 Local Storage 儲存功能，關掉瀏覽器也不怕任務丟失\n- 使用 [Prettier](https://prettier.io/) 格式化程式碼，保持程式的整齊和一致性\n- 使用 [Netlify](https://www.netlify.com) 部署網站\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayc2045%2Fvite-todo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frayc2045%2Fvite-todo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayc2045%2Fvite-todo/lists"}