I built a little countdown timer app over a weekend.
“But why?” You might ask.
- I wanted to learn a little more Vue, Vuetify, Vite, and static site stuff.
- Another reason is because I am interested in client side web stuff.
- I have always wanted to make a timer and a clock in JavaScript.
Countdown Timer
In short, the countdown app I made is for targeting a date (and now also a time). Say for example, a new video game is coming out and will release at 10pm PT on August 27th 2025. Simply set the title for the game, set the date to 8/27/2025 and then pick the time 10pm (or adjust for your local time). Last thing I really wanted to add, background images. Especially for a game launch, it’s nice to show a background for the game on the countdown, so I added “uploading” a background image.
Client Side
What do I mean by “All processing is done client side and nothing is saved” (Countdown README)?
The client, your web browser, is one component of the web. Yes, you need a browser to display the information in front of you. Technically, you do not need a traditional web browser and could instead use a command line tool like curl to interact with web pages. Most people do not do that and instead use Chrome, Edge, Firefox, or some other browser probably based on Chromium - the base of Google Chrome.
The server is another aspect of the internet. In order to have websites like this blog, you need some server to serve the web pages. Often times you navigate to a website and a lot of processing happens on the server. Perhaps it renders out some information and sends it to your browser to display as HTML. Just about any true web application (as compared to a website) has some amount of server side processing to make things happen.
If processing is done server side, that means data has left your device and has been transferred to the server. From there it is processed and some result is sent back. For example, you requested the page /posts/countdown-app/ from my blog and here you are. Luckily, I do not take any data from you to do that. Some web sites will track your history and IP address so that they can sell the information to advertisers and malicious parties to try to sell you something.
Client side processing is all about NOT sending data to the server. Websites use JavaScript to perform client side processing of inputs. Sometimes that’s like playing an animation when you click a button (although the animation itself might be done with CSS). I made this countdown app and would like to make more apps like it that run on your browser, on your machine, and they don’t send data to a server. Two main reasons for this: 1) To negate the need for running it on some server that is collecting information about you* and 2) I don’t necessarily want to host a server for these apps but would like to use them myself.
*Ok there is probably some amount of data that Cloudflare and GitLab process from you when you navigate to my websites. I cannot prevent ALL tracking, but I can choose to not track you myself.
Plans
I would like to add more to this client-side utility as time goes on. Maybe I will configure it to remember your settings via a cookie (besides the background image).
Another idea was to add the ability to link to an image off of the internet. That would allow me to use query parameters, the ?key=value&this=that for everything.
Mobile is not a great experience at this time. The page formats kind of funny for a smaller screen and does not work great in vertical as compared to horizontal display. One day, I would like to fix this.
More options for customizing the look. Maybe custom shadow elements or colors for the text. Maybe some font selections.
Tools
VueJS was at the top of my list because I have used it before and a lot has changed since I did (i.e. 2.x -> 3.x was a big upgrade)!
Vite is the new tool for building frontend applications written in frameworks like Vue. It’s quite versitle and provides fast and efficient rendering for both development and production.
Vue Router is a fancy piece of middleware that allows you to navigate multiple “pages” from within one actual web page. The premise is to have elements that intend to navigate you to another page instead dynamically pull up a different view or component within the page you are already in. Even more than that, it allows you to lazy load some of those elements while still maintaining the Single Page Application.
Vuetify is a collection of Vue components and CSS classes that makes creating a Material Design formatted website easy.
Pinia is a frontend state management tool. It provides a way to create and manage variables and objects on the frontend that can be shared and modified across components and views.