3 Javascript Projects Every Beginner Should Build

Hello friends today we are gonna create three different JavaScript projects that will help you to understand JavaScript basics the first one will be this slider example we can move the slider using these arrows and these buttons then we are gonna Create a quiz application we will choose an answer for each question and at the end of the game we will display this result page and finally we are gonna create a product page where we can filter data using a search input these categories and this price range they all are real world projects that include everything you need to know about JavaScript Basics Loops event listeners tone manipulation array methods and more and after that we will deploy our projects using hostinger as you know Black Friday is approaching and hostinger offers an 80 discount for premium hosting you can deploy 100 websites you will get unlimited bandwidth every domain and SSL certificate at this price if you use the link in the description below and llama Dev coupon code here you will get an extra discount and remember this is a limited time offer don't miss the greatest discount of the year I after purchasing you are gonna redirect to hosting their panel let's claim our free domain after the registration we are ready to set up our hosting he chose everything step by step we'll create our own websites let's choose the domain and that's all it's gonna take a while and after that you will see your hosting panel this panel is really user friendly you can manage your emails domains files you can create a database and other settings and in this tutorial we are going to create different sub domains for each project and we'll deploy them using this file manager so if you are ready let's get started okay if you created a new folder let's create our HTML CSS and JavaScript files I will see slider.html CSS and JavaScript so I will come here and I will just say talk and tap as you can see our HTML document is ready right now I'm gonna import this CSS and JavaScript file to do that I will see link and slider.css let's give a title for our project I will say slider project let's write here hello and my JavaScript I'm gonna say source and import my JavaScript file here let's write here something it works let's open up our website right click and open with live servers if you don't have this extension you can open up extensions tab right here live server as you can see we are going to be using this extension and after that you can hot reload your HTML files let me close this menu and I will say live server and as you can see it's here if I open up my console as you can see it works so let's give a background here and Center my elements to do that we can use our body tag now we'll see background color is going to be this purple color and to Center everything I'm going to be using flexbox I'll say display Flex align item Center just file content Center basically it centers vertically and its enters horizontally like that perfect so let's see what we are going to have as you can see we are going to have a container here which includes every element those arrows images and those buttons and in this container we are gonna have two sections first one will be this top section arrows and images and second one will be those buttons let's do that I will delete here and I will say a container we are going to have a top section and button and in this top section we will have this Arrow this images frame which includes our slider and other Arrow here let's say in which I'm going to open up my menu and create here an image folder and inside this folder I'm gonna drag and drop my arrow PNG as you can see we are going to be using this image it's going to be exactly the same in which we are just gonna give a rotation for this right one so let's use it I will see in which arrow.png of course I'm going to give a class name let's say arrow and this one will be left Arrow and one more is gonna be right and in the middle we are going to have our slider frame I'm gonna close this sidebar let's see actually as you can see here I'm gonna create my slider div and inside we are going to have our images but for now let's make this deal horizontal and Center them and we can reduce this image size let's open up CSS I will say top of course we are going to have a container here but we are going to handle this later let's see display Flex as you can see they are horizontal I can Center this vertically align it to Center perfect and I can give a space between them let's say 50 pixels okay awesome and for those images let's say Arrow height will be a little bit lower like that and we can click them so I will say cursor pointer like this let's rotate this right one I'm going to be using transform rotate and 180 degrees okay it's that easy right now I can create my images I will just copy and paste them inside this slider and as you can see our source will be paxus.com some random images and class name will be image let's see okay they are here but they are too big in our example as you can see we have a certain width and height for this Frame let's give that I will say frame 800 pixels 500 pixels it really doesn't matter you can give whatever you want and I will say overflow hidden we cannot see other images right now that because they are overflowed and we hide them but as you realize our image looks a little bit weird let's resize them also I'll see image this will be a hundred percent height will be a hundred percent like that and I will say object with cover and it's gonna cover all our frame here and as you can see it looks much better okay we are gonna handle our slider but before let's create those divs here I will see just do I'm creating them like that but after giving a style I'm gonna delete them that's because we are going to be using JavaScript and I'm gonna show you how to create any HTML element using JavaScript okay actually let's give a class name for them I will say class and button let's copy this and come here I will give you all right I'm with and I'm gonna make them Circle so both the radius will be 50 percent and I'm gonna give a border one pixel solid and white let's check like that you already know what I'm gonna do I'm gonna make this horizontal basically I will be using display Flex and I'm gonna give gap between them okay awesome so what I want to do is to Center this bottom and top it's going to be somewhere here and I'm gonna give a space between that again we can use display flex but this time it's gonna be vertical to do that we are going to be using Flex traction it's going to be a column if I say align item Center as you can see it's centered and let's give Gap and it's going to be 50 pixels okay our design is ready let's get started with our JavaScript I'm gonna delete here and firstly I should select my items actually let's play those buttons as I said we are going to create them here and what I'm gonna do basically I need this left and right arrows and when I click them we are gonna move this slider onto x-axis so how we are going to choose our elements it's really easy I will say const left we are going to be using documents and query selector so I'm gonna give my class name left and I will do the same thing for right side and my slider okay Let's test when I click on this right button I want to write something on the console to do that we are going to be using event listener and our event will be a click event and I'm gonna create here a function basically I will say whenever you click on this write button right here something clicked I'm going to open up my console I will click and as you can see perfect it works so instead of console log I just want to move this slider I'm gonna delete here and I'm going to choose my slider review and I'm going to change its Style and I'm gonna give a transform effect and it's gonna be Translate X that because we are going to move this on the x-axis so let's test it I will just say minus 500 pixels for example of course we are going to change it I will click whoops it's going to be transformed and as you can see it's moving but we cannot see it other images that because they are not horizontal let's fix that after this Frame I will say slider deer and it's gonna be display Flex like that as you can see other image so instead of this 500 pixels let's make this dynamic as you remember our image width is 800 pixels so if I write here 800 I will click as you can see second image and for the third one is going to be 1600 I'll click perfect and for the last image is going to be 2400. like that so let's think what kind of logic we are gonna use first click second click and third click it's really simple actually it equals 800 multiplied by 1. and this one two and this one three so we are gonna need those numbers basically for each click of course if we have other images we are just gonna increase this number and to reach those numbers we can use our slider length we can create a slight number let's say slide number then at the beginning is going to be one it's gonna show the first image and whenever I click on this button I'm gonna increase this slide number and for the first image I can use this slide number I'm gonna use here a JavaScript to do that we are going to be using dollar sign and curly parenthesis and I will say use slide number and multiply by 8 hundredths and after each click I'm gonna increase this slide number let's see I will click as you can see start and last one it's that easy but there's a problem here if I click one more as you can see it's still moving but in our example this is the last image if I click it turns back to the first image so we can create here a logic I will say if slide number is smaller than our images length remember we have four Images so let's choose them their class names are image I will say images and to choose all our images I will write here query selector all basically if you have multiple elements like in our example as you can see we have four elements you are going to be using query selector all so it includes four elements if I say images dot length it's gonna give us this number so if it's smaller than 4 that's right here if condition we are going to move our slider like that if it's not I'm gonna copy here but this time I'm gonna turn back to initial position so it's going to be zero pixel and in this case our slider number will be 1 again let's see I will click click click and one more as you can see the first image but we don't have any animation here let's give I'm going to open my CSS and for this slider I'm gonna say transition effect and for any animation for transform for opacity for background color doesn't matter it's gonna take one second and we can give any timing function here basically it's gonna give an effect so it will start slowly let's see I'm gonna refresh as you can see perfect let's refactor our function firstly I'm going to create here a length and it's going to be our images lagged we can use this so I can delete here and for this operation I can create another function let's say const X slide and it's going to return this I can delete here and say next slide I can do the same thing for this one let's duplicate this and paste here and change the name previous slide I'm gonna use it here like that and I can delete this if statement it looks really long instead I can use question mark uh column here like that if it's smaller than our length run the next slide if it's not run this function let's see as you can see it works as you expected perfect and it looks much better right now so let's do the same thing for the left click I'm going to create a function previous slide and actually it's going to be not previous slide it's going to be get first slide okay let's create our left event listener I will say click and I'm gonna apply exactly the same logic I will say if it's the first slide when I click here it's not gonna move to right side it's gonna show us this last element so let's create our function here get last slide and what I'm gonna write here remember for this last element we are gonna move our slider 800 multiply by 3. basically if I say length minus 1 and multiply by 800 it's going to show us the last element let's create here our logic I will say if slide number is bigger than 1 we are going to show the previous image if it's not we are gonna call this last slide and in the middle we are gonna need the previous slide let's create here and paste okay so what we are gonna need here let's see let's say we are in the second image and its position is 800 pixels basically when I click here it's going to be 0 again and if we are here it's 1600 when I click here it's gonna be 800. in this case our slide number is 3 we can basically calculate here a thousand six hundreds when I click it's going to be 800 and the difference is 800 and remember our slide number is three if I say slide number minus two multiply by 800 how can I reach this number if you are not good at math it can be a little bit confusing for you but actually it's not if you are confused and having problem to calculate this kind of things just take a notebook and write to your variables as I explain you here you can think like okay I'm in the first slide when I click the position will be 800 second slide is going to be a thousand six hundred and after that you can try to calculate what you are gonna need okay I'm gonna come here and say Slide the number -2 I will click I forgot here minus okay we are choosing the last image if I click we are gonna see the third image okay it doesn't work of course this time we are gonna decrease this number and for this one it's gonna be our length that because when we move our slider we are gonna see the last element and the last element is the first item and when I click again we are going to decrease this slide number it was 4 and it's gonna be three like that two and first one perfect it works so what about those buttons let's create our buttons inside this bottom div to do that I'm going to choose bottom div here and paste here but this time it's going to be only query selector that because we have only one bottom div and after that for each image I'm gonna create different buttons here in this case we are going to be using our image length to do that we can use for Loop here I will say I equals zero is going to be smaller than our length and after each operation I'm gonna increase this number so basically we are going to inside this Loop four times zero one two and three in this case we can create our divs four times so let's create our div I will say here we are going to be using document and create element and we are going to be creating dfhtml elements you can create whatever you want here but in this case it's going to be do and we can give a class name for this deal if you remember its class name is button let's see class name equals button and I'm gonna add this div into my bottom div I will say bottom and up and child these two as you can see they are here perfect let's choose those buttons and create event listener for each of them I will say close buttons query selector all that because we have four buttons I'm writing here that because we are creating our elements here if you choose buttons at the beginning it's not gonna work be careful and at the beginning I want to give a background color for this first element that's because when we open our website we are gonna see the first image to do that we are going to be using the first element and I will say style and background color and I will say byte by the way it's a class name it's going to be dot let's see as you can see it's white by the way I will give cursor pointer for them okay and what I'm gonna do for each element I'm gonna create an event listener to do that we are going to be using for each and for each button we are going to create our event listeners add to end listener is going to be a click method when I click them I'm going to run this function and in this function we are going to change our slider when I click here we are going to see the first image second third and fourth basically we are gonna need those buttons indexes if you are using for each or map you can use their indexes let's say index in this case for the first item is going to be 0 1 2 3 but when it's 0 the slide number will be one so basically I should increase this number let's move our slide I will say slider dot Style transform translate X we are going to be using this index here and multiply by 800. in this case for the first element 0 multiplied by 800 is going to be 0. for the second one one multiplied by 800 is going to be 800 so it will work like that there is a typo here let's see I will click as you can see it works as we expected but now we are going to change those backgrounds basically when I click here it's going to be background color white but there is something important here I should delete this background color for the first item to do that we can create a function here let's see const reset background and again I'm gonna take each buttons I'll say buttons for each and I'm gonna give a style and their background color will be transparent let's call it here as you can see but at the same time we should give background color for this one I will do exactly the same thing this time of course it's gonna be button like that perfect it works but actually there is a problem here when I click as you can see I had to click two times that because we are not changing our slide number here so I should come here and say slide number equals remember our index starts from zero but at the beginning our slide number is one so it's going to be plus one right now I can use those arrows but this time we are not changing those background colors to do that I'm gonna take them at the beginning that's because we are going to be using those event listeners and I'm gonna paste here and after each clicking I'm gonna reset my background colors and give a background color for a single button let's do that but right click I will say reset PG and give a background color for slide number is bigger than our index so I'm going to say minus one of course buttons and I'm gonna do the same thing here let's see perfect of course you can create a function for that and call them here let's actually do that change color okay awesome I hope you understood the basics it's a really small application But it includes every basics of vanilla JavaScript how to use style how to give HTML elements click events Loops for each methods I think it's an essential project for every JavaScript developer okay let's create our second project okay let's close everything here and and create our quiz application I will say quiz dot HTML CSS and JavaScript file okay I can close here and create my document and let's change here quiz project and quickly I will just include my style file and JavaScript file quiz.js okay let's see what we are gonna have we are gonna have this background color and we will Center everything again it's exactly the same thing as we did before I will say body background color is going to be this dark blue color display Flex align it to the center justify content Center I just centered everything and after that we are going to create this container back before as you can see we are going to be using different font family I'm just gonna use Google fonts if you go to phones.google.com you can see front families and you can choose any font family you want I'm using open sense and we are going to be using this link of course to use this font family I should paste here like that let's see actually I will open it live server and as you can see this phone finally looks much better than the default one okay let's create our container and inside this container we are gonna have this game div which includes question answers and the submit button and at the end of the game we are going to have this result page let's create our container and those divs I will delete here LC game and result and in this result we are going to have this title let's say H1 tag correct answers let's say correct as a class name foreign let's say H2 and score of course we are going to change them but for now to give any style I have to create them and finally this play again it's going to be a button play again of course class name let's say play okay what about this game container basically we are going to have two sections as we did in the previous project this main content and this answer let's come here and say content and submit button and inside this content we are going to have our question here which one I'm gonna give a class name is gonna be question and after that we are gonna have four answers here so I can create a do here let's say answers and it's going to contain each individual answer so we are going to have an input here and its type will be radio it's gonna give us this radio button so we can choose any of them of course we are going to create those texts as a label and as you can see it says html4 basically its reference will be our input here let's give an ID let's say answer one and it's going to include a value I will make here true or false let's say false answer and html4 will be our ID here that's right here an answer one let's create others as for two three and four of course we are going to create them using our JavaScript but for now they are going to be like that okay it's ready I think let's see okay perfect so what I'm gonna do is to hide this result div that's because when we open our app we are gonna see only our game and when we finish our game finally we are going to open up this and close our game div I will say display none as you can see it's not here anymore let's give a size and background color for our container again 800 500 I'm gonna say background color white like that what about this button I'm gonna move this at the end of the div to do that we can use position absolute let's see submit button I'm gonna give a background color first let's say this purple color and text color will be white I'm going to delete its border like that I can give padding cursor pointer I can increase width and height this will be a hundred percent and that will be 50 pixels let's give cursor pointer okay it looks nice actually we don't need any padding so let's use position absolute and move it here I will say position absolute and its Position will be bottom zero but if I do that as you can see it appears here but I want to see it in the parity to do that I will go to the parent deal and say position relative as you can see it's here right now and what about this content see content I'm just gonna give a petting here I can increase this question font size okay and for these answers 24 pixels I'm gonna give a space between them I'll say margin bottom let's change this color it's going to be a little bit softer okay so we can choose any answer here but as you can see there is a mistake here that because I can choose multiple answers to prevent this I'm gonna give a same name property for each answer what I mean by that I'm going to choose my inputs and I'm going to come here and say name let's say answers or whatever you say and in this case I can choose only one answer perfect let's design our result component also after that we can open up our JavaScript so what I'm gonna do I will come here and say game display none but this time it's going to be open like that so let's give a padding here and Center our texts let's say 50 pixels text align Center of course you can use display Flex also but it looks okay let's increase this H1 tag font size I'm going to be using my class name and I will say H1 that's because we didn't give any class name for this H1 let's see so you can use it like that if the pixels and for the correct span I'm gonna say green and for the wrong span is gonna be red and remember we have a button here which is play color will be white I'm gonna change background color we are going to be using purple I'm going to give some paddling between top and bottom and left and right now finally cursor pointer okay perfect I can delete this border by the way our design is ready right now I can close my result page and open up this game container okay so what I'm gonna do firstly I'm gonna create my questions and their answers to do that we are gonna need an array I will just copy and paste here like that as you can see each data includes a question and its answers and inside this answers array we are going to have our texts and we are going to check whether they are true or false like that we have three questions and after that I'm gonna choose my HTML elements we are going to need this game screen results screen we are going to change this question we are going to add different questions for these answers container this submit button and finally this play a game button let's choose them const let's say game screen document query selector and remember our class name it's just game and for others it's gonna be result screen question H1 tag answers it's a answer container submit button actually that's right here answers container that because we have answers here also I don't want to see any conflict and finally play button okay firstly when we open our application we are gonna see the first question and when I submit we are gonna see the second one since we are using here an array we can Define question index the first item is index 0 1 and 2. let's write here question index at the beginning is going to be 0 in this case we will be able to choose the first element if I say data and question index is going to give me this first item and for each question we are going to increase this and what else we are going to need correct answers count is going to be zero same thing for wrong answers and it's going to be our score and finally when we choose any answer we are gonna store its value remember one of them is true and others are false and when we choose any of them we are going to assign our selected answers here like that I can delete here it's going to be true or false okay firstly I'm gonna create a function that shows a question here let's say const short question I'm gonna write here question number and according to this question number we are gonna fetch any question here of course at the beginning it's gonna be this question index which is zero so let's change our question Title Here this H1 tag I'm gonna be using question and I will say tax content and it's gonna be data and we are going to be using our question number and its question for example data 0 and its question data zero and each question in this case we don't need this text anymore we are going to write it using JavaScript I will delete and let's call our function remember question number will be this question index and as you can see it's here right now I can delete those answers that because we are going to create them using JavaScript by the way I can take one of them I will copy and after I can delete that because we are going to use it I will come here and say and swiss container and I'm gonna use here in our HTML basically you can write any HTML element here of course like the previous example you can create a new do answer and you can create input and put inside answer create label put inside and finally put every answer inside this container but we don't need to do that using inner HTML we can add it quickly so let's map through those answers and create our div I will say data question number and answers and I'm gonna map through these answers let's say item and it's index and it's going to return rdif here like that I'm using map here not for each that because we are returning a result we are not writing any function and let's change this ID is going to be our index and I'm going to change this value it's going to be item Dot is correct remember they are here item dot is correct and finally I'm gonna write here their texts item dot answer like that okay they are not here of course we are gonna return it like that not a function okay they are here but there's a problem here it adds those commas that because we are using an array and if you map through your arrays it's gonna print them like that with a comma to prevent this I will come here and say join an empty string in this case we are not going to see those commas and okay right now I can select any answer inside this function let's say select answer let's create this function here const select answer and I'm going to choose each input here and create a click to end so we are gonna see which input we are choosing let's do that firstly I'm going to select all inputs if you remember we have asphalus container I can use it of course you can use document and query selector but also you can use its parent so I'm going to choose inputs here I can directly give an HTML element instead of class name like that and I will say for each for each element I'm going to create event listener is going to be click event but how we are going to reach the value of these radio inputs to do that we are going to be using event here and if I say console log we run Target value we are going to see the answer let's see I will click as you can see it's false false false and true we have our value right now so I can update this selected answer it's going to be equal to r value okay right now we have our selected answer we are ready to submit let's create a function and after that we are going to create click event listener and when we click if our transfer is correct we are going to increase this correct count if it's wrong we are going to increase this one and finally we are going to increase our question number and show the other question you are going to understand better right now I will come here and say closed submit answer I'm gonna choose my submit button and add event listener and a click event and I'm gonna write a condition here I will say if selected answer is correct I will say true increase correct count like this if it's not if it's false increase wrong count and finally we are going to increase our question index and show a new question using this index in this case it's going to be one let me say show question one is gonna choose other question and show its texts okay let's do that I will choose this one and submit it's not working that because we didn't call our function let's call it here as you can see second question but there is something important here if you don't use any answer we can still see the next question to prevent this I'm going to write here another condition I'll say if selected answer not null you can apply this process if it's just alert your select and answer now that the beginning as you can see it's not null I can make it null here but in this case when we choose the other question it's gonna have a value not because when we change any answer here we just assign here true or false so I shouldn't do this here I should do this here it's gonna be no so in every question our answer will be reset okay of course not select answer is a function select.answer let's check here okay I will say and let's see I'm gonna submit as you can see select an answer not if I choose any of them I can see the next question by the way let's close here okay if I choose this one and remember this is the last question if I submit as you can see it's not going anywhere not because we don't have any question anymore so what I'm gonna do is to show my result page let's create here show result and remember our result page is display none okay this is game this is the result right now I'm gonna change this display but this time it's gonna be display now let's do that I will say results screen and its style and display will be let's say block another one will be known game screen Let's test it I'm gonna write here a condition I will say if question index he called our data lagged we can return this function so it's not going to run here let's see I'm going to choose any of them and it's here so let's update them if I say result dot query selector this correct class I will be able to change this item so let's delete them I will come here and say result screen dot query selector correct and I'm gonna change its text content and it's going to be correct answers and our count here correct count I will do the same thing for wrong and score let's separate them wrong answers will be wrong count and finally what was the name score and it's gonna be score and I'm going to make a calculation here it's a really basic calculation I'm just gonna say correct count minus wrong count and multiply them by just 10. it really doesn't matter okay let's see I don't know the answers but as you can see correct answer wrong answer and minus 10. and when I click this button I'm gonna reset everything and show my first question let's create here before this that because we are going to use this function inside show results so I'm gonna say closed play again let's reset everything like that and show question the first question or you can say directly zero doesn't matter and when we click on this play button I'm just gonna call this function I will say play button add event listener click event play again but remember we just closed game screen and open up this result screen I will do the opposite here I'm gonna close this container and open up this one let's see I will choose if I say play again it's not working play class name oh I don't need to create any of them we have already defined here I will click and as you can see the first question in this example you have seen how to use text content and inner HTML like that and see how to use all these functions and Logics I think it's a great project to understand tone manipulation and if you already know JavaScript it's a good example for refreshing your mind so let's create the other project okay I'm gonna close my tabs here and create my files let's see filter dot CSS and JavaScript of course I can create different folders for them but it can stay doesn't matter I can do this for the GitHub repository by the way it's going to be in the description if you have any trouble you can check it there let's create quickly our documents filter example or project my link filter CSS and also Google font here because I want to change my font family and finally Secret and Source will be filter.javascript let's create our container and let's see what we are gonna have but before I want to add this phone family I don't want to forget that like this and container okay let's check as you can see our container will be full screen here and we are gonna have two sections first one will be this left menu and this content let's create inside container I will say left menu and content and inside this menu we have this search input a title here some categories actually let's create them one by one I'll say input is going to be search input and I'm gonna give a placeholder and it's going to say search after that categories and categories container actually let's say shortcut cuts and each category here let's say span and cat I'm gonna say all casual and other categories and after that we are going to have this title after these categories H1 and finally this range input and its value so let's say price and these two will include our price input let's say wrench and I'm going to give class name is going to be price range of course you can give here any minimum and maximum number but we are going to do this in our Javascript file and finally price value let's say forty dollars let's see I'm gonna open with live server and as you can see it's here and what about this content I'm just gonna create a products container and inside we are going to create each product I will say products and let's create an example it's going to include an image I will copy and paste my image I just found it on Amazon and I will say span dot name is gonna be our product name and price actually we have same class name here let's see price text let's see okay it's really huge I will come here and say display flags and I'm gonna give a padding like that and let's give a size for this left side and right side I will say left menu and contact of course you can give any width but I prefer using Flex that because our parent is flexbox if I say Flex one and for this one Flex let's say four so it's gonna be four times bigger than left menu Flex one and flex four okay let's take care about this input after left menu I will say search I'm gonna give a padding I'm going to increase its width and I'm gonna change this border it's gonna be great okay and for this H1 tag I will say 30 pixels font color will be a little bit softer and font weight will be 300 so it's going to be a little bit thinner like that and for those categories remember we have a container cat I'm gonna say display flex but they are going to be a vertical column and space between them like that and let's increase those texts for each cat I'm gonna say cursor pointer font size 20 pixels again 300 and I'm gonna give some padding what about those products let's add more products here like that and let's decrease this product size I'm going to come here and I will say products and each product I'm going to say display Flex they are going to be horizontal let's give gap between them and I'm gonna decrease its width it's gonna be like that and image 250 object feet let's say contain so it's going to contain its width and height like that as you can see they are horizontal and they are overflowing to prevent this there is a perfect solution if you are using flexbox you can say flag strap and it's going to be rub if it's overflowing it's going to move them into next line like this let's make them vertical this image and those texts display flags flags Direction column and get will be 30 pixels I can Center them perfect for this name maybe 300 okay it's nice let's check okay it's exactly the same so let's open up our JavaScript file firstly I'm gonna include my data array as you can see each array has product name its image price and category so using those items we can show all these products to do that I'm gonna delete my products here we don't need them anymore we are going to create using JavaScript but of course I'm gonna copy one of them remember how we are doing this we are going to be using inner HTML again but before let's decide which elements we are gonna choose of course our products container to add new items the search input and we can delete those categories also that because I want to show you how you can get different categories here in our example as you can see it's stress its stress also but we are gonna return only one dress category you are going to understand everything right now let's delete them and remember span its class name is category and our text okay so basically we are going to need this container and finally this range and its value let's do that I'll say const products container documents query selector products search inputs our class name is search categories container price range and price value so let's show our products you already know how to do that if you want to you can pause the video and try to show all those products so I will say display products or show products and I'm gonna pass here our filtered products of course at the beginning we are going to pass here this data directly but after that and we filter our items using these search inputs categories or this range we are going to send different data here and using this data we are going to show our products so I will choose products container and remember in our HTML and I'm gonna map through my filtered products I'm gonna return my productive of course I copy paste but I copied something else after that so I will paste it like this let's take it back okay and let's change this source it's going to be product Dot that was the name in which IMG its name and finally its price and remember we are going to use join methods here to not see those commas and finally let's call it here using data and they are here so let's filter our items using this search input so let's decide which event listener we are going to use of course it's not going to be click when I write here anything we are going to change our data basically we are gonna need our keyboard interaction to do that we are going to be using key up event listener I will come here and search input add event listener I'll say key up not see what we have inside I will say console log command Target and value I'm going to open up as you can see I have whatever I write so basically I can use this value let's say cost value you have targets and by the way if I want to search for for example this super ocean I shouldn't have to write this first letter uppercased it can be lowercase also and in the same way I can write anything with all upper cases to prevent any conflict basically I'm gonna transform them into lowercase letters so I will say to lowercase so even if I write uppercased and even if our product name includes uppercase letters they are all gonna be lowercased okay and after that I'm gonna write here a condition that because when we write anything and if we decide to Plate everything back it's gonna be empty and in this case we are going to show all these products again we are not going to filter so I will say if value filter our products if it's not display products and data again but how we are going to filter our items I will say display products but we are gonna send here filter data dot filter and I'm going to choose each item inside this data and I'm gonna check whether our product name includes our letters or not so let's say if item dot name but remember to lowercase and I'm gonna be using here index of value and it's not gonna be -1 let me show you how it works I'm going to open my console and let's say const string equals number Dev I will say as dot index of and let's say d for example and as you can see it shows my index number here 0 1 2 3 and 4. if I say l it's going to be 0 if I say V is going to be the last element but if I say o for example as you can see it returns -1 and it means it doesn't include this letter so I'm doing here exactly the same thing I'm choosing this name for example this name and I'm searching for whatever I write here if I say Z for example it's gonna return -1 and I'm filtering here if it's not -1 return those items if it's -1 it means it doesn't include this letter so we are not gonna return this product okay let's see for example this one I will say Pro as you can see two items actually it's exactly the same item let's see okay let's say two for example and this super ocean or capital okay perfect it works so what about our categories we have categories container here using my products I want to create each category here of course the basic way is writing them in the index.html but imagine we have hundreds of categories so you shouldn't do this manually everything should be inside function so I will say const set categories and firstly I'm gonna map through my data and try to take each category here let's say const all cats I will say data.map and return me iTune dot category let's see also look all cats of course I should call this let's see as you can see it includes every category but as I said we have duplicated elements here so I have to filter this to do that I can use index of again and check every item here let's see I will see filter I will take my item and its index and I'm gonna return all categories dot index of if item equal this index and as you can see it returns only one of them right now but there is something more as you can see we have one more category here and it's all so basically I'm gonna take this category array and add here one more item let's actually pass it in a variable let's say categories like that of course I can say categories and push and I can add this text but I want to see this category at the beginning so what you can do basically you can use spread operator here like that and at the beginning you can say all let's see right now because a lot categories and this time as you can see our item is here so basically we said create an array first element will be all and other elements will be whatever inside these all categories this is how we are using spread operator okay so let's use this categories container and add our categories remember how we are doing this I will say in our HTML and categories.map for each cut I'm gonna return a span here and I'm gonna write category and remember it's class name is going to be category and also join okay it's not here categories container foreign like that they are here perfect so what I'm gonna do is to add click event for each item here and when we click on them we are gonna filter our items let's write it here I will say for each cat of course you can do by using query selector and choosing each category here but I want to show you one more thing you can use their parents not their parents this category container let me show you I will say Advent listener is going to be click event and let's take our event here and let's see what we have inside you and Target and let's test I'm gonna click here and as you can see it returns our child element if I click here so if I say you want Target and text content it's going to show me whatever inside this span it's that easy guys you don't have to create for each you can just use their parents so let's do it here and I will say selected category is going to be this text content and I'm gonna write here a condition that because when we click on this all category it's gonna fetch all data so I will say if selected category equals all displayed products and our initial data and if it's not if it's something different we are going to filter our data I'll say display products data dot filter I'm going to take each element here and I will say item dot category has to be are selected category so we are gonna visit each item in this data and we are going to check their categories if it equals to our selected data here it means this is what we are looking for let's check I'm gonna click and as you can see only Sports Trace luxury and if I say all it's going to fetch all these products okay and one more thing here and it's this wrench as I said you can give here any minimum and maximum price but we shouldn't give here for example zero to a thousand we should give the minimum price of our products using this data we have prices here it's going to be the minimum number and the maximum number so let's do that I'm going to say almost set prices let's call it here as we did for categories and I will say cost price list data.map for each item I'm gonna take item dot price it's exactly the same thing as we did for this category here so it's gonna return us our prices and I'm gonna take the minimum and maximum price to do that we are going to be using JavaScript math method let's say math and maximum to and three as you can see it's gonna return this number if I say minimum is going to return these two but as you realize we are sending our numbers like that not inside any array as you can see there's an error but we have price list here which is an array to prevent any error I'm gonna spread them like that as you can see it returns let's do that I will say cost minimum price let me scrubby minimum methods and I'm gonna send my price list of course I'm gonna spread like this I will do the same thing for maximum and right now I can change my price range as you can see we have our wrench and its value this range and its value we are going to change them I will copy this and I will say minimum is going to be minimum price using same a maximum and also I'm gonna change its value and it's going to be a maximum price again basically by default as you can see in our example it's in the maximum level that because I want to show each element here and finally I'm Gonna Change here and price value will be let's see dollar sign and maximum price so we don't need this anymore I can delete we have text content and let's see as you can see 200. and whenever I change here I want to change this number also and we are going to filter our data but which event listener we are gonna use if you are using input range here you can use input event listener let's do that I'll say price range add event listener and it's going to be input I'm going to take my events here and I'm gonna update again this value and it's going to be event Target and value like that as you can see minimum is 16 maximum is 200 so I can filter my data I will say display products data dot filter I'm gonna take each item and item dot price will be lower or equal to event Target and value let's see as you can see it works it's a great element for user experience it looks really stylish but if you have a huge e-commerce application and if you have thousands of products I wouldn't recommend this one that because in every point it's gonna fetch new data but for small shops it's a great option so we can search for a item you can filter them by categories and price okay right now we can deploy our applications to do that I'm gonna open up my age panel and here I'm gonna choose domains and subdomains and first one will be slider I'm going to create custom folder and folder name will be slider let's create okay it's ready right now I can go to the file manager as you can see this is our main folder and inside there's a default page here if you visit our page as you can see it shows this page so what I'm going to do is to delete this PHP file and open up my sub domain as you can see it's exactly the same page here I'm gonna delete and I'm gonna move my slider CSS HTML and JavaScript file I will take them and drop here and I'm gonna change this name and it's going to be index HTML so if I open up slider.javascriptprojects.net as you can see our application is here by the way I forgot uploading this image folder let's actually open up here and I'm gonna move my image folder let's check I'm gonna refresh and perfect let's try and as you can see it works as we expected so I can do the same thing for other domains let's come here and create other ones we are already here let's say quiz application and let's say filter foreign up file manager quiz application I'm going to delete this default page and drag and drop my files we don't have any image let's change this name and it's gonna be index HTML and for other one filter I will play it and move my files okay let's check I'll say quiz and it's here perfect and finally filter and this input works are categories and price okay awesome and as you realize our connections are secure that because we are using free SSR certificate and using different sub-domains for different application is that easy guys just create your subdomain and upload your files it just takes seconds and it's great that because if you have a portfolio page you can create different subdomains for each project it's going to make your portfolio much more professional okay that's all I hope you liked it if you learned something new today please like the video you can support lamadev by joining to Channel or using the link in the description below don't forget to follow lamadev's social media accounts I hope I'll see you in the next tutorial goodbye foreign

Channel: Lama Dev

Views: 80,681

Keywords: javascript, javascript projects, learn javascript, javascript for beginners, js projects, vanilla javascript, no library, vanilla js, web design, html css javascript, javascript slider, vanilla js slider, javascript example, javascript quiz app, js quiz app, javascript filter data, js filter, javascript search filter, lama dev

Id: uDeb2iwZMkA

Length: 90min 0sec (5400 seconds)

Published: Wed Nov 02 2022