iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

從零開始的個人化記帳程式開發 系列

一直以來都有記帳的習慣,但現成的記帳 APP 沒辦法百分之百符合自己需求,常常要自己手動紀錄到 Excel。因此趁著 IT 鐵人賽的 30 天,來啟動這個總是說說的個人 side project,自己用網頁技能刻一個記帳程式,順便練習各種前後端能力!

鐵人鍊成 | 共 30 篇文章 | 60 人訂閱 訂閱系列文 RSS系列文 團隊Wow Doge!
DAY 21

記帳程式 (21):專案開發 Part.1 - 全站 layout 畫面優化

因為接下來都是專案的基本開發,就只是純記錄開發筆記,內容會無聊一些哦~ 前言 轉眼間鐵人賽也只剩下十篇了,在前面嘗試了使用 Firestore 串了支出...

2019-10-07 ‧ 由 ckchuang 分享
DAY 22

記帳程式 (22):專案開發 Part.2 - 實作選單收合漢堡包

今日開發紀錄 今天開發時間只有大約一小時,繼續調整昨天還有些不完美的 layout 畫面: 實作上圖中的 hamburger 按鈕 toggle 左側選單。...

2019-10-08 ‧ 由 ckchuang 分享
DAY 23

記帳程式 (23):專案開發 Part.3 - 月記帳本加上月曆

今日開發紀錄 今天開發時間只有大約一小時,主要的目標是要開始將月曆選取的功能加上,可以像一般的記帳程式一樣,點擊上方月曆中的每一個日期,就能對應到下方當日的記...

2019-10-09 ‧ 由 ckchuang 分享
DAY 24

記帳程式 (24):專案開發 Part.4 - Day.js 安裝及 Vue.js global method 筆記

昨天將以前手刻的月曆元件引入後,今天目標是將月曆與底下列表做串接,但首先呢要先引入 Day.js 這個套件,並順便筆記一下在 Vue 中寫成 global m...

2019-10-10 ‧ 由 ckchuang 分享
DAY 25

記帳程式 (25):專案開發 Part.5 - 完成月曆串接記帳列表

昨天先引入了 Day.js 後,接下來要繼續完成選取月曆上日期時,要對應到該日記帳清單的增刪改查。 關於這個手刻月曆元件 首先要來重新回憶一下當初這個 com...

2019-10-11 ‧ 由 ckchuang 分享
DAY 26

記帳程式 (26):專案開發 Part.6 - 支出分類

Hi 大家國慶連假過的好嗎,歡迎回到連假還要早起趕工的記帳程式系列! 昨天將月曆與記帳清單的功能串起來後,今天來修一點這個記帳清單還不夠完整的地方,其中一...

2019-10-12 ‧ 由 ckchuang 分享
DAY 27

記帳程式 (27):來做個待購清單吧!

前幾天已經將基本的記帳功能整理的差不多了,今天就來做一些新東西吧! 下一個題目 看著前面盤點出來的功能: 每月記帳本 年收支記帳表 多帳戶理財規劃 大筆消費...

2019-10-13 ‧ 由 ckchuang 分享
DAY 28

記帳程式 (28):待購清單 Part.1 - 初始畫面及排版

漫漫鐵人三十天挑戰,終於也快到了尾聲呢,就用待購清單來收尾吧! 開發紀錄 畫面初始化 首先先把初始畫面弄出來,這邊分成主頁面及每一張看板卡的 componen...

2019-10-14 ‧ 由 ckchuang 分享
DAY 29

記帳程式 (29):待購清單 Part.2 - 使用 Dragula 實作拖拉效果

今天繼續將昨天未完成的待購清單拖拉功能使用 Dragula 來完成! 安裝 Dragula 首先當然要先安裝 Dragula,安裝方式一樣可以從 NPM 或是...

2019-10-15 ‧ 由 ckchuang 分享
DAY 30

記帳程式 (30):完賽啦!

一路上跌跌撞撞也終於到了這一天,今年鐵人賽的最後一篇就來寫寫心得與總結紀錄一下吧! 參加原因 先聊聊今年參加的原因好了。 原本今年沒打算參加鐵人賽的,主要因為...

2019-10-16 ‧ 由 ckchuang 分享