All right, let's finish up our card UI and add a little bit of functionality to it. Before we pick up our UI work, I want to fix a quick bug that I've accidentally introduced in the previous lessons. As you can see, when I'm trying to visit the app, there is a problem. Remember, we've set our cards to be purged or pruned after two hours of no use, and that's what happens. I'm starting a new recording day. My last card was definitely more than two hours old.

what happens. I'm starting a new recording day. My last card was definitely more than two hours old. It's been removed, and now there's a null problem because we don't have a card, and we're trying to access the total quantity on it. If we look at our card template, we're actually making the same assumption in two places that we are going to have a card. And a way to fix that would be to check that we conditionally have a card, and if not, set the value to zero. And then again, like Copilot suggests, we need here to check

and if not, set the value to zero. And then again, like Copilot suggests, we need here to check if there is a card before we try to access. Okay, and the UI is working again. So we have no cards, so we are showing the empty card, and the value here is zero, because since we don't have a card, we fall back to the zero value. All right, so let's add an item to create a new card and add the product to it. I'll add a couple more. Here we go. And so this is where we 've left things off.

the product to it. I'll add a couple more. Here we go. And so this is where we 've left things off. We've got the list of products, but looking at the design after this, we have the order total, we have a call out and the confirmation order button. So let's start with the order total. Fairly easy, a flex container with justify between a line items center. And here we have a slightly bigger font with the bold weight, I imagine. Let's try that. So we'll go in an active

slightly bigger font with the bold weight, I imagine. Let's try that. So we'll go in an active cut. And the an ordered list here is our product list. So let me collapse that. And after this, here, let's have a flex container. And remember, I said justify between and items center. And for good measure, let's add a gap of four. So the elements don't touch each other. And inside that flex, we're going to have ordered total and then the formatted price. So order total. That's the first

flex, we're going to have ordered total and then the formatted price. So order total. That's the first element. And the second element is the cards. Is that a thing? I'm not quite sure we have that yet. Yeah, I thought so. Crow pilot is just trying to anticipate how we should call a useful method on the cards model, but we don't have that yet in place. Okay, so let's go with the flow. This is actually a pretty good method name. So in my cart model, here we have total quantity. And now

is actually a pretty good method name. So in my cart model, here we have total quantity. And now I regret not calling that total items count as copilot was suggesting to make it clear that it's for the items. And you know what, let's change that real quick, total items count. And I'll do a quick find and replace for total quantity. This is just the two places. So I'll select both and go total items count. That should work. I can't verify the UI because it's currently broken.

total items count. That should work. I can't verify the UI because it's currently broken. But below this, let's now have our cart formatted total. So public function formatted total, countdown copilot. And here we could do all in one line, but let's make it a bit more readable by having a total variable. And I'm not going to use reduce, but I'm going to use these items, some, like we did before, but we are going to have FN and for each item, we are going to want to

some, like we did before, but we are going to have FN and for each item, we are going to want to multiply the product price and the quantity. But as it's always getting wrong, it is price_sense that we want to multiply. And now because this is a formatted total that we want, we can return number currency. And we want the total that we've calculated just above divided by 100 in the USD currency. And this suggestion that keeps coming makes me think that maybe I'm making a

in the USD currency. And this suggestion that keeps coming makes me think that maybe I'm making a mistake, but it seems to be working. Let me know in the comments, if you know better. All right, I think that should be working. And because we already trying to consume this formatted total method on the front end with a bit of luck when we check the browser, the UI might be back and working. All right, let's refresh the page. And yeah, it is back. It's working. And the order

working. All right, let's refresh the page. And yeah, it is back. It's working. And the order total is 2150, which looks correct to me. We don't have the ability to increment and decrement product. This is coming next. So for now, let's go and update the quantity manually in the database, like we've done before. But soon we'll be able to do that from the UI. All right. And let's refresh the page and see our grand total. It's definitely working. Okay, so here for the spacing, there's

the page and see our grand total. It's definitely working. Okay, so here for the spacing, there's multiple approaches, we could have padding top and bottom around this. But we could also have margin top over this over this over this. Or we could have all of these items wrapped in a flex container that sets a gap. I think I will do that. So back in the active card, we have the cart items, we now have the order total and the upcoming sections. And I want to wrap all of these in a

we now have the order total and the upcoming sections. And I want to wrap all of these in a flex flex curl gap four, I think will be good. So let's save that. And you can see that it's created some gap. Let me quickly enable the dev tools here. So you can see the gap created here. And it's going to add a gap between each element. I think I need it to be bigger. Let's try gap eight. And this might be too much. But I think it's going to work all right. Next, let 's make a

And this might be too much. But I think it's going to work all right. Next, let 's make a formatted total styles a little bit bigger, text to XL, I guess, and font bold, most likely. How does that look? Not bad, actually. I think we spot on. All right, let's continue with the call out panel here. So the next section here, we're going to have a div with the background of rows. I want to say 300. And let's add padding for for now. So let me scroll down inside of

