Javascript

This project required a step by step order process where the user could build up an order by specifying details about it. They would firstly enter their postcode to see if they were in an accepted area, then they would choose some predefined options about their order, then they would be able to choose a collection and delivery date and timeslot before finally being able to review and confirm the order.

I worked on this project with a colleague more experienced in Javascript who was tasked with the development of the order process, however due to workload I ended up helping out with some aspects of it. I assisted in 3 main tasks;

• General additions and changes to the code to aid the work I was doing in styling and user experience. This including things like calling functions, adding interactions such as loader animations, editing code so that the order process flowed as I needed it to and making refinements to functions that had bugs.
• Adding a disabled days functionality to the collection and delivery datepicker. This was so that bank holidays could be excluded from the available dates.
• Creating a function to handle the functionality of the process steps to allow the user to go back to a chosen step in the process.

To create the disabled days functionality I found and downloaded a list of bank holidays in the UK extending until 2020 and saved them in an array. Using the jQuery datepicker "beforeShowDay" method I then had to format the date object in Javascript in order to be able to compare the days on the datepicker with the disabled dates as these were not in an identical format.

After the dates were formatted and identical I then wrote an if statement in order for the function to return a required array. This if statement checked if the date on the datepicker was equal to any date in the disabled dates array. If it was, it returned an array of false to indicate the date was disabled, a CSS class so that the disabled date could be styled and finally some text for a popup tooltip. If the date wasn't equal to any of the disabled dates, the array simply returned true with no CSS class or tooltip.

For the steps functionality I had to write a function that fired whenever the user clicked (or tapped) a numbered step. The function accepts 3 parameters, the next step in the process, the current step, and the event that fired it. It checks what the desired step number is and makes sure the step isn't disabled, meaning the user isn't jumping forward. It then shows the desired step, adds an active class to the new current step number, and adds a disabled class to any steps number that is greater than the current one, again to stop the user from jumping forward. This is because there is validation on each step therefore making jumping forward unfeasible.

If the user has simply used the next button to go forward in the process instead of the step numbers, I still needed to write some code in order to make the step numbers update along with the order process. To do this, the step handler function is fired every time the next button is clicked and if the event that fired the function wasn't a click then the code to be used when progressing via the next button is fired. The code takes the next step and current step at the time the next button was pressed and disables the current step (which becomes the previous step) and makes the next step (which becomes the current step) active.

</div>