June 11, 2019

published by: Yonseo

Javascript for Bubble Tea

Create a customer order with Javascript

When you want dynamic changes without refreshing a page Javascript is the language to use.

Javascript is used to manipulate html to make changes to the sidebar, navigation bar, and other elements on a page.

Take for instance a digital tablet, when you swipe your finger across the screen an element is animated. This movement is what Javascript does.

However if I want to  interact with a user interface it requires a function.

A tv remote has several buttons, each button performs a different function. Without these functions we are unable to interact with a remote. The press of a single button without a function returns nothing.

So what does this mean?

You want to order bubble tea, your name is Kim and your favorite drink is almond milk tea with golden tapioca pearls, 50% sugar level, regular ice, and a large cup, one order.

Now let's look at what we know will change and what will stay the same. A constant will remain the same. A variable will change.

Variables: name, drink type, number of drinks, cup size, toppings, ice, sugar level, tip.

Constant: ticket, price of golden boba, price of a base drink, tax percentage

In a variable we know that with every new customer a new order or set of data comes with it. This data changes from customer to customer and it is called dynamic because it changes.

In a constant the price of a drink with no additional toppings has a base price that never changes. This price will only increase if additional toppings are added or drink size is changed. The price of golden tapioca pearls also remains the same as well as tax percentage. But wait, what about the ticket? A ticket number is used to determine each order made. Every customer will receive a ticket number and that number increases with every order. So why is it a constant if it changes? That's because a ticket number starts at 0 and when a new order is made it will increase by 1. A ticket will always begin at zero so it is a constant.

Let's put this in a function.

var name = "Kim";

var drink = "Almond Milk Tea";

var size = "Large";

var number = 1;

var toppings = "golden boba";

var ice = "regular";

var sugar = "50%";

var tip = .25;

const ticket = 0;

const pearl = .55;

const base = 3.99;

const tax =  0.0825;

function customerOrder(name, ticket, drink, size, number, toppings, ice, sugar, tip){


    var cost = (base + pearl) * number;

    var tax_cost = cost * tax;

    var change = cost * tip;

    var price = cost + tax_cost + change;

    var order = 'Hello ' + name + '. Your order number is : ' + ticket + '\n';

    var receipt = 'Drink: ' + drink

            + '\n Size: ' + size

            + '\n Toppings: ' + toppings

            + '\n Ice Level: ' + ice

            + '\n Sugar Level: ' + sugar

            + '\n Orders: ' + number

            + '\n Subtotal: $' + cost

            + '\n Tax: $' + tax_cost.toFixed(2)

            + '\n Tip: $' + change.toFixed(2)

            + '\n Amount: $' + price.tofixed(2);

    console.log(order, receipt);


// In order to use this function I need to create a new instance.

// Why? Because for every customer comes a new order, therefore a new function.

customerOrder(name, ticket, drink, size, number, toppings, ice, sugar, tip);

The function

customerOrder(name, ticket, drink, size, number, toppings, ice, sugar, tip);

shown above will return the same customer order every time. That means the data in this function is not dynamic.

To create a dynamic function I need arguments. Arguments are displayed as variables inside a function. (Remember variables can change.)

customerOrder(argument1, argument2, argument3);

They are used to set data. We can give an argument a variable such as name, drink type, number of drinks, cup size, toppings, ice, sugar level, tip. We can name these variables anything we want but we should name them something we understand and know to avoid confusion. I don't want to guess what type of data is set in a variable. So in variable name I know there is data containing a persons name. It is definitely possible to set a customers drink inside the variable name. But we don't want to cause chaos or ruin a customers order.

How do I  make a dynamic function?

We already have a dynamic function. I simply need to pass in my own data into the function like this.

customerOrder("Janelle", ticket, "Peach Green Tea", "Large", 2, "Black Boba", "Little", "25%", .25);

This will return:

Hello Janelle. Your order number is : 1 Drink: Peach Green Tea Size: Large Toppings: Black Boba Ice Level: Little Sugar Level: 25% Orders: 2 Subtotal: $9.08 Tax: $0.75 Tip: $2.27 Amount: $12.10

There's a lot more we can do with Javascript. A function can be more complex. For example we can have a different price for each cup size. We can build user interfaces to insert data into a function.

It's tools like these that help a bubble tea barista process an order, payment, track inventory and sales, manage employees, and analyze data through a (POS) system.

It would be cool if we had a boba dispenser!

#bubbletea #boba #javascript

Last edit: 0000-00-0