rows. I want to say 300. And let's add padding for for now. So let me scroll down inside of there, we'll have a paragraph tag. This is a and then a span, carbon neutral. I think there's a dash in between and then delivery. And you can see that the text is not center aligned. We need to make this bit bold and the background color is way too dark. Nothing of this is a problem. That's very easily fixed. I'll try BG rows 200. Let's go text center. The span here will have a class of

easily fixed. I'll try BG rows 200. Let's go text center. The span here will have a class of oned bold. And that should be much closer to what we're trying to achieve. Who ops, it looks like BG rose 200 doesn't exist. I should have known because it jumped to the start and it doesn't have the swatch. There is BG rose. If I show you 100 and then 300. So let's go 100. It's most likely the right one. Okay, that's better. I think it needs a little bit more vertical padding and rounded

right one. Okay, that's better. I think it needs a little bit more vertical padding and rounded corners. Actually, I might be wrong on the padding, but definitely rounded corners. And we need the tree icon. And also, it almost looks like it's still too dark. And the panel color is the same color as the background here. And yeah, now that I see it, it's matching. Okay, so let's trim it down to 50. And we're going to add rounded LG. And thank you copilot for looking after me. It's rounded LG.

And we're going to add rounded LG. And thank you copilot for looking after me. It's rounded LG. All right, this is now looking good. So let's go try work out the icon. I will go in the challenge files and try to find the cabin ritual. That's the one. Let's go open the code for that. And we're going to grab this head over to our icons here and add, I'll call it tree that blade that PHP. I guess it should be called carbon neutral, but that's a bit too long. All right. And like I did

I guess it should be called carbon neutral, but that's a bit too long. All right. And like I did last time, we'll get rid of the height and width attributes and set the path feels to be current color for both. And then like we did for the delete button, I think we're going to merge the class attributes so that we can pass custom classes on the fly. And I just realized that this is overkill because the icon is only used once in this project and challenge. But typically,

overkill because the icon is only used once in this project and challenge. But typically, when you have icons, it's a good idea to be able to change the height and the color of it. So this is what you get. All right, so let's go back to our call out panel. And I need to add a class here. I need to add flex and gap to an items center, which is actually three classes. The reason I'm doing this is so I can have the paragraph tag and our icon side by side. A cop ilot knows exactly what

doing this is so I can have the paragraph tag and our icon side by side. A cop ilot knows exactly what we're trying to do, except the color is not going to be rose 500, but it's going to be text green instead. Okay, that should do the trick. And it mostly does accept the cent ering. We need to justify center here. And I might get rid of the text center on the actual text, because we can let flex handle this. So instead of text center, I will go justify center. And here we go. This is

let flex handle this. So instead of text center, I will go justify center. And here we go. This is now a good looking call out banner. How we doing with the spacing? I feel like it's a bit too big. And actually, no, I think that's all right. So let's continue with the button. It definitely shares some styles with other buttons, but we'll duplicate a bit of styling here. It's not the end of the world. We can always refactor later, pretend we are going to ref actor later and forget

end of the world. We can always refactor later, pretend we are going to ref actor later and forget about it. All right, so after this div, we have one more section. So yeah, let 's have a button. This might be wrapped in the form, but let's start with this and confirm order is what it says. Yep. So let's quickly add some styles, text, white, bg, rose, red, sorry, rounded, full, px, six, py3. How we doing? Well, not bad at all. I'm going to make it a little bit more chunky.

six, py3. How we doing? Well, not bad at all. I'm going to make it a little bit more chunky. Let's go py4. Yeah, that's a bit nicer. And let's compare what we've got with the design. I'll try to bring both side by side. All right. And honestly, not too bad. This is not pixel perfect for sure. We have a bit more spacing here. But honestly, I think I'm quite happy with that. Maybe just we can make the close button a little bit bigger. And the color looks to be different.

Maybe just we can make the close button a little bit bigger. And the color looks to be different. Yeah, it might be a slightly darker color. So let's try and fix that real quick . So this is going to be in our product list. And we have this icons delete. Maybe let's go size three. Did that change anything? Let's try size 3.5. So maybe the padding is actually three px. And I'm really pixel pushing, which I shouldn't do. But yeah, okay, that's slightly better. I might go back down to size three with

I shouldn't do. But yeah, okay, that's slightly better. I might go back down to size three with the bigger padding. Yeah, okay, that's good. And so we want to change the color. I feel like this is a bit too dark. We have text rows 400. Yeah, we do. So we should also make the border the same color, I guess. And yes, okay. I'm gonna call it good enough. It's definitely time to move on. And so before we look at the confirm order model, we have a bunch of things to fix in the next

And so before we look at the confirm order model, we have a bunch of things to fix in the next lessons. We want to add the delete functionality here and set up the increment, decre ment, and update the UI too much. For example, here, I don't see that this item has been added to the cart. And if I click add to cart, it adds a quantity that works. But we should see the quantity. And that button should only show add to cart if there is no quantity in the cart. Otherwise, it

quantity. And that button should only show add to cart if there is no quantity in the cart. Otherwise, it should look like this plus minus, we got some work to do. All right, let's tackle that in the next lesson. And while we are going to do a little bit of telling CSS for the styling, I'm definitely switching shirts back to Laravel, because we are going to be working on the backend a lot more. See you there.

more. See you there.