- [Instructor] At their core, prototypes are
an organized way of working with objects.
So let's start with the fundamentals.
The most basic way to create an object in JavaScript
is with object literal notation.
To create an object literal, you simply create a variable
and specify an object as its value.
The start files for this video
are a website for a florist called Hansel and Petal.
The basic design and layout of the site are done,
and our task is to write code to add product information
to the shopping cart each time a user selects an item.
In the all.js file, we already have the basic structure
of an event handler method ready to go,
starting here on line 449.
The data is submitted when a user clicks
the Add to Cart button on one of the pages
is parsed into an object named Data Object,
and we'll use this form data to create a new object
that corresponds to the user's choices.
We'll specify that object is the value of the new
item variable, which we've declared here on line 452.
And then we have a conditional structure
which builds out different options for that object.
And then, when we're done creating an object
for the current selections,
we'll add it to the cookies for the current page.
Now, we have three different cases here.
The item selected by the user could be an arrangement,
it could be a live plant, or it could be a bouquet.
So first, after line 459,
we'll code the object that would be created
if the user selects an arrangement.
We want to select the value of new item equal to an object.
So we'll say new item equals object,
and it will give that object a few properties
that are relevant to an arrangement.
First, we specify that this is in the floral department,
so we're going to specify a key of type
and a value of floral.
And then, we also need to specify how it's stored,
so we have a key called storage,
and for an arrangement that needs to be kept cool,
so we're going to use the string Cool.
And then we need the arrangement name,
so we'll use the key Name
and that's going to be equal to dataObject.itemname.
We also need the type of vase the user selected,
so we'll use a Vase key and that's going to be from
the data object value,
and the key is Vase Type.
We also need the quantity,
and we'll get that from dataObject.qty.
And finally, we want this object to contain
a log item method that we can use
to log the object contents to the console.
So log item is going to be a function
and we'll start with a console.log statement.
Now, I want to log the name of the item in bold
in the console just to make it stand out,
and I can do that by starting with the string percent C
and a plus, and this.name,
and then a comma, and then a string
that specifies the CSS formatting I want to apply here,
and that's just going to be font-weight bold.
And so, the rest of what we're logging here
is not going to be bold, so we just have those object names
standing out and giving us a little bit of
visual distinction in what's logged to the console.
And then, we're going to use a for in statements.
So for, let prop in this,
and we're going to console.log starting with a space
to indent a little bit underneath that heading,
and then prop, and then a colon and a space,
and then this square bracket prop, which gives us the value.
And so, we're just showing key value pairs
one after another on separate lines
indented underneath the name of the object.
So that'll be a really useful method to log out
the contents of the object itself in the console.
And then, we want to do the same thing.
We want to create an object value for new item
for each of the other two cases.
And so down here in the Live category,
we're going to set new item equal to an object.
And again, we're going to have a type value of Floral.
And this time, the storage is going to be warm,
'cause we do not want to refrigerate a live plant.
And then, the name value is going to be dataObject.itemname,
and instead of a vase, we have a pot type.
So we're going to say pot and that's equal to
dataObject.pottype.
And again, the quantity key will be equal to dataObject.qty.
And we also want to log item method here,
so I'm just going to copy and paste the code
that we already typed above.
So that's 466 through 471
and stick that down here on 480.
Take out that extra line.
And then finally, for a bouquet.
So things are a little more complex down here,
but we'll start out with the basics.
So here on line 493,
we'll set new item equal to
an empty object, and we're going to have a type of Floral
and the storage is going to be cool for these cut flowers.
Now this time, the name is going to come from
dataObject.category.
And we're going to go back to having a vase,
which is equal to dataObject.vasetype.
Now, the idea with a bouquet is that
a user can select stems of different types of flowers.
So we're going to store those all in a flowers property
whose value will start as an empty object.
And so, we'll create that here, flowers,
with the value of empty object.
And in a bit, we'll add code that will add a key value pair
for each type of flower and the number of stems.
And then we want to, again, copy the log item method here
from the previous code.
Now, below the code I just entered is a For In section
that's checking for data selecting specific stems
on the Build a Bouquet page of the website.
The first If section checks if the current item
is for a flower that also takes a color selection.
If so, it pulls the text of the legend
above the relevant text box and creates a key out of that.
So down here within the nested If clause,
we'll add code to create a new item.flowers
square bracket, key, and set its value to an empty object.
And we're not in an object here,
so we are doing that as a statement with an equals sign
and a semicolon rather than a colon and a comma,
which we do in an object.
And then, we want to set the value of this key
equal to the value of that text box.
So we're going to say
newItem.flowers, square bracket, key,
square bracket, stem name, which is the color value,
equals data object, square bracket, item,
which is the selected number of stems.
And finally, we also want to specify a type of floral.
So that's newItem.flowers, square bracket, key,
.type equals floral.
Now, some stems come only in a default color
and there's no color selection for users to make.
So we come down to the Else section
and we're going to use an object literal again here.
So newItem.flowers, square bracket, key,
equals an object.
And so, this is going to contain a key value pair default
with a value equal to data object item.
So that's the number of stems chosen for this flower,
which doesn't take a color.
And then we'll also add type colon floral.
And then finally, after this whole section,
I want to log new item to the console
so I can see just what object I've created.
And I can use the log item method of the new item object.
So down here on line 530, we'll say newItem.logItem,
and then we'll save our work.
And so, I've navigated to the current folder
and check that with PWD.
And so I'm in the start folder for video 01_01,
so it's important to be in the start folder
and not in the JS folder
because we need the selected folder, the current folder
to have that index.html file in it.
And so I'm going to type http-server,
and that's showing me that on my local host,
it's serving this content at port 8080.
And then over in my browser,
I'm going to go to local host, colon, 8080,
and there is the website.
I'm going to open up the console
and this'll let me keep an eye on what's going on.
And I'm going to give each page a try.
And so, on the Arrangements page,
I will add this to the cart.
I'll just click the Add to Basket button.
And over in the console, I can see the object
being logged out here.
And so, the object name is Rainbow Rose Collection,
and we've got the different keys and values
that we selected along with the log item method.
And then the last line here is actually
logging out the cookie that we stored in the browser.
And I'll go over to the Live Plants page
and we'll do the same thing, just adding the default.
And it looks like I made a little error in my code.
So we'll go back and look at line 478.
Yeah, just spelled it a little wrong.
So I'll fix that.
Go back and reload.
I'll try that again.
And now it's working.
And so again, I have my object name.
I have all the keys and values
and I have that log item function again.
Now we notice we've got two items in the cookie
for the shopping basket.
And then finally, the Build a Bouquet page.
And so, I'm going to select a number here
for one of the items that takes a color
and I'll select a color.
And then, for one of the stems that doesn't take a color,
I'll also pick a number
and we'll go ahead and add that to the cart.
And so, we have Bouquet as the object name,
we have the keys and values we specified,
and then we have this flowers key
whose value is itself an object.
And within there, we have an object built out
for each of those stems.
So, the Calla Lily's key
has a value of blush, which is the color,
and two, which is the number we selected.
And then, Sunflower has a key of default,
which we specified and a value of five,
which is the number of stems we selected there.
And then we have the log item method.
And then we notice that we've gotten a third item
added to our cookies.
So each one of the items we added
has been added to that basket.
And so, we've built out all that functionality
using object literals.