Holiday Countdown
Countdown timer to the next (national) holiday in your location.
Features
This is a holiday finder and timer combined application. Currently, most applications ask users to create a countdown by themselves instead of showing the next holiday countdown. So having this application can find the next holiday and the time remaining immediately without creating another countdown. This not only improves efficiency for users to meet their goals but reduces the need to store every client's countdown every time they create a new one when there are countless countdowns for each holiday already stored on the server.
There is also a country switch where users can switch to another country if they want to see what holiday is next for them. The first time the website is loaded, it will check the user's location country by their IP address. The location is then stored in local storage so it is not stored anywhere else. Users can change the country on the navigation bar and a new holiday will then show.
Difficulty
The main difficulty of this project is the transition to the next holiday. Originally I wanted to have a sliding effect so the text would slide left and right, but the issue is when it is sliding, the text already changed before the transition had finished. The transition also didn't work as I imagined as well and I couldn't find any solution to match my idea. So I opted for a fading effect in which the text would just fade away and back when clicking the next and previous buttons. This isn't what I intended but still working well. I wish I could find a way to change the transition effect to match the way I wanted.
Reflection
There are some functionalities that I want to implement. A language setting would definitely help for different countries but the current holiday API - Calendarific
, their free plan only supports one language and only paid plans have multiple languages. Other holiday APIs that I found either are not comprehensive as Calendarific
is or it is only limited to some countries. Therefore, I stick with Calendarific
in this application.
As for visual effects, other than the transition that I mentioned above. I also want to change the background to match the theme of the holiday, like Google changing their logo on Google search. This is a possible task but finding all holidays in the world is challenging not really the goal of this application. That being said some commonly found holidays such as New Year's Day are more manageable and I can use AI to create some silhouettes.
Calendarific - https://calendarific.com/