Calculating Total Cost

Snippets Bakery's new order form wouldn't be much good if it couldn't provide the total cost of the order to the customer on the confirmation email it sends out. Now that we've recorded the delivery date and calculated how much notice we were given, it's time to total the bill. We're charging for up to three possible items;

• Cost of the cake - based on size
• Delivery - based on choice
• Fast-tracked orders - those with only 3 - 5 days' notice

Cake

Each size option has a cost attached to it to make it simple for the customer to choose the most appropriate. We need to extract this number from the string. As it always comes at the end, but is in slightly different positions, we need to find where it starts - specifically where the "£" is. We've used an indexOf and then converted the string to a number (in base ten) with parseInt.

Delivery

Customers can opt for delivery or collection so we just have to check if the first 8 characters of the response is "Delivery". We've used a conditional operator (a short cut for an if...else statement) to set the cost to 3 if Delivery is selected.

Fast Track

We have three possible routes for orders to take based on how much notice we are given. 

• Orders with less than 3 days' notice set the declined variable to true as we can't make our delicious cakes at such short notice whilst also managing daily production for the shop.
• Orders with 3 - 5 days notice are possible but we add a surcharge as it makes it harder for us to plan our work load if. Note that we've tested for "< 6" as we have already dealt with "< 3" within the if statement.
• Orders with 6 or more days' notice (anything else) present no problem to us so we don't charge extra.

All we have to do now is simply add our variables and then present them in a form that is easy form humans to interpret; we've forced the number to display two decimal places with toFixed and added a currency symbol. All ready to display on our order confirmation!

Google Forms and JavaScript Dates

Updated: +Eric Koleda was kind enough to point out JavaScript's date parsing capabilities which are much more elegant than my previous workaround so this post has been edited to avoid leading anyone else astray!

Last time in our Snippets Bakery Project we looked at constructing HTML tables in confirmation emails. This time we're looking at working with dates - crucial when your products have a short shelf life!

One of the most common pieces of information you need to collect in a form is a date. Unfortunately, Google Forms doesn't include a flashy jQuery-like date picker and the most common approach seems to be providing a free text box and hoping that respondents fill in dates in a useful format. However, responses that vary from "Monday" to "Monday the nineteenth of November" to "19-11-2012" are less than ideal if you need to perform calculations based on a specified date.

3 x the fun fields

A work around I have used isn't terribly graceful in that it requires three fields to be filled in but it is relatively simple to code and does the job.

So, what do we want to achieve with this snippet?

• A date string form that is easily interpreted by humans
• A JavaScript date instance with which we are able to do arithmetic
• To avoid any international ambiguity over day and month order

Transatlantic Translation

So how do we go about it? To achieve the third aim I want to build using (shortened) month names in to the specification. It could be argued that naming the field "Month" or the fact that there's only 12 numerical options rather than 31 could be enough but if you were in a hurry and wanted to select the second of January it is conceivable that you could select the first of February in error if you select 1-2. So: month names it is.

To create a human readable date string, all we really need to do is attach the values with a splitter character of your preference. In JavaScript you can easily join strings with the concatenation operator (+). 

Handily, JavaScript will parse datestrings in some formats easily so having Months as names doesn't present us with a problem. This post was much simpler than I originally envisaged!

Further reading - 10 ways to format time and date using JavaScript - Working with dates