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's submitted when a user clicks the add to card button on one of the pages is parsed into an object named dataObject. And we'll use this form data to create a new object that corresponds to the user's choices. We'll specify that object as the value of the new item variable, which we 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 items 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 newItem equal to an object. So, we'll say newItem equals object, and we'll 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 dot 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 dataObject value and the key is vasetype. We also need the quantity. And we'll get that from dataObject dot 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, logItem is going to be a function, and we'll start with a console dot 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 dot 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 hyphen 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 a visual distinction in what's logged at the console.
And then, we're going to use a for/in statement. So, for, let prop in this. And we're going to console that log stating 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 a object value for newItem, for each of the other two cases. And so down here in the live category, we're going to set newItem 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, because we do not want to refrigerate a live plant. And then, the name value is going to be dataObject dot itemName.
And instead of a vase, we have a pot type. So, we're going to say pot and that's equal to dataObject dot pottype. And again the quantity key will be equal to dataObject dot qty. And we also want to logItem method here so, I'm just 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 newItem 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 dot category, and we're going to go back to having a vase, which is equal to dataObject dot 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 who's value will start as an empty object. And so, we'll create that here. Flowers, with a 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 logItem 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 newItem dot 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 an, 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 dot flowers, square bracket key, square bracket stemName, which is the color value, equals dataObject 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 dot flowers square bracket key, dot 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 dot flowers square bracket key, equals an object.
And so this is going to contain a key value pair default, with a value equal to dataObject 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 newItem to the console so I can see just what object I've created. And I can use the log item method of the newItem object.
So down here on line 530, we'll say newItem dot 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 one one. 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 dash server, and that's showing me that on my localhost it's serving this content at port 8080.
And then over on my browser, I'm going to go to localhost colon 8080. And there is the website. I'm going to open up the console. And this will 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 logItem 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, I'll go back and look at line 478. Yeah, I just spelled it a little wrong. So, I'll fix that. Go back and reload. 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 logItem 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 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 who's value is itself an object.
And, within there we have an object built out for each of those stems. So, the Calla Lilies 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 that we selected there. And then, we have the logItem 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 built out all that functionality using object literals.