Create a New Years Countdown Timer with Luxon.js
- Document Object Model(DOM) Manipulation
- Template Literals and String Interpolation
- built-in functions
However, if you are struggling to follow along, I have another web app tutorial that dives into the topics listed above. Check it out if you need to.
Ultimately this is what the outcome should be.
Introduction to Luxon
What is Luxon?
Installing Luxon & Folder Structure
To enable the use of Luxon for this project, there are different installation methods as detailed in its guide, but for quick and simple use, files from a Content Delivery Network(cdn) works just fine for the purposes of this project. The script tag obtained from the cdn will be linked in the head of the HTML file. The script tag that we’ll be working out of, would be included in the body tag.
The folder Structure is as goes:
Styles can include your main css file. If working with SCSS, then a designated CSS folder for the css file output, and a SCSS folder that contains the reset and SCSS file.
Document Element Manipulation
Afterwards we append, lower level elements to its parents and containers. It might seem like overkill, but in terms of styling, it makes everything easier to work with down the line. Easier to position items faster.
Document Class Lists
Add classlists to the elements created.
Working with Luxon
In laymen terms, Luxon is a class with many methods.
So the first step in working with Luxon is to create two variables that allows access to dates and times.
The Datetime data structure creates a Date instance which provides access to a specific Date and time along with its methods. According to its documentation, a DateTime comprises of:
- A timestamp
- A time zone
On the other hand, the Interval object represents interval of time between two endpoints, and by creating an instance of this object, we can use the .fromDateTimes(x,y) method within its creation category, that allows us to calculate the amount of time between x and y.
We will also create variables correspondent to time, one for the 24 hours in the day, one for the 60 minutes in an hour and one for the 60 seconds within a minute. More on the purpose of this as we go further in to the logic of displaying the time.
This section details the use of creating a function that gets the current date along with a future date and using that data to display the current amount of days left along with the time left for 24 hour format parsing.
The logic/pseudocode for that process is:
- get the date and current time
- get the goal date and time
- get the current time by:
- taking amount of hours in day and subtracting by the current hour
- taking amount of minutes in an hour and subtracting the current minute
- taking amount of seconds in a minute and subtracting the current second
Most importantly a function that displays the countdown data must be created within the function that holds the variables for the date and time in order for the variables to stay local.
We create a function called
timeData. Within that function, the following variables will be created:
the current year’s value will be obtained by using Luxon’s DateTime object and its method
now(). **we can also access the current year by using the dot notation and referring to “year” from the data provided.
this variables value is currentYear + 1, in order for the countdown timer to update as the years go by. When the timer reaches its goal, a new one is dynamically created.
a variable created for the purpose of accessing the current date. Accessed simililary to the currentYear function, but we omit the dot notation.
Datetime.local represents a millisecnd in time and takes any number of arguments. Our arguments for this object is our dynamically created yearGoal, and the first day of the year along with the 1st day of the month.
As stated before, intervals take two parameters which can be seen as endpoints between one set of time and another. Essentially we are taking the time between the current date and the first day of the following year. The time between “now” and “later”.
The following variables within the timeData function, are for the purpose of parsing the time that will be displayed. For example: If left as is, the time would display as “96 Days 2890 hours 3849892830 minutes 8948494095 seconds”. Instead we use the variables to take for account the current time in the day, and parse it into the format that we are used to telling time with. Such as “22 hours 30 minutes 22 seconds”
And now we create two more functions, one outside of timeData called addZero which will will parse the display of time whenever it falls below 10.
The logic behind this function is:
If the time data falls below the number 10 add a zero to the start 09 08 07
else return the time as per usual
And another function directly inside of timeData, called showTime which will display the data with the current amount of days, hours, minutes and seconds.
Lastly for this function, we call showTime(), for the purpose of keeping the date and time variables local whenever the timeData function is called.
This is what our timeData function looks like
setInterval() is defined as a method that repeatedly calls a function or executes a code snipped with a specified time delay. So, with that definition in mind, we will be calling timeData() every 1 second, to update the the time displayed. We choose second because we are taking into account the fact that the seconds are displayed.
Last but not least, we call the function timeData() when the window browser loads.
The purpose of having timeData called when the window loads, is to have the countdown displayed automatically rather than waiting 1 second for the setInterval method to call on timeData.
User Interface (UI)
And here is the source code used for the styling of this web app. With the background image provided by wallhaven.
Did you find this article valuable?
Support Joshua Mendoza by becoming a sponsor. Any amount is appreciated!