How To Create A Product Filter With Javascript | Js Project 4 Of 10

[Music] okay welcome back guys so we were able to uh build this product slider in the previous lecture or in the previous um project uh what we're going to do now is we're going to build a product filter okay so um basically let me show you what that is so i'll come here so this is a list of a product but it's listed in with the grid system or the grid has a grid layout and if i click on watches for example it displays only the watch and same for the shirt the gowns and the juries okay so basically that's like a filter um function on our e-commerce products and also we can get to search so if i search for watch it displays just the watch and same for the other products okay so um let me do shirts so sh i heart and as you can see we have the shirts so basically that's what we're going to um build in this um section and it shouldn't take us much time because we've already you know built the e-commerce um the product slider so some things we use and products that are similar to what we use here okay so let's begin i definitely want to try to be faster in this one okay so i may not talk as much okay all right so let's go and start writing an index html and first off i'll just minimize this and then i'll open this with live server so we have hello world and everything is nicely connected so i'll start by creating a header and within the header let's just add the hitch one so there's something you can do in html right when you submit a form like there is this thing that happens the form reloads and the page reloads along with it so in html we can do that by saying but we can disable that by saying return and then we say false okay but we can also do that with javascript and i think we saw that it's basically we just say prevent default okay so but i just wanted you to see how we can do that so let's add an impute i think i need to see what i'm doing here okay it's a responsive um project so let me add an input and it's going to be a type of text it's going to have an id of search and then i'm going to add a button that's going to have an id of btn iphone search okay so apparently i don't actually need this button so i think i was using it to test out something and it's actually here on the page okay but i don't need it i didn't use it for anything so i should probably get rid of it so but i i can do that later so we don't need the button okay so um and then let's come outside of this div and let's add another d with the class of filter box and it's the filter box that will contain all of these buttons here so filter box so it's just a tags that would go basically nowhere they would have a class of btn and this first one will have the active class okay and then this is where we're going to introduce us to something so we're going to use the um data filter property here okay um you should actually read about it if you have some time um it's let me just search for data filter so we can just see something about it to data hyphen filter okay okay i'm looking for the article by by mozilla data filter let me just see okay yeah this is definitely not what i need okay so maybe i'll change my search to data set property okay yeah so this is it oh this is definitely not what i need i can't find that article there's an article by mozilla that i want to reference but okay i can always check it out later and we can talk about it i don't want to waste too much time but it's a very nice article by mozilla that talk about the whole data filter property and the data filter attribute okay but let's just continue and we'll actually see how it's been used in this project okay so for here i would say data filter the first one right is going to the link is going to say all and then i'll just see data hyphen filter and i will set it to be equals to all okay so i think i'll just increase this guy just a little bit so i can have everything on one line and that's it so i'll just duplicate these um i think four more times let's see i can close this up so one two three so four more times and i'll just come here and do one two three four and if this one is going to say so they all cannot have the active class so let me although i don't even get to use the active class in this project but that's fine so this one is going to say watch right and this one is going to say watch as well okay so this one is going to say shirt and this one is going to say shirt as well same for this one that is going to say down and this one is going to say down and then this one is going to say jerry all right so let me save that and let's see what we have okay so you see we're almost there we are doing very nice and very okay so let me um i'll come outside of the header right and i'll create a main tag and that main tag is going to hold every other component so basically i'll just create a div with the class of store products store hyphen product okay actually i would create a d with a class of slide container slide iphone container and inside this div i'll create a section with a class of container and an id of stop products okay and it's inside of this section where we're going to have all of our products okay so let's go ahead and create the product so div dot store products store hyphen products and i'm going to give this one a class off okay maybe i'll just hold on for this or maybe i'll just give it a class of watch okay so that will be dot watch okay and then inside this one i'm going to create a product that is going to be a watch so let me just space this out so we can see a little so same way we created our products in the past we're going to add the image the um and the product details so what i'm going to do is i'm just going to copy it from the previous um project we did so that i'll save time okay so let me just copy the image and the product details so i'll ctrl c and then i'll paste that in okay so this is exactly the code we wrote for the previous lecture right so basically what we have here is we need to move this some more so basically what we have here is we have this div with store product and watch and then inside it we have the um the image and the product details okay so we're just going to duplicate this um a number of times okay for all the products we have so 12 products that we have okay so basically what i'm going to do is i am just going to copy and paste in the code because basically it's just duplicating and changing so i'll just paste in the code and then i would talk about it so let me just do that quickly and i would okay so i would come here i would come down and then i'll paste okay so let's just see what we have here right so inside of this section we have our products okay individual products right and so this is products one it has a class of stock products and a class of watch because actually a watch is inside and then same for the next one and same for the next one right and the next one we have a shirt a shirt a shirt and then the gown so i'm adding the classes here okay and we're going to see why we're adding the classes when we use javascript okay so let me save this and let's see what we have so basically this is what we have and let me just go to my styles.css file and let's make the image i'm just going to comment this out and save so you see we have the product here all right so i think we are done with the html yeah we're done with the html so we're going to add some styles for the css uh yeah so i love writing css [Music] so what do we do we start with the header so header so set the background color so for the css i think we can shrink we can shrink this a little okay and then we can expand this tab so this is the header we're styling already so let's target the h1 there's a typographical error here let me let me change that all right so that's product filter not profound filter so if i didn't make that bold i would not have noticed okay but that's fine and so let's target the form this form here okay so personally form and impute straight up give it a width of 20 ram then let's do some padding of 7 pixels okay so it's bigger it doesn't look like this 20 ram is enough i think something oh i know why i know why these figures are looking small okay so seven pixels and let's do border of none let's do outline and set it to none let's do font size and set it to maybe like 1.4 m okay so this looks actually very small so maybe i'll make the pad in one room okay so that's better and let's do border bottom so so border radius first of 5px um [Music] border on the bottom of 2px solid and what color we're going to use our secondary color so var all right so that's what we have and let's do okay so i think we're good to go with the form that's okay maybe the font size maybe 1.6 okay so that's better and bigger um so what do we do next let's target the oh the button we're not gonna use the button okay so we don't need it okay but let me just be sure i don't need that button okay yeah so i'm going to let me look at my index.html okay so i'm going to style this filter box button okay that's what i'm going to start now so i'll come here and i will say i'll just go straight to dot btn okay so you see it's overlapping on the um guy at the top so we first off let's even add some margin on the right so i can just say margin and then on the top i'll just add one ram on the left i'll say zero on the bottom zero oh the bottom can also benefit from one ram and the right can benefit from [Music] one ram as well so that's not really doing it so let me increase the margin for the top and bottom and i'll say maybe like three okay i think i'm just going to make this margin right i don't want to spend too much time on css and then for the form input i would add some margin on the bottom and i'll say two ram so that pushes this guy down and as you can see it looks better okay maybe i'll make this three pixels instead okay all right so um i'll make the active class active and i'll just change the background color to my primary color so i'll copy this guy yeah so i think i'm i think i'm done with this part of the project um yeah no need for this okay so what we're going to do is we're going to um style the stop product okay that's the product here and we're going to do that very fast because we already have the styles before so the only thing i'm going to add is i'm just going to um give this stop product a grid display so store hyphen products and i'll say display and set it to grid and then i'll see grid template columns and let's just do a repeat and inside of that repeat we're going to say auto feeds i will say mean max open a bracket and then i'll see 15 [Music] ram which actually maybe maybe i'll start with 20 ram so 20 ram and 1 fr so if you if you know what this means then it means you know grid system but if you don't then it means you need to learn grid system so this is what we have okay let me see if oh so for some reason this guy is strength to the middle okay i know why that is because of the container right so i'll come up here you know we have a container predefined container and i'll change this to 1200 and save okay it will spread out the products okay so that's basically why so for the products itself remember we don't need to write stars again all we just need to do is grab the styles from the previous lecture we did okay so i'm just going to do that very quickly so but first let me just add this stuff for store products store hyphen pro product singular and i'll say border on px solid and and let's do border radius of 3px let's do max width of 250 px so that's actually 25 ram i think and save so one two three four five six seven eight nine ten eleven twelve okay so actually wanted to be like four products per row but we can fix that first let's add the product details so i'll just deplete from the previous lecture i'll just copy the styles we added to the previous lecture okay in terms of product details and stuff okay so i'll just copy that and i'll just paste it in so it's going to add styles to all of the product details and i'll save so you see it has changed the style for this product details so but let's go back to our grid i think there's something we've not finished in our grid we need to set the column gap and the row gap so column gap i'll set it to 2 ram or 2 ram is ok and i'll change i'll do the same for row gap two ram doesn't seem like it's doing anything here so let me increase this to like maybe three ram so one two three four five let's see okay so 25 frame actually does the trick it displays its four products per row all right so that's fine so basically we are done with the css what we need to do is we need to add some logic with javascript that when we click on each of these buttons it will filter only the products that belong to the class okay but ideally it should actually be category but then the concept is the same okay you can always apply it to various um whatever so let me go to my script.js and let's begin so first let's add some variables and the first variable is going to be for all of our buttons i'm going to set it to equals let me just shrink this so i'm going to set it to be equals document query selector because we're selecting all the buttons so i'll say query selector all so i'll select all of the buttons right let's say dot btn and then i would add a function for my store products to store products and it's going to be also document.query so that should be yeah query select on all of the store products so let's see that store hyphen products oh that should be products not products so we're going to use a for loop to loop through all of the buttons okay and we're going to do something so i would see four and you know the drew so i i is equals to zero and then we say i is less than vtns dot length and then we'll say i plus plus okay so this is the beginning of what we're going to do all right so we're then going to target the current button so i'll say btns and then ith button let's add an event listener to that and basically we're going to add a click event and we're going to do e in here and this is what we talked about the other time when we wrote our html and we said that if we set the um on submit to return false it's going to prevent the default so we're going to do that with javascript also so we can compare so if i say something like e dot prevent default when you click on the a button associated with that form it will not reload the page okay so let's come here and start creating a variable so i'll create this variable called filter and i'll set it to e dot target and then i'll say that data set dot filter okay and basically what we are just targeting is we are targeting um this data filter we put here okay so let's see in our links where is it yeah so this data filter oh there's a mistake here it should be one i okay so i would have had some issues so thank god i came back to correct this so filter is one i okay so data filter equals to and then the difference so i'll save this and i'll come back here okay so that's basically what we're creating this variable for okay so let me see at this point let me try and console.log the filter so console.log and i'll just say filter have i haven't added an event listener i don't think i've added okay yeah so it's console.logs all the filters so there's watch they share grand jury and all you understand so that's basically what i just done every time i click on it it's you see that it's you know locks it to the console so basically that's how we target the data set filter this is how we do it okay so i'm going to comment this out and we can continue okay so we're going to create a for each loop right now so the way you do that is we're going to say stop product right dot for each and then let's do this and say products right is equals and then inside of this we're going to create an if if-else statement right so we're going to say if filter is equal to all so let's put that in quotes we want to do something right so what do we want to do if the filter is if we click on this all filter we want to display all of the products okay so we're going to say products dot style so i'm just going to add the property here dot display so that should be style dot display and i'm going to set it to be equal to block okay and i'll say else right now inside of this else statement i'm going to add another if else statement okay so there are two things i want to do so i'll say if i'll say products dot class list okay so i want to get the class dot contain okay and then i'll specify that the filter so what do i want to happen right i want this to be on a straight line so it's easily readable okay so basically i'm saying that if the product that's the the button you click on right you're supposed to get the class list with this filter here so i'm saying that if the product the class list contains the filter which is either gown or jerry or shirts right i want to do something so basically i'll just come here copy this and paste it in and then i'll say else i'll then paste that in but then i'll change this to none okay so this is very dicey but i think i can try and explain it so remember that when we clicked on this guy we were able to log it the data set to the console okay that's what we did here okay we're able to get the data set by clicking on this button now we are seeing that the stop products right we created it for each um loop and we're seeing that we're getting the store every product from or the list of products here we are getting the particular products right if the filter is set to all does if we click on this all here it will display all of the products right now we are now seeing that in the else statements we are now saying that if that so we're at actually targeting the class of the product okay not the not the h2 or the heading of the product or the name of the product we are targeting the class that we place inside the product so let me come here and show you so but if you like you can actually target the heading or whatever you want you can actually target more than one so the heading the category but for this particular project i'm targeting this class here so watch right let me come to my script.js and i'm saying that if the product contains a class right that is equals to any of the filter right so jerry gown shirt and all of that i want to display only that product or else i want to hide them do you understand okay so let me save this and let's come and see so if i click on watch it should display only the watches and shirts so let me just expand this a little so we can see so the shirts the gowns the jewelry and all displays everything okay so that's basically what we just did now the next thing we're going to do is we're just going to do for the search filter here such that when we type in maybe watch or whatever we have in our store it will search and display just that okay so that's um some code too we're going to write so let me just come here and add a comment outside of this add a comment and say search filter right and let's start by adding some variables to search so we get element by id and we're just going to get this search and okay so basically i think that's the only variable we need okay let me just confirm okay so that's the only variable we need right so i'll come down here right and i'll say search dot add event listener and what do i want to add here i want to say that when you start pressing the key so that's key up so key up and what do i want to do so let's do e and use the arrow function so first let's prevent default so e dot prevent default okay so now what we're going to do is i'm going to set the search value right and let's just say const and i'll say search value it's equals to search dot value and basically what i want to do to this is i want to take it to lower case so i'll see no dash that's not what i want i'll say dots to lower case and then i would then say i want to trim it so dot trim and that's it okay so basically we'll just need to create a [Music] we just need to create a for a for loop okay and i'll basically just say 4 so i'll say i is equal to zero and i don't say i is less than so our this timer is the stock product i want to get so i'll say store products dot length then i'll then say i plus plus so we've created the for loop like maybe two or three times or okay i think this is the second time so so i'll say if right um so basically what i want to do is i want to say that if top products dot class lists oh but not just store products the item so i would say if dot class list contains and then what am i going to do i would put in the search value so whatever you put in the search box right so let's just open a bracket and say search value so what do i want to do if it contains the search value i want to display so i'll say store products and i'm looking for the i item okay then i'll say that style dot display and i'll set it to be equal to block okay so you follow so basically what i'm saying here is that if the store product has the class list that is entered into the searched box i want to display such products okay now let's add the else block so else and for the else maybe what i'm going to do is i'll say else if because i want to add like its own this thing here property so i'll see if the search value is empty an empty string that's when the user deletes what he has searched for what do i want to happen what am i doing so if the user has you know deleted what is in the search field i want to get the stop product and display them back so i'll copy this and i'll paste that in okay okay then i'll then add my final else statement and this else statement is simply just going to be display none okay so and i think that pretty much does it so let's save okay and let's come and see what we've done so if i start typing watch you see that it displays all the watches okay and then if i delete the watches it displays all of the products okay so basically that's what this little bit um small bit of code event listener does to the product so basically we are done with our product search let me just expand this so we can see what we have so we click on this i think i needed to add some class here okay so the part of me that cannot afford to just see stuff that is not exactly the way i want it has kicked in so for the header i think if i give the header a class of container i think that should be sorted out okay oh no no not the header [Music] what i need to do is i need to put everything into a container class that's all the content of the header so the header starts here and and i think that should do it okay yeah so it does it so this is what we've built so far and we can search as well and then we have our product slider okay so that's two projects we've completed and i'm just going to take a quick break get something to drink and we're going to do the next project alright so thank you so much and see you in the next project

Channel: ZinoTrust Academy

Views: 11,410

Rating: 4.8782611 out of 5

Keywords: javascript, projects, product filter

Id: kkih4C80QTk

Length: 45min 12sec (2712 seconds)

Published: Tue Feb 02 2021