Upcoming UK Bank Holidays

Using the fetch() api to get and display upcoming bank holidays

Made using JavaScript and SASS.

UK Bank Holidays Preview

When is the next bank holiday?

I purchased the whenisthenextbankholiday.co.uk domain to display the upcoming bank holidays.

Working with the fetch API

This was the second time ever I was working with API data, more importantly, it taught me a few things! The objective of this project was writing the JavaScript code, so I've kept the design of the site fairly simple. All I have on the page is an H1 headline, with an empty 'ul' tag, where the data is injected.

Using the .map() method

The map method is one of my favourite methods to use (I'm not sure why). It processes the original array and produces a new array so as to not mutate the original one. I used map to return my event names and dates inside li tags, as that's where this data is being injected into. I added a new class to the date elements to visually differentiate it from the event names.

Only displaying dates in the future

Everything is taking place on the client side in this case, and in order to only display bank holidays in the future, I used the 'new Date()' method, and then deriving the month, day and year from it (I had to do this, as the date format in the JSON is in YYYY-MM-DD format).

Using 'Date.parse()'

I used Date.parse() to compare 'today' (i.e. whenever the page is loaded on the client side) with the dates in the array that was returned, and used an IF statement to only pass those events into the map() method.

Here's the code being used

Here are some of my other projects

Showcase: Components

Here is a collection of website components from popular websites written from scratch.