簡單的Todo-list Calendar

Avatar of 李旭恩.
Avatar of 李旭恩.

簡單的Todo-list Calendar

研發工程師 @ 聯瞻資訊股份有限公司
Taipei City, Taiwan

簡單的、純前端的Todolist Calendar

當初會有這個作品,是因為我的女友是個作家,她想要一個簡單的行事曆清單可以記錄她每天閱讀、寫作、思考所得,所以我就用Vue+Bulma做了這個網頁小程式給她


自動計算天數

因為簡單,所以這個網頁程式每個月開始都會重新計算,他會對應使用者所在地的月份產生一份完整的月曆,使用者要做的就是新增自己每日需要完成的工作


存檔與分析

因為這是純前端的網頁,所以所有的資料在按下存檔後會以 localStorage 的方式存在瀏覽器中,使用者也可以下載一份JSON的存檔,而這份存檔不管在什麼地方打開匯入都可以產生一樣的內容。分析則是後面加入的小功能,簡單地告訴你這個月你列了幾項工作,又完成了幾項。

新標籤

因為她是個作家,所以基本項目我只列了靈感、閱讀、寫作等三項,但如果要新增的話,也可以簡單在新標籤設定,新標籤有標題、icon 與顏色可以設定,而 icon 在之後使用時點擊的話,可以顯示為空心或實心,作為你是否完成該項工作的指標。


新工作

這就是主要部分了,我們可以輸入該項工作屬於哪個分類(標籤),並寫上標題跟說明,說明會在使用者的游標移動到項目上方時顯示,所以不用擔心他會佔據版面,最後則是選擇該項工作的日期。

寫錯了怎麼辦?

只要點擊該項目之後,按下筆的 icon,就可以編輯該項目的內容,更改日期,他就會移動到正確的日期,更改說明,浮動說明也會即時修改。只要按下存檔,資料就會更新成最新結果。


還有什麼嗎?

沒了。他完成了我一開始(或是我女友)想要的功能,不需要增加更多莫名其妙的東西。或許有一天吧。

就是一個簡單的 Calendar,你可以自由地新增你要做的事情或是他該怎麼分類,點擊他,他就會從空心變成實心,可以標記你到底完成了沒,That's it.
Avatar of the user.
Please login to comment.

Published: Dec 13th 2022
57
3
0

Tools

javascript
JavaScript
vuejs
Vue.js

Todo-list
前端
網頁應用程式

Share