Tailwind & JavaScript Project - Products Filtering UI

Key Takeaways

what's going on guys so it's been a while since I did any kind of little vanilla JavaScript project and I know that a lot of you guys like these projects especially those of you that are are sort of in the beginner range so we're going to build this product filtering UI with tailwind and vanilla JavaScript and this was actually just added to my 20 vanilla projects uh course so if you want to check that out you have a bunch of projects here some demos so I'll leave that link in the description um but basically we're going to create this the layout with tailwind and we're going to add some functionality here where we can click add to cart and it'll increase this cart number right here so you can say I'll add that one this the Xbox and then of course if it's added I can then click remove from cart so that'll be the first thing we do then we're going to filter based on categories so if I select cameras it's only going to show me the cameras smartphones it'll show me you know cameras and smartphones and then we can also search project uh products from here so if I start to type play you'll see PlayStation Sony um now one thing we're going to do is make it so if one of these are checked like cameras and you search here it's only going to search what is checked off so notice the PlayStation isn't showing because I have cameras checked off if I check games then the PlayStation will show all right so yeah it's I mean it's a simple produ uh project in terms of functionality but I think that it'll help you out with you know your vanilla JavaScript skills especially when it comes to things like high order array methods and so on all right and this is the code pen I'll have the link in the description I'll also have the link to the vanilla Web projects repository and you can find this project where is it right here product filtering and this is where you can get the images as well all right so let's get started all right guys so I have the final project open here so we can kind of use it as a reference and I can explain what we're doing and we're going to do this from scratch so that means typing out the HTML with the Tailwind classes and I know some of you might not be interested in that so I'll have the timestamps so you can just jump right to the JavaScript if you want but you guys that that know how I do things I you know I like to just start from absolute scratch now I do have a blog post on my website it as well if you want to get any of the code from here we're going to grab the array from here cuz I don't want to type out you know all these products so we will do that um but yeah I just have I have vs code open and I just have a product filtering UI folder with an images folder with all the images and you can get the images from multiple places either from the repository from the code pen you could even get it from this you know vanilla Web projects demo site or if you just want to use your own images that's that's fine too okay so that's all I have here so let's create an index.html to work with and let's also create a script.js and we're going to go I'll just close this up we'll go to our index HTML and let's create a boiler plate I'm just going to say text store for a title now since we're using Tailwind we do want to include the CDN so if you go to Tailwind CSS and go to docs and click on play CDN you can just grab the script tag here and we can close that up and then just put that in the head all right and then we'll just put hello here and then I'm going to be using the live uh live server extension so I'm going to say open with live server and there we go all right now like I said we're going to do all the HTML all the Tailwind stuff and I'm going to kind of explain the Tailwind classes as we go just for those of you that are are new to Tailwind um so let's start off with the Box body cuz we do want to have that dark gray background so we're going to have uh BG let's say bg-- gray and we're going to do 800 and we're going to make all the text white so use the text white class okay so inside the body we're going to have um the nav so basically what we're going to do is build this first the nav which is responsive so as you can see it's it starts as a flex column and then turns into a flex row same with the the sidebar and the main area here as well as the column so it will be responsive so let's add the nav tag here and we're going to do BG D gray 900 for that I'm going to add a little bit of padding so P4 and then margin bottom will'll do six and then inside that let's have a class of container because we don't want the navbar to extend all the way on both sides so we'll do a Max width of 6 XL and let's move everything to the Middle with MX Auto we're going to use flex box here and we're going to like I said make it a flex column to begin with and we'll add some spacing with gap eight and then let's uh align items center with items Center okay now where we have Flex column I'm also going to add on small break points and up then I want it to turn into a flex row okay and then inside the div we're going to have a search area and we're also going to have the cart icon so those are the two things that we want to create here so for the search let's create um Let's do an uh let's do a div to wrap everything in I'm going to give it a class of relative that will just position it relative and then with full or W full and that will have an input I'm going to give it an ID of search which we'll use in the JavaScript for classes we'll do BG gray 700 and then rounded Das full let's do padding two let's do padding on the left 10 and then I'm also going to add Focus because when I click inside of it I want it to to extend so I'm going to do with full on Focus all right so if we take a look at that you can see when I click in here it extends all the way all right and let's actually add a placeholder as well we'll just say search products okay and then I want to have the little search icon inside of it now that's an SVG so I'm just going to paste that in and again you guys can just copy it from the code pen or whatever and it does have a few classes it's absolute within this relative div and then this is the positioning left two top half and we also added a translate on the Y AIS to put it where it's supposed to be okay so now we have the little search icon now for the cart icon so right here we're going to have a div again this is going to be relative and we're also going to just align text Center and then the SVG for that I'm going to paste in which is the little cart icon okay so now you can see we have the little cart and then underneath the SVG is where we want to have that little red circle with the number of items in the cart I'm going to use a small tag for that and give it an ID of cart de count okay oh and one thing I forgot to mention is that the code between the code pen and what I'm doing here is a little bit different than the code from the repository that has to do with the course um it's the same functionality it's just some of the classes are named different some of the um like this ID I believe is is camel case in the repository but I changed some things up just to be more consistent and make it a little cleaner so I just want to mention that um so cart count then we're going to have some classes like BG red 500 okay we want it to be a red circle so we're also going to add rounded Das full then let's do text I'm going to make it extra small and then text D excuse me text- white and let's see we want it to be positioned absolute and then for the positioning we'll do after absolute minus top-2 and then minus wr-2 and then we'll put a zero in between the small tags okay that's not right uh what am I missing I think I'm oh I'm missing the width and height so right here I'm going to put W-4 and h-4 and that should yeah so that looks good all right and that's it for the Navar now we want to do the main area so this right here which will have the sidebar and we'll have the the main products so let's go under the nav all right and we're going to use a main tag to wrap everything here I'm going to use flex box we're going to start off with a flex column and we'll do MX Auto uh container and Max width for this we're going to do six uh 6 XL all right and then I just want to make this responsive by adding on medium break points and up then we want to do a flex row okay so in that main then we'll have the div for that wraps around all the the categories that we're going to do space- y4 that just adds some space on the Y between all the elements on the Y AIS padding -2 let's do with full and um we're also going to add in a Max width here but I'm going to make it absolute so I'm not going to use like 6 XL or 4 XL I'm going to put brackets here and we can put in any value we want we're going to do 10 REM okay then we're going to have um two headings so this one we'll do H2 and text- 2XL and say category uh sorry not category filters and then underneath that we'll do an H3 with text XEL and that will be category okay so if you want to add some other filters here in the future you can do that as well now we're we'll have an ID of filters D container which we'll use in our JavaScript and then let's do a class of text- XL and a class of space dasy2 just to add some space in between each one so each category will have a div with an input that input is going to have a class of check and it's going to have an ID of whatever the category is in this case cameras and make sure you change this to checkbox all right and then the label underneath is also going to have for the four attribute cameras and then cameras inside here as well so it should look like this all right now we're going to take this div and we want four of these because there's four categories and we just want to change the names here now a little tip I'm going to just hold shift and grab this cameras and then do command or control D that selects the next one and then again for the next one and I'm going to change it to smartphones now notice how I kept the casing so small s small s large s the reason it did that is from an extension that I use called multiple cursor case preserve all right so if you guys don't know about this it's a very handy small extension um it it you know makes it so you don't have to go back and change all the cases when you do something like that so comes in handy so the next one is what's the next one games okay so we'll do games and then let's do the last one which is going to be um what is this one this is televisions oops we want to select all of these so televisions okay and then it should look like this all right so now we want the products wrap which is going to go under the last div here still within the main tag so products wrapper now ultimately this div that we're going to create is going to be empty inside because the products are going to come from JavaScript right we're going to put them in there um much like much like what would happen with react or or you know any framework that uh is like a single page application but for now we'll just hardcode some some products just to kind of make sure looks okay before we jump to our JavaScript so let's do a div with the CL U the ID of products Das wrapper and then we'll do some classes here so we want width full we're going to do a Max width of 4XL we're going to do mx- auto and then we're going to use the grid classes here so grid and then grid calls two to begin with and then for Gap let's we'll do six and we're going to add Place content Das Center and then for padding we'll do four now if it's larger than a certain size the screen I want it to have more columns so let's put right here small colon then we'll do uh grid ds-3 and then on extra large we'll do grid calls 4 all right and like I said this is this will be how it is in the end because we're not going to have anything in here but for now we'll hardcode uh our products now before I forget let's just add right above the body here let's do script source and we just want to point to our script.js all right so within this div we're going to add some hardcoded products we won't do all of them we'll just do like three so each one is going to be wrapped in a class of I and then we're also just going to do some spacing so space Y2 all right so this is the first item um we're going to have a div with the class of BG Das gray and let's do 100 so very light we're going to use flex box we're going to justify to the center we're going to make this relative because we're going to position the add to cart button within it and then overflow hidden and let's do uh we're going to add the class of group and I'll show you why in in a couple minutes we're going to make the cursor a pointer when we hover over it um what else do we want let's do border and then I'm going to make make it rounded Dash Exel okay and what we're looking what we're talking about is this right here okay around the image So within that div we want obviously we want the image so let's say IMG and then and we're going to give this a width full we're going to do height or h- full and then we're going to do object D cover for the image class and then for the source let's just do slash images and then this is going to be the PlayStation and let's just make sure that shows up okay there it is now the button is going to go in here the add to cart so let's say button I'm going to give this a class of status because we're going to be changing changing it based on the status based on if it's in the cart it'll either say add to cart or remove from cart so status is not a a Tailwind class and then let's do BG Das black we're going to do text- white position it absolute within the relative div the positioning will be uh bottom zero left Zer and right zero so we're basically sticking it to the bottom and then text- Center let's do padding on the Y AIS too and the way this is going to work cuz we want it to be hidden to begin with and then when we click on it we want it to slide up so what we can do is add the class of translate Das y- full and what that does is it'll it'll bring it out of view it'll basically push it down and then I want to add a transition uh transition which will make it smooth if I decide to animate it all right so let's say add to cart inside and now if I go to the P to the page we can't see it because I I use Translate Y full so basically it's down here so what I want to happen is when I hover over this image I want it to pop up so I want to change that Translate Y to zero which is its original position so what we can do is say group hover because remember I use that group class so now when I hover over this element then whatever I put here will happen and what I want to happen is Translate Y zero which just puts it in its original position so now if I hover over it there it is it comes up to its original position so I mean Tailwind is so powerful all the stuff you can do without having to write any CSS at all zero so underneath that let's see we're going to go under um under this div then we're going to put a paragraph and I'm going to use text XEL here and this will be the product name so we'll say PlayStation 5 not six at least not yet and then let's do a strong tag and we'll put the price oh PlayStation 6 probably will be 4,000 and that's it so now I'm just going to copy that that item so this item class this item div and we'll just do two more for now just to make sure it looks okay so we'll paste those two in let's see for the next one we'll do uh Samsung Galaxy and we'll change this to Samsung Galaxy and price doesn't really matter we're not keeping this and then this one what do we want next we'll just do to uh Sony A7 which is a great camera by the way so Sony A7 camera okay so let's make sure yep that those look good okay if I make it smaller so this would be four because it's extra large then three and then on smaller it'll be two and you can mess with the classes if you want you know to change up the grid and the columns but that's pretty much it our HTML is done so now we can jump into our script JS the fun part now we do need our data so that's the first thing I want to get and we can get that from uh the blog post or any any of the code resources the code pen the repository although I would suggest the code pen or this because in the repository this is called uh type instead of category so we want to make sure we're on the same page here so let's grab those and paste that in now in in a real life project this would most likely come from some kind of API that's connected to a database but for now you know we're just going to use hardcoded Pro uh products and I might continue this I might even do a react version or a spelt version and um you know have create some kind of backend API if that's something you guys are interested in let me know so next uh as you can see here we're going to select the Dom elements so let's come down under the products and we'll say select Dom elements so let's get the products wrapper so products rapper and that's an ID so we can say document and you can use either query selector I'm going to use get element byid and that has an ID of products- wrapper all right so we'll copy that down a few times then we want the checkboxes which are the categories so let's say checkboxes now there's multiple checkboxes so we're going to use Query selector all here and we want to select all of the classes of check then after that we want to get the filters container so let's say filters container and and that has an ID of filters Dash container okay and then we also want the search input so let's call this search input and I believe yeah that's an ID of search so we use get L and by ID and then one more thing we need is the C count so cart count and that has an ID of I believe it's cart Dash count so we have our Dom elements now I'm going to initialize the cart item count which is going to be you know that number up in the corner so we're going to use let here because we'll change it later on so let's say cart item count don't call it cart count because that's what we called the element and we're going to set that to zero to begin with then we also want to initialize the product element array which is going to be an array of basically those divs the class of item and all the stuff inside so let's um let's call this product elements and set that to an empty array then we want to Loop over the products and create an element for each one so let's take our products and let's use for each and let's say for each product then we're going to want to create an element and just to test this out and make sure that we're getting our product let's do that and come back over here and if I open up the console you should see all the all the objects um in the products array all right so to create an element let's create a variable here called Product element and then we're going to use document.createelement which will do just that create an element for the Dom and we want it to be a div so we're going to pass in div now we can continue to add onto this element whatever we want and what we're building is this okay this this div to the ending right this item with space Y2 and then everything within it so what we'll do is add the the this parent div's classes so let's say product element and then then we'll do class name and we're going to set that to item and space- y-2 okay so now we have the div that has the classes on it and if we console log product element just so you can see exactly what we have so far it's just it's a div for every product we have with these two classes now I want to fill in inside that div so I'm going to do product product element. innerhtml and I'm going to set that to some back ticks right because we want to be able to use a template literal with some with some variables so let's copy uh we want to copy not the div with the item but everything within that so everything in between it doesn't matter which one you choose so just let's grab all this so basically from this div the BG gray to the strong and then we're going to paste that in here all right and then me just uh push I'll push those over a little bit okay now we need to make this Dynamic right or we don't want for all of our products to show the PlayStation image and the PlayStation title whatever so we have access to each product in this for each in that array so for the image let's get rid of this hardcoded image here and let me see does it have yeah so the URL does have Images slash in it so we don't need to include that so down here let's get rid of that let's use our money sign and curly braces and let's say product. URL probably should have called that image but whatever it's fine and then for the alt let's use the product product. name and then we want to come down to the actual product name right here PlayStation 5 change that to product. name and then here we have the price keep the money sign and let's say product product. price and let's actually add on to this two local string local string because that will make it so that you know the the comma will be put in there for the thousands and then let's see we're going to go underneath that underneath that string that we just created and then let's take the product Elements which is the array and let's push onto that the product element that we just created okay and then we want to take the products wrapper and we want to use aend child because what we're doing is taking the product elements array I'm sorry the product element and we're putting it into the products wrapper and this is going to run for every product we have because it's running within the four each so in here we're going to pass in product element all right so let's go ahead and save that and now if we look at our project we should see all the products now why are there two oh so we we have all the products from the array through the JavaScript but we still have the three hardcoded so we can now get rid of those so this product wrapper should be empty now so that ends here so I'm just going to take everything within the products wrapper and just delete it so now yeah so now we should have just these what is it 12 products all right so we have our products displayed let's refactor this a little bit because it's a bit messy see just having this Loop here so what we'll do is just create a a function underneath let's say create uh oops create product element so function create product element and that's going to take in the actual product object and then what we want to put in here is let's see this so we're creating product element adding the class name and then adding the inner HTML so we want those things we're going to cut and we're going to put those in this function and then down at the bottom all we're going to do is then return the product element so now up here inside the loop we can make this you know much cleaner by just setting const product element set that equal to create product element and just pass in the product so if we save that we should see the same result now obviously none of the functionality is working here but we have our products on the screen if I add something else to this array or remove something from the array it's going to get add or removed from our products here so the next thing I want to do is the the add and remove to card or the update card I should say so for that we're going to need an event listener on this button so remember that button is in this this HTML right here and it has a class of status so what I'm going to do is go into the into this create product I'm going to go right above the return and then let's take the product element and we want to use Query select leor and I'm going to select the class of status and then let's add an event listener and we want to listen for a click and then we're going to call a function called update cart okay and then we'll put that down here let's say add or remove item from card so function update card we're going to pass in our event object since it's since this is being fired off on an event listener we have access to this object now I want to create a status element we'll just call this status l or we'll call it element so well maybe we should stick to what did I use in the me just see what I used in the blog here um yeah Status l so we'll do that so status L and we're going to set that equal to that event object and then the target property that will give us the actual element that we're that we click on so if I do a console log of status L and let's open up console here if I click on this button you'll see it actually shows me that button that I clicked on now we want to check to see if that has a class of added because what's going to happen is when we click that we're going to dynamically add a class of added so let's say um if if that status element and then we can use the class list property and we can then say if it contains so there's a method called contains that'll search for a class if it has the class of added that means it's already added and if we're clicking it then we obviously we want to to remove it so we'll say remove from cart and then else then we want to add to cart now there's a few other things we want to do besides adding and removing from cart we want to change the text here okay so if I add it it should be changed to remove from cart I also want to change the color of the button to Red so let's start here with the remove actually let's start with the ad and we'll say status L and class list and we're going to add a class dynamically through our JavaScript and the class we want to add is added okay then we want to change the text so let's say status l dot and we can take inner text and we'll set that to remove from card right so if I try this out right now if I click it now it says remove from cart it's not toggling I can't do anything else because I haven't added that yet but at least we know we can click it we can change the text now for the color let's first remove let's say status L and then we're going to remove the current color so class list. remove and it has a CO color of bg-- 800 so we want to remove that then we want to add so class list do add BG red and let's do 600 so now if I add to the cart now it changes to the red so now we want to do the remove which is going to be very similar so we can actually just copy these and then let's change this to remove the added class let's change the inner text back to add two cart let's um let's see we're going to add actually I'm going to move this here and then let's remove the red class and let's add the the dark gray class back so now I can toggle the button text and color and then all we have to do to actually increase the cart count is to if we're removing then we want to decrement we'll say cart item count minus minus that'll take away one if we're adding then we say cart item count Plus+ all right then we want to change the um the actual count because right now that's just going to change the variable right if I click this it doesn't do anything up here so let's go under the if statement and let's say update cart item count and we can do that by taking the element the cart count element changing the inner text to the cart item count and I'm just going to add on to this two string so now if I click on add to cart now you can see now it has a one I'll click add to cart here now it's two three and if I click remove it goes back to two one and zero all right so pretty simple now we come to the filter products so remember we want to filter based on the category check and searching and and I'm not going to have two separate functions for that we'll have one single function to to do this um we do need two event listeners so let's put those up top here so we'll go we go right here and let's say um event listeners for filtering okay okay so we have the filters container so we're going to add an event listener for that and this is a uh checkbox so we're going to listen for the change event not click change then we'll call a function called filter products which we don't have yet then we'll copy that down and then we're going to have the search input We'll add an event listener onto that and the event we want to listen for on that is an input all right now we need to create this filter products so let's come down to the bottom and let's filter products we'll say um by checkboxes and search input so function filter products okay now I'm going going to first get the search term you guys you don't need to put these comments in if you don't want to but they help some people so con search term and the way we get that is by taking the search input it's a text box so we want to get the value I'm also going to trim it trim any Whit space and I'm also going to set it to lowercase to avoid any any case conflicts and then let's also get um we'll say get I guess checked categories so for that let's say cons checked categories and we're going to first of all turn that checks right here so let me just show you real quick so we have check boxes right actually I think I called it checks did I no no check boxes all right so we're getting um all of the check boxes so it's not returning we're not getting a single element like we are with the rest of these with query selector all it gives us basically an array of our checkboxes it's called a a node list so I want to turn that into an actual array and we can do that with array. from so let's say array. from and then we can pass in checkboxes and then we're going to add on to this do filter okay and we want to filter pass in a callback function here so filter each check where it's actually checked and there's a property called checked that we can check for I know I just said check like 15 times all right so that'll give us all the checked categories in fact why don't we do a console log here and um we'll just show what is in checked category so if I open up the console and I click on cameras uh let's see cannot read properties of null reading trim what is that that should just be value all right so if I click cameras now we get input cameras now smartphones check okay so it's just putting whatever one is checked into this variable now I don't want an array of these like in put ID cameras I don't want that I just want it to be the ID which is the actual category name so we can add on to that filter so let's get rid of that and let's add on to that a map which will take an array and we can basically reconstruct it into an array of something else so we'll pass in each check and what we want to return is simply the ID so check.id so now if I click on cameras I get an array with cameras smartphones games okay so that's exactly what I want now next thing we're going to do we can get rid of that is let's Loop uh loop over the products and check for matches so we're going to take our I should say our product elements so product elements and then for each and we'll say for each let's say for each product element and then I also want to get the index which you can get with four each as a if you pass in a second argument um and then we're going to say const product and set that to products and then whatever the index is which will start at zero and then you know increment so we want to check to see If the product uh matches the search or the checked categories so let's say cons matches search term so we're going to check that first so con matches search term and we can do that by taking the product let's get the name because that's what we're matching if we're searching in the Box we're M trying match the name of the product we're going to make it two um two lowercase and then we want to use includes because that will in that will basically search it if whatever we pass in here is included in the search term what we want to pass in is the actual search term which is this right here whatever the we're putting in the input box all right um now let's do the categories so we'll say const is in oops is in checked category and first we're going to check to see if the the length is equal to zero because if it is that means nothing's checked that means we want to show everything so let's say if um checked categories. length let's say if that is equal to zero or checked categories do includes includes and then we want to pass in whatever that the current product is the category all right so that will show us the matches now all we have to do is show or hide show or hide the product based on the matches so we can say if uh matches search term and if is in checked category then we want to let's say product. classlist because with Tailwind you can add a hidden class and that will basically set it to display none so we want to say class list. remove the class of hidden because it's matched right if this is true that means there's a match that means we want to remove hidden else if there's not a match then we can add the class of hidden and that should do it so now let's check cameras okay so that's not working let's see uh I'm sorry this should be product element not product all right let's try that cameras there we go games okay showing me the games television smartphones all right and then let's check this so if I type in play there we go if I have cameras checked and I type in play it shouldn't match because I'm checking cameras if I do Sony that does match because I'm because cameras is checked and that's it so I mean pretty simple let me know if you guys want me to do this same project in react or I could do spelt or even like solid JS one of the newer Frameworks I could I could do that as well um I think it's a a nice little project to really just kind of practice you know practice your vanilla JavaScript um just dealing with the Dom basically so that's it guys hopefully you enjoyed this again the code will be in the description the 20 projects course if you like this if you enjoyed this project there's you know 19 more in that course we also have the 50 projects course which are the the projects are a little smaller and some of them are just HTML and CSS but it's good practice so um you can check that out if you want thanks for watching guys and I will see you soon