Handling Zero Matches

[00:00:00]
>> Kevin Powell: Now there's one thing that we don't see right now because my screen is a little small. But if we were to go full screen with this, that we might notice, I used the autofit no, it's good, sorry that if we go here and I choose that I want the summer, that my one card is stretching super large.

[00:00:21]
Or if I do the spring same thing, the cards are really big. And this is because of some advice I gave you, saying that Auto-fit is what you always want, and Auto-fit is almost always what you want. It's definitely what I use 90 to 95% of the time.

[00:00:37]
But in a situation like this, where you potentially could have less content in it. If there's less content, that content, it won't make empty grid cells. It's just gonna make those cells take up as much space as they can take up. That's the Auto-fit. If instead of doing that, we actually go to our styles here.

[00:01:00]
And we'll find that Auto-fit. If I change this from Auto-fit to Auto-fill instead. Let me go full screen again. When we don't have a lot of items, it just creates empty cells instead of that are fitting in that same way that it would work before. So if you have all of them, it works, and you have all the grids like you would expect.

[00:01:22]
But then when you do come down to having less than four, and you won't see this impact unless there's less than four or less than three, depending on how you have how wide your screen is. But then you'll end up with the empty spaces here. This depends on what you prefer in this situation.

[00:01:37]
It's one of those rare ones where I do feel like Auto-fill is the actual better option. So if you are gonna change it here, I would come here and also change the name of it just so it matches the two of them. If you don't mind the card stretching and you think you prefer that layout, then stay with the Auto-fill.

[00:01:53]
But I thought this is a nice example of when Auto-fill actually does come in in handy. And just if you do run into that one situation, knowing that the alternative one is there and that you can have one or the other depending on the type of content you have, and with dynamic content.

[00:02:06]
I would say this is the one time often where Auto-fit makes more sense, whereas if you have set content, that's just not changing, most of the time, I find like Auto-fill is the one that I lean on. If I change it all there, of course, I also have to come in my HTML and I need to change this to great Auto-fill as well.

[00:02:24]
It could be useful to keep the Auto-fit, duplicate it and have an Auto-fill and an Auto-fit, then you can use the one you need in any situation and just have it there waiting for you. But I would just leave it like this, because we don't need it, and having unneeded CSS is one way to blow file unnecessarily, so we'll keep it with what we need for this project.

[00:02:43]
But just know that you have those two options if you need them.
>> Student: Why do you use the hidden instead of visibility hidden?
>> Kevin Powell: If I remember right, let's just do it here really fast. So yeah, visibility hidden. Let's do it on my card. Its all of them.

[00:03:03]
>> Kevin Powell: .Card, visibility, hidden with visibility hidden, the problem is it does hide them, it takes them away visually, but they still take up room in the document. So it I don't have a lot of good there are times where visibility hidden can be useful if you need especially if it's something that needs that space to come in or out of.

[00:03:28]
But because it reserves the space for it, even while it's not there. And the hidden attribute, again, all it's doing is a display, none. So we're just literally removing it. So also from an accessibility point of view, if somebody were to filter it. Actually, I think the visibility affects the accessibility tree too, but I'd have to look into that.

[00:03:48]
But, yeah, that's the main thing. If you need to reserve the space for it, visibility hidden, if not displayed on or the hidden attribute. Whenever you have filters like this, you'll definitely run into situations where nothing matches. There we go, so in the spring, nothing is edible, and this is one of the drawbacks of the CSS only solution, because if this happens.

[00:04:08]
What are you gonna do to tell like it's just weird that there's nothing there you it feels broken more than it feels like something else. So in a situation like this, I find it useful to come in just with a very quick, and I'm just gonna copy it from the lesson here.

[00:04:25]
But just having a div or a paragraph or something that's saying that there's no matches for that filter. And you can include that. I'm just gonna put it at the bottom, all the way down. I should have collapsed my cards. It's a really long code block cuz we have a lot of cards there.

[00:04:46]
>> Kevin Powell: I can see it at the top, that's my Auto-fill. So right after that auto fill probably, I can put this in where it's saying no-matches for these filters, and I'm including the hidden attribute on there to start with cuz I don't want that to show up as a default, right?

[00:05:02]
If I don't include that here down all the way at the bottom of my filter here, I'd have the no matches. So it's putting the hidden on there. It gets a display none, and it's gone. And then what we want to do is, if the user comes through and they get spring edible, we can show that when they run into this situation.

[00:05:21]
So to be able to do that, we wanna jump back over to our mushroom filter right here. And the first thing we want to do is we do need to find, we need to be able to toggle that. So all the way at the top here, we can come and say that we have the cons of we'll call it no results message something very clear that we can do and use query selector once again to find that.

[00:05:43]
In this case, I just had the class on there. If you have an ID or something else, you can select it. If we take a look, we have the class of new matches. So, I can know matches right there. Now there's different ways that you could approach this.

[00:05:58]
But for me, the easiest way to do it is one summary goes through the filter here. We wanna check if anything matches. So in our filter cards here what we could do is we could come in and say, we can get that let has VisibleCards is actually gonna be equal to false to start with.

[00:06:17]
As a starting point just cuz it's gonna make it a little bit easier than toggling it in another way. And then what we can do is, when we get this, where all of these things are matching, so we're saying it's false by default. But then in this situation, where we actually do have matches, so we're showing our card, we could then say that has visible cards is equal to true.

[00:06:43]
So if we do that, and let's try that again, spring and edible. So now let's come here really fast, and just at the end here we can just console log that console log has visible cards, and we should be able to check, inspect, go over to our console.

[00:07:03]
And when we switch Spring, we can see the true is coming in. There's 11 visible cards coming right now. So it's giving us how many we have. So let's go to Edible now. And we're getting false for all of them. Whereas before, we were getting one false in all of them..

[00:07:18]
But now all of the cards are returning false here. So we know that this is actually working properly in that we have no visible cards. So then instead of doing this, what we could say is, if has visible cards are no results noResultsMessage.hidden = true, else then the noResultsMessage.hidden is equal to false.

[00:07:50]
And if you wanna use a ternary operator or something a little bit more concise here, there's no harm in that at all. But now it should be that if we do spring let's, yeah, spring we have our two that are there that's fine. But if we go over to edible, because there's nothing matching that our has visible cards is false.

[00:08:12]
So it's going and it's saying that it's removing that hidden attribute from there. Then as soon as we make a change here, and I say this summer, and we're getting our summer ones in. We have visible cards, so there is true that's getting returned to here. So then we're turning that back off, over to hidden right here.

[00:08:32]
One thing you could also do here is the styling of it, just if you wanted to, if I come to the edible in the spring, where we don't have any thing. It is a little bit small. So if you want to fancy up the styling of that or do something a bit more with it, by all means you can.

[00:08:46]
I'm just gonna leave it like that for now, but you can make it larger and more obvious what it's actually, just to make sure users actually see it, if you'd like to.