Filtering Cards

[00:00:00]
>> Kevin Powell: So the next thing that we need to do now is we need to be able to filter the cards based on what's actually being selected here. And to be able to do that, that means we need to know what these tags are on all of them. When we created those cards, we come down a little bit.

[00:00:14]
Each card has our tag list and the tag list we have these data edible or the data season that's coming on there. And this is where I said if you did true and false, it would have to be a little bit different, cuz we're just going to look for a match for what's coming through on the current seasons.

[00:00:28]
To be able to get that for each one of my cards, when we did the const of cards at the top, it was a query selector all so it's getting all of the cards. So to be able to filter the cards, what we're going to do Is we can come here and create a new function, called filter cards and in our filter cards here we wanna go through every single one of the cards.

[00:00:49]
So i do cards dot for each and when we do the for each it's we have to bring it. Inside of there, I'm gonna put parentheses again, and just writing card and then say is equal to, or not equal to, but we're gonna do the the fat arrow, we're doing a function there, so for each card we're gonna do something to it.

[00:01:11]
So if I just did a console log card, and we looked at our console, it should give us, list, we're not doing it. Let's just come here, filter cards, we just get a list of all of our cards coming in. So obviously, we don't want just a list of all the cards, we wanna get all of the different pieces that are in there.

[00:01:34]
So for each one of those cards, I wanna go into that card, and I wanna find the season. So the season is going to be the card.querySelector and data season.
>> Kevin Powell: Which is this, we need to do the attribute selector here, so we had our data-season so it's gonna go and find the list item that has the season on it.

[00:02:00]
And then from there we can get the data set, data set of the.season. Whoops, not what I wanted, dataset.season. And I'll make this a bit bigger so we can see it a bit clearer.
>> Kevin Powell: I'll just full screen it for a second. So we're gonna go in and look at the card, find the element that has a data season, and then get from that.

[00:02:27]
The other thing you could do here is also like get attribute and get the value of the attribute. But if it's a data, you can just use a data set if you have a data attribute. So we're getting the value of our season from there. It's a bit repetitive in the way that it looks, but it gets the job done.

[00:02:42]
And then we can do the same thing for our edible is data-edible, and the data set we're getting the value of the edible from there. So now, if we console blog, our season and our edible. We can go and take a look, and you can see right now they're all we follow toxic fall edible, toxic summer edible.

[00:03:13]
We're getting all of that information from each one of the cards. So that information is being stored now, we know what the values of those are. So now, we can actually filter against those. So to be able to filter through them, the main ideas that we wanna be able to hide the ones that don't match and show the ones that do match our filter.

[00:03:32]
So to be able to do that, the easiest thing to do is basically, we can say const matches season is equal to. And we wannna check to see if the season that we've got here matches the season that we have up here that's been selected in our filters.

[00:03:53]
So to be able to do that, we can just say current filters.season is equal to the current season. And const matches, edible is equal to current filters.edible is equal to the edible. So if the value coming from our current filters is matching the value that we pulled here, they're the same, then it matches, and that's true, and if not, one of those can be false.

[00:04:30]
So the next thing we wanna do is show and hide them, so we can say if the matches editable, and matches season, cuz we need both of those to match. If one of the filters doesn't match, we wanna hide it. So if both of those are actually matching, we can come in with a card.hidden is equal to false.

[00:04:56]
And again, there's a more like you could do this without the if else, I just find it's the clearest way to do it. So I always do this for simple if else statements, card.hidden=true. And this should feel like it should work, we're almost there, it's basically working actually.

[00:05:15]
The functionality of this should work except here. Well, yeah, the filter cards, we don't wanna be doing that there. We wanna be doing that when we update our filters, but we'll check this just really fast to see if it's actually working. But the problem that's going to happen with this right now is if we're putting the hidden on anything, it's not actually gonna hide.

[00:05:37]
And this is a really annoying thing in my opinion with CSS. Cuz if I come in and we'll do it manually, just really fast here, let's go grab this first card, which is the chanterelle, and let's throw a hidden attribute on there. It's not hidden, it's not gone, even though, if we come and take a look here and inspect on that, and I find that card which is there it has the hidden attribute.

[00:06:03]
And if you look at the hidden attribute, if we go down far enough in here we should find, maybe I'm gonna miss it. I could filter by, I don't know if the filter would work for selectors, I don't use it too often. The hidden should come with a display non on it, but the display non is not gonna work, because it has not specifity on it.

[00:06:23]
Basically, and because our card has a display greater or display flex, it's overwriting on it. So generally, in most projects I work on, in utilities and attribute selector of hidden, just a display of none, and now that first one, they've all disappeared, cuz the way I set it up.

[00:06:47]
So all of them have the hidden attribute on there right now, and they've all vanished. And that's actually, I think, or it's not gonna update now with these, but, yeah, it didn't match the filters we had. So they all got the hidden on there, and they've all disappeared.

[00:07:00]
This is a really handy reason for layers in my opinion because this isn't the highest specificity selector, it's not bad It's an attribute selector. But because it's coming here within the utilities, my utilities is at the bottom, I know anything that gets the hidden on there. We'll get a display none, and that's just a really convenient way to be able to hide things along the way.

[00:07:20]
Show and hide instead of toggling a different class or doing something else, just toggling hidden. It's so easy to do because, again, in the JavaScript, you can just say hidden is true or false, it adds or removes the attribute. You could also toggle the attribute, there's other ways of doing it, but this is a nice, simple way.

[00:07:34]
The problem, there's two problems right now, though. One of them is, if we have it as all, it never matches, so none of the filters match all. So that's why right now it's false, all the cards are getting false on there, and I'm just running it here. We don't wanna filter our cards now, we only wanna filter the cards when we actually make a change.

[00:07:52]
So let's fix this by getting the filter to work at their appropriate time. So we'll take that out from here and here when we're updating the filters after the filters have been updated, we don't need to keep this console log there. We want to filter the cards. So now you can actually see the cards are back in.

[00:08:09]
If I say spring, they're probably all gonna disappear. But if I say spring and toxic, we actually get two showing up, because those two match these parameters. Or if I go to summer, that's there, edible, so it's almost working. The problem right now is if I choose all, anytime, all is selected, it fails, because fail the down here, the matches, edible matches season only ever works if it's exact matches.

[00:08:36]
And not if we have the all that's being selected. So, you can either do this up here or do this within the if and else down here. So if it's matches edible and matches season. And so the easiest way to do it now is here we're looking for the matches edible.

[00:08:53]
We could say if it's matches edible or with the two pipes there or if our filter. So currentFilters.edible is equal to all. So if we just do that, it should work, we can already see we have some stuff there. So if we're doing the edible one right now, so we have that on all, I should be able to filter by the summer, even though we have the all here so it hasn't completely broken like it was before.

[00:09:29]
And then we could do the same thing. I'm just gonna put this on another line so we can see it all, or I'll just scroll over. So then the same thing here matchesSeason, or if the currentFilters.season is equal to all. And there we go, prettier, broke it over multiple lines for me, so it's a little bit easier to look at.

[00:09:52]
So we're seeing if it matches the current filter we have or if the keyword all is there. So spring, we get the spring, if I, well, the spring is not the best one cuz they're all, but there we go, we get these coming in. We can change that to only toxic, only edible, or we can get all of them.

[00:10:08]
Or if I put this to toxic, I can then go to all here, and we get all of them coming through.