現代人生活步調緊湊,很容易忽略生活中的小美好。這個專案希望透過一個溫柔的每日記錄儀式,讓使用者在一天的最後,回想並寫下一件當日的小小美好,系統會將這句話化作一顆光珠,緩緩落進專屬的玻璃採樣瓶中。
我將使用 Vue 3 搭配 Vite 從零開始打造這個網頁,內容涵蓋元件化開發、響應式資料、動態互動效果,並串接 LocalStorage 讓所有紀錄安全留在使用者自己的瀏覽器裡。每個月的最後一天,瓶中光珠會化作一張專屬的色譜回顧卡片,可下載保存。希望能藉由這 30 天的實作紀錄,練習 Vue 3 的核心概念,同時也做出一個真正可以讓自己使用的小網頁。
昨天我們成功利用 v-for,把採集到的資料轉化為一顆顆彩色光珠呈現在瓶子裡。但目前點擊按鈕,光珠都是瞬間出現在瓶中,看起來少了一點「被放進瓶子」的互動感。 今...
現在瓶子裡的光珠,雖然會沉底、往上堆疊,但每一顆都排成一整齊的橫排,像是被尺量過一樣,這在真實世界裡幾乎不可能發生,一把珠子灑進瓶子,一定不會是這麼整齊的。今天...
「微光採集瓶」最重要的核心,不只是收集,而是重溫記憶。當初在輸入框裡寫下的那句「今天的美好小事」,如果存進瓶子後就再也看不到了,那過一陣子之後很有可能會忘記,當...
現在我們已經可以讓光珠被採集至玻璃瓶中,但如果刷新了頁面,裡面的光珠就會馬上消失,沒有辦法真的儲存下來或是被記得,所以今天要說明 LocalStorage 並使...
在昨天的實作中,我們透過 Vue 3 的 watch 深度監聽與 localStorage,成功讓掉進玻璃瓶裡的微光可以在網頁重新整理後依然保存下來。 但隨著系...
你是夜貓子嗎?我是。所以我的「一天」其實不適合以凌晨十二點做分隔,我想應該也有很多人像我一樣吧!白天忙著工作、上課,晚上可能還要處理一些白天處理不完的事情,一直...
市面上大多數的習慣打卡工具,往往帶著一種隱形的心理壓迫感:一旦中斷連續天數,畫面就會跳出刺眼的紅色警示,甚至歸零重來。這種機制很容易讓人從「想記錄生活」變成「害...
昨天我們實作了「凌晨兩點跨日判定」與「自動補上純白光珠」的邏輯,整個系統在基本功能方面已經差不多具備。但也因為瓶子會如實記錄親手採集與留白補發的微光,瓶底的光珠...
隨著日子一天天過去,瓶底積累了每天最幸福的痕跡,以及忙著生活的象徵。如果只是任由它們堆在瓶底,是不是少了一點儀式感。 今天我們要實作一個重磅功能:在月底最後一天...
昨天做完開瓶跟光珠飛出去的動畫後,回頭看了一下產生的色卡,我發現一個很明顯的盲點:昨天的做法是用 new Set() 把有出現過的顏色抓出來,然後每個顏色都給一...