A "Grill-Day"

Each grill can be booked for 24 hours a day (duh). So, we need a way to track whether each grill has already been booked or not. We need to use an array, since order matters a lot when planning a day!

Size of Array

The array needs to have 24 slots, one for each hour of the day. Check out the array to the right to see a grill that is available all 24 hours of the day.

 grillDay[8] = 'wallstreet'

Creating A Booking

Let's just use the location to define the booking for now. The above statement means that the grill needs to be at Wall Street at 8AM.

Why use an array?

Arrays make it really easy to create booking slots. Unike actual Uber, where length of the trip varies, these grills are booked in hour-long intervals. So index 0 of the array corresponds to midnight to 1am.

Position in the Array

So, if you wanted to check if the grill was booked from 4AM-5AM (I see you are nocturnal), all you would need to do is check index 4 of the array.

Your Turn

You want to book the grill from 7PM-8PM. You live in the "eastvillage". Create your booking in the grillDay array!

After you start typing, the array to the right will show live feedback!

Two hours at once

In our original parameters, we can see that we need to add an extra hour for transit and cleaning to every booking.

Using index

Index determines the position within the array. Our first booking was index 8, the 9th element in the array. So this one needs to have an index of 9, or the 10th element in the array.

 grillDay[9] = 'transit'

Add Transit time

The above statement means that the grill will be in transit from 9AM-10AM.

Filling Out The Chapters

Many "chapters" of the array are still empty. That's alright. The data structure (array) makes it clear that you have 24 available slots, in this case. If you booked on half-hour intervals, then there would be 48.

Your Turn

Add transit time as an 8-9PM booking in the grillDay array. Use 'transit' to indicate transit time

After you start typing, the array to the right will show live feedback!

Info with an Order

You can imagine that an incoming order from a user might have a bunch of useful info: name, location, phone number, cost etc. We will just stick to name and location right now.

Setting up fields

The object needs to have two key-value pairs. One for name, and one for location.

 var order = {
    name: "dave",
    location: "chelsea"
};

Creating An Order

If your name was Dave and you lived in Chelsea, this is what your order would look like!

Why use an object?

Data labels are a big deal with an order from a user. These are known as keys

Your Turn

Your name is "katie". Your location is the "westvillage". Create your booking in the order object! The two keys are name and location.

var order = {
    
    
};

After you start typing, the object to the right will show live feedback!

Objects Use Labels

Since order is not the defining way that we organize objects, it is always easy to add a new key-value pair . Or, we can change an exisiting pair by assigning a new value

 order[location] = 'wallstreet';

New Value in An Order

If Katie from our previous example changed her location to 'wallstreet', this is what it would look like in code.

Your Turn

You want to switch the name on the order to your friend, Joe. Change the value of the name property in the order object to 'joe'.

After you start typing, the object to the right will show live feedback!

Booking + Transit Times

We also need to figure out how to handle transit times. This can just be a new value for the 'location' property

Setting up fields

Each object still has two key-value pairs. One for name, and one for location.

 grillDay[16] = {
    name: 'joe', location: 'westvillage'
};
grillDay[17] = {
    name: 'joe', location: 'transit'
};

Creating An Order

If your name was Joe, you ordered at 4PM, and you lived in the West Village, this is what your order would look like! We also include the second entry so we leave ample time to prep the grill for the next customer.

Why is this a good combination?

You need the labels provided by objects, while you need the order from arrays. You can book the grills for specific times without needing complex JavaScript for interpreting time within an object.

Your Turn

1. Your name is "jordan".
2. Your location is "gramercy".
3. The two keys are name and location.
4. You are booking the grill at 9AM, which is already shown.
5. Make sure that the location of your second entry is 'transit'.

Create your booking in the grillDay array!

grillDay[9] = {
    
};
grillDay[10] = {
    
};

After you start typing, the object to the right will show live feedback!

Remove an Order + Transit

We can easily remove an order by resetting the object to an empty object. All we need to know is the position in the array. We also need to remember to remove the transit period

grillDay[20] = {};
grillDay[21]={};

Resetting an Item in the Array

Let's say someone had created an order at 8PM, but then cancelled. We could use the code above to remove their order and the transit period from the grillDay array.

Your Turn

Joe from the West Village cancelled his order from 4PM. You need to erase his order from the array, as well as the transit time associated.

Erase those bookings in the grillDay array!

After you start typing, the object to the right will show live feedback!