If you have been following the blog, you know I created my own clock using LED strips and an ESP32. The clock runs an HTTP server for programming. A while back I wrote a REST API in Flask to talk to the clock but didn't have a frontend.
With the help of GenAI, I have created a Vue.js frontend for the API.
The app lets you create a list of different commands for the clock. In the picture above, the clock displays the time in a 24-hour format, first in red for 2 seconds, then in green for 4 seconds. Other functions include a 12-hour clock, date display, minute and day countdowns (which I used for my wedding!), minute and second timers, and a timezone function for showing the time in a different timezone. I have more ideas for future functions, but I'm not ready to share them yet.
One of my biggest challenges was styling and relearning how to use a flexbox. If you're also looking to improve, I can't recommend Flexbox Froggy enough. I'm still not happy with the UI for the day countdown, as it needs the cardinal date. If you look at the source code, there's a to-do to add a date picker. I'm looking forward to learning how to implement that using Vue.
Check it out over at my GitHub, Clock Vue.js App
No comments:
Post a Comment