JavaScript Example: 10 Beginner Projects

1. Introduction: Hello, and welcome to our new class JavaScript example. My name is John Sorkar. I am Fullstack web developer and online instructor. Today in this tutorial, we are going to learn ten JavaScript example, such as JavaScript accordion, JavaScript tab, scroll to top, sticky header, slide menu, JavaScript slider, confirm box, model box, filter table, and to do list. These are very common example in our websites. All these projects are made with JavaScript, SDML and CSS. Basically, in these projects, we are not going to focusing on design and layouts. Basically, we are going to focusing on JavaScript. Instead of designing, we are going to focusing on their working process, such as how we can add data in our Kudo list, how we can delete data from our Kudo list, et cetera. I hope you will enjoy all the small examples. Thanks for watching this video. From the next tutorial, we are going to start our projects. 2. JavaScript Accordion Tutorial Part 1: Hello, guys. Welcome back. In this tutorial, we are going to learn how we can create accordion using JavaScript. But before we need to understand what is accordion and what can we do with it? So as you can see, I open an example in a browser. Accordion come with some title. If I click any of the title, it's going to show the content related this title. If I take another title, as you can see, it show the content, but it hide the previous content from Title three. In this tutorial, we are going to create this encoding using DML CSS, and Javasqu. In accordions, you can add images, you can add multiple paragraph, et cetera. These accordions are very helpful for question answer purpose. If you use click on any quotien, they got the answer right now. Without wasting your time, let's start the practical. So as you can see, side by side, I open my visuals stroud code editor and my browser using live server extension, and I already created an HTML document named index dot HTML. And inside the body tag, we have heading one tag. So here, I'm going to start our according, and here I'm going to take a Deep so type dot according. Dip class coding. Then inside this encoding class, we need to take multiple according items to create an accordion item, I'm going to take dip accodon. Th is our first according item in our accordion. Then inside this accordion item, I'm going to take acodium title. I'll create accordm title. And inside this title section, I'm going to put some text, Hey Accordion Title one. Accordon Title one. And now I'm going to take another dip for accordion content. Hemo type accordion content. And inside this container, I'm going to type accordion container one. With that, I'm going to add some more fixed. Here I'm going to type Blum 13. Here here I'm going to add 30. Here we create our first accordion itin and I want total four accordion itin. For that, I want to select this section and dubit three time. Also, I'm going to change the title. This is accordion number two. Accordion Title two, Accordion content two. And this one Accordion Title, Accordion content C. And this is as qua. Accordion Title four, Accordion content four. And I'm going to set this. After I set this file, you can see in my browser, we successfully create multiple accordion item, item one, two, three, and four. And now we need to start this tiling part. So inside the hit tag, I'm going to take tile tie. So inside this style tag, first, I'm going to style the according section. Copy the class name according and I'm going to select this one. Accordin. Then inside the color resist. First, help me to use font famine. Font famine, and I'm going to choose aerial font. Also, I'm going to add to this accobn going to type 450 pixel. For now, I'm going to add a border. Border, one pixel. And I want solid border. Solid. And I want black color, 000. If I set this file, now you can see the whole encoding size. If you notice you can see it add a black colored border to our encoding, and also we specify the to this accordion, which is 450 pixel. And now I'm going to style the Accordion titles. If you open accordion item, you can see accordion title and Accordion convey. First, I'm going to style this section, Accordion title. So copy the class name accordion title and after accordion, tie dot accordion title. Then inside the Cali says, first, I'm going to use could Color I want white color. Has. So I say title takes color white. With that, I'm going to take background color. Background color, y. If I set this file, you will see the result. But it does not look so mood. I'm going to add some padding to this title section. Padding ten pixel. Ure up this file, now you can see the result. Now I want to add Office to this encoding title section. For that, I'm going to copy this section, encoding title. A here I'm going to use a posed select selector, colon and here I'm going to use covet. Then you said the color verses, W about this title section, I want to change the background color. So here I want to use background property. Background. Hashtag. And I want to select nine A, 16, one. After I set this file, if I over my car on this section, as you can see, change the background color of this title. But there is a problem with that. Whenever I over my curs on this title section, instantly change the background color. I want to add some smoothness whenever I over my cars are on it. So her type another propriety, which is transition. Transition transition and I want to transition or background. Background. Background. And I want to transition our background section for 1 second. 1 second. After set this file, if I over my cards on this title section, now you can see it takes some time to change the background color. It takes 1 second to change the background color. And now I'm going to style the content section, this part, accordin content. So I copy the class name. So inside this style section, I'm going to select the accordion content part. And I said the culivrassF I'm going to change the background color of this content. So I want to use background property, background, and I want this color. A six, A six, F is a kind of yellowish color. If I set this file, you can see the result. It's a light gold color. And for some gap, I want to add some padding. Padding ten pixel. After you add some padding, now you can see the as it's look pretty good. Now, if you notice you can see every according attach to each other. Now we need to provide some gap between them. For that, we need to select the accordion item class, this one. To select this tag, accordon IM Is the caliss I want to add some margin at bottom side. Here I'm going to type margin button margin button, button, ten pixel. After set this file, you can see the result. It is add some little rg into the accordance. Now, when the user open the page, I want to hide according content. I do not want to sew the content. For that, we need to use this play nun property. Let me show you. So in our encoding content section, I will type this play property. This play null. If I set this file, as you can see, it hide our content. Using Java script, we are going to show the content. So whenever we click this according title section, it's going to show that particular title content. For that, we need to embed lkvent to all of this title section. So we successfully done our HTML and CSS part. And now we need to embed TikVnt to all of this item. For that, we need to run Lou for all of this title, and also we need to add Tiki vent to coding title. So we are going to start with Java script Outside the Deep Dag, I'm going to take script. Inside the script tag, I'm going to take a variable, which name is according item. To declare the variable, I'm going to use Cs Cs and our variable name is acoding item. Now I want to target all the encoding item telemon. For that, I'm going to type document qui selector. 3. JavaScript Accordion Tutorial Part 2: Inside the roundrees and I want to select all the encoding item. Copy the class name and inside the double code, dot encoding item. Then semigon to end this line. So we successfully store all the encoding item to this variable, which is encoding item. And now we need to run the loop according to the item lin. So in the next line, I'm going to type coding item Dot, Hem to use for each function for each. Then inside the round dresses, I'm going to declare a function. Function, it is an anonymous function. And inside this round dresses, I'm going to pass a variable, and our variable name is item. Then inside the caliberss also, we can use arrow function here. Let's use arrow function. For that, I'm going to remove function keyword and parenthesis and I'm going to type items equal to arosne. As you know, this is arrow operator. Now, inside this arrow function, we need to target according title. As we need to target according quantity. So inside this function, I'm going to take a variable for title. Here I'm going to type cons and our variable is title. Title equal to. So whenever we run our loop for first time, it's going to store first according item in this variable, ccding item. And now I want to store according title and encoding tent in different variable. So in our first variable, title, I want to store according title. So act title equal to IM, dot quad selected. Is that the round presses? Is that the double code? I'm going to select this one, Accding title, dot, encoding title. Then semict this line. I mean, from the encoding items, we select coding title. Similarly, we need to select coding quanta. So I duplicate this line, and I'm going to change the variable m quanta. Content equal to item dot Quari selector coding content. I replace encoding title with coding content. Now I want to apply Aden listener to this title variable. And with the helper pet, I want to add Kikiw. Here I want to type title the add even listener and Hem pass lickiw Whenever user click on this title portion, I want to call it anonymous function. And here I want to use another arrow function. I create a arrow function. So whenever user click on this title portion, I want to add a new class in our title class. I want to say, suppose user click on coding Title four, then it's going to add a new class to this portion, which is active. Basically, I want to say, whenever I click on it, I want to add active class to this portion. For that, we need to select IEM ITM I'm going to call classls classist Togo function. Now the is why we use towel function. So whenever a user click on this title first time, it's going to add active plus. And if the user pick on this title second time, then it's going to remove the active plus. So this is the usage of Towle. Then inside the single quote, I'm going to put the class name, which is Acne. We're going to do in this line. Sorry, this command going to add the active class on this item section, encoding item, not the encoding title. So whenever we click on this encoding title, it's going to add active plus accord to the encoding item. And now I'm going to style this active plus. So here, inside this inside this style tag, I'm going to type dot act and inside the liss I'm going to start our Cs. So inside this style section with the coding item, if there is a class name act then inside the own dresses, then I want to show the encoding content. So I'm going to select this class encoding content, and after active, I'm going to add this class. And here, I'm going to use a property name display, display block. So after set this file, if I hover my cards, encoding Title three and click on it, as you can see, it show the content portion. At the same way, we can open second title. We can open third one, we can open fourth one. Also first one. And if I click this title second time, as you can see, it close this portion. Similarly, if I click OOP, her you can see it hid the content. Because as I told you, Harrow use Togo function. This function work like switch. When I click on it first time, it's going to add class, and when I click on the second time, it's going to remove the class. If I show you my console, as you can see in my elements section at the encoding item four, you can see att class because her open our encoding item four. But if I close this encoding, now you can see it removed the active class. Similarly, if I click on coding Title three, now you can see it a active class according Title three. But if I click it again, it removed the class. So this is the usage of towel function. Now, let's back to the visto cot, but there is a problem. As you can see, I can open all of this accordion, but I don't want to open all the items at the same time. So if I open only the second item, other would be group. Basically, I want to hide other one content. For that, we need to remove the active class from the other item. To do that, we need to play a trick. Suppose I click on the item three, then our function going to che other sibling class have sem active plus or no. If they have the sem active class when they are open, then remove the active class from the sibling. So for that, again, we need to run a loop for all of these encoding items. So here, I'm going to use a four for inside the round presses, first, I'm going to declare a variable there, and our variable name is I. So here, I'm going to use a four. For inside the round dresses, I'm going to declare a variable. The I assign with Z. And I want to run the loop up to coding item len. So I less than encoding item n items dot Linersion. And semiconontb in this slide. So we have to doll four encoding item. So it's going to run our loop for fourth time and to run the loop, also, we need to increment it. I plus does. So after entering the loop, we need to check all the encoding items. Is that the same encoding item that user select currently is user select only item four, then we need to put the active plus only item four, not other one. For that, insert this loop, we need to use IP condition. If inside the rounds and inside the round presses, we need to pass the condition. And our condition is according IM inside the squared resist is an array, so we need to pass the item number, I, I not equal to T. Its mean, I user not select the current item, then remove the active plus. Inside this calis we need to remove the active plus. Smotypecding items. Inside the square sis item number, I dot her need to use classls method to remove the class classlesRmove. Inside the remove function, we need to pass the class name which I want to remove, and I want to remove active class. And semicon in this line. Is the colors, se, if user click on the current item, then add this active class. Copy this section and put it inside the spar. Basically, what it going to do? If user click on any title, then it's going to check. Is that at present item or not? If this is not a at present item, but the item have the active class, then remove the active class. But if this is the at present item, then add the active plus. Now, let's set the file and see is it work perfectly or not. So first, I'm going to click item number four. As you can see, it so the conte. But if I click on item number two, now you can see it hide the item number four content and so the item number two convey. So using it, at the same time, we can open only one item. And if you want to make this title section plicable, I want to say when you over on your cursor on this title section, you want to show your cursor as a pointer. For that, we need to get to the according title section. According title. And here we need to use a property, Nan Cursor. CarzarPointer. If I set this file and open my any of the title, now you can see our cursor arrow convert to pointer. And if I teco it, we can see the content. Now it looks like a tlqablein and we successfully create our according. And if I remove the bottom of this current container, let me show you. So I'm going to remove this one and set this file. Now you can see it look perfect. And you can add anything to your encoding section. You can add image gallery, multiple quotients, et cetera. So this is it for this tutorial. In our upcoming tutorial, we are going to learn more about web design Cboins. Thanks for watching this video. Statue. 4. Javascript tab part 1: Hello, guys, good to see you. Once again, I'm back with a new project related JavaScript Atable and CS. And in this tutorial, we are going to learn how we can create tabs using JavaScript CSS, and AStm. So as you can see in a browser, we open an example. Here you can see tap title and whenever we click or eat, it's going to show the con related to this tap title. As you can see, our tab one is activated. If I click on tab two, now you can see tab two content, and it automatically high tab one contain. Similarly, is work pd tab three. Now it high tap two content and show tab three content. I hope you are already familiar with tab. Without wasting your time, let's start the practice. So as you can see, side by side, I open my Visual Studio code editor and my Bowserver using if server extension. I already created an TML document named index dot HTM. And here we are going to create it, but first, we need to create the buttons. So first, I'm going to take a container plus tab tab, Dep class tab. And inside this D, here I'm going to take multiple button. So at first, I'm going to take a button tag button. And inside this tag, I'm going to type tab one. And if you don't want to use buttons, you can take and is. So now I'm going to assign a class to this button and the class name is class tabling this is a common class. With that, I'm going to take a data attribute. Hemo type data, and our attribute name is tab. I'm going to take a name for this tab, which is tab one. Tab one. Data attribute introduced in a stable file, and it's allowed to create your own attribute name. Classes redefine attribute. Similarly, we can create our own attribute, and our attribute name is data tab. For that, first, you need to type data hyphen, then you can take your own name. And also, I assign a value to this tab, which is tab one. And in future, I'm going to use this value. And now I'm going to ugate this button to time. And I'm going to change the takes and data type Value. This is tab number two and also data tab two. And this is tab number C, data tab C. So I successfully create our button. And now, if user Tic on Tab one, then I want to show tab one related content. Similarly for tab two and tab three. For that, I'm going to take another D, and our Dipta is tab content. So I'm going to type dot tab content. With that, also, I'm going to take another attribute which is IT. ID equal to tab one. I mean, while the user click on Tab one button, then it's going to show tab one quantity. Inside this dip class, I'm going to take a heading, H two, heading two. And here I'm going to type tab one. Then after heading, I'm going to take a paragraph, P. And inside this paragraph, I'm going to type some random ticks. Lum, 50 word. In this step content, we have a heading tag and a paradap tag, and this is our first step content. Similarly, we need to create two more tap content for tap two and tap three. I'm going to set this portion and obligate to time. Then I'm going to replace the heading name. Tab two. This is for tap two. Also, we need to change the ID. Tab two. Similarly, we need to change the heading name for tap, Tab three. Also I'm going to change the content. I'm going to add different content in different tab. Here I'm going to add another paragraph, and I'm going to type low ten characters. Ten words. And from our type three, I'm going to reduce some words. So let's set the file and see what propina? Yes, it's word. He of three button. And also, you guys see tab cont Tab one, Tab two and tap three. And now we need to style this portion. So I'm going back to the head tag. And inside the head tag, I'm going to use style tag style. At first, I'm going to take a universal selector, which is ta. Then inside the cissO first property name is box size box size and a ham to use but our Box vi. I use this probity because in future, if I add padding to any tab, then it's not going to increase the width of this tab. And now I'm going to style the body tag, body. And inside this body tag, first, I'm going to provide a background color. Background. Background, and here I'm going to use a light gray color. Or that I'm going to tie light gray. After set this file, you can see it. Next, I'm going to style this container, D, class tab. This container holds up this button. So the tt tab, I set the round resis, I set the Css. First, I'm going to ascend W to this container. We 500 pixel. With that, I'm going to add another property which is overflow. Overflow hidden. If I set this file, you will see the and I'm going to set this file. In future, if I add multiple tab, I don't want to overflow the tap section. Also, I'm going to add a temporary border to the step section and I'm going to type border and the value is one pixel, and I'm going to use solid color. Solid and color name is black. Up to set this file, you can see the Here we use 500 pixel width, also a bottle. And now I want to style all the button which is inside this tab. So I want to select all buttons. So inside this tab, I want to select all buttons button. Then inside the color dress, at first, I'm going to provide background color to all this button. I want to type background and our background color is red. Also, I want to remove all the border from this button. By default, every button have a border. So into removing. For that, we need to use some border property. Border, nun. After this file, you can see the result. With that, also, I'm going to remove the outline. Outline, nun. And now, I'm going to add some padding to this button. So to type padding from top and bottom, I'm going to take ten pixel, and from left and right, I'm going to take 15 pixel. If I set this file, you will see the result. And then I'm going to change the color of this font. Color Pi and font to it, font, it, boon. After this file, you can see the. Now, if you by curar on this button, now you can see it's not pointer. So we need to make it pointer. That user can feel it is a button, otherwise leave. So I'm going to use another property name Cursor. CurzarPointer. And I'm going to satisfy. I I Hoberm cuts on this button, you can see the result. Now it's become a pointer. And now I want to change the button color when I berm cars are on this button. For that, we need to use a Posito selector Her. So I'm going to copy this selector, and I'm going to type the tape button. And here I'm going to use PosidoCAss Hober. Ober is the crass background. Red. And from this colored palette, I'm going to change the color. And from this color palette, I'm going to take the darker version of red, something like that. Otherwise, you can use AGV Vu or Higa V. And also, I want some small base to this transition. I want to use transition property here. Transition, and I want to transition this property, background copy background and our transition division is 0.3 second. Preset this file. If I over my cursor on it, as you can see, it's a background color, and also it add a little smooth transition. Now, if user click on any tab, it's going to add a active cast to this tab. We're going to do that using Java screen. But before, I'm going to style the active clam Hemotype dot active Inside the rounds, inside the calibrsF that, I'm going to copy this selection, and I'm going to paste it here, tab buttons dot active. Then inside the calices, then I want to change the background color of this button. Again, I'm going to take background property. Background green. I'm going to set this style. We are going to add the active class using Java strip to these buttons. So we successfully style our tabs. Now we need to style the content portion. For that, here we use a common class, which is tap content. Copy the class name tap content. So inside this style tech, I'm going to select this class, tap content, and inside the color resist, first, I'm going to provide a background color to our tap content. Background, and I'm going to take white color. Why? Also, I'm going to provide what to this tap content. What five and red pixel. I'm going to use Saw as tap a. I'm going to set this file and you can see a result. Here you can see, pix are nearly touch with the bottle. I'm going to add some padding. Padding, and I'm going to take 12 pixel padding. Then I'm going to use another property, which is font font family, and I'm going to use Aerial font, aerial. Also, I'm going to provide some line hi line high, line high, 21 pixel. After set this file, you can see the result. And now I want whenever I load my page, I don't want to show any depth content in this page. For that, we need to use this property. This way, none. So if I load my browser, it's going to hide all the tab. Let me show you. It hide all the content portion. This is the first part of this tutorial. In this part, we create the content and style our content. In the next part, we are going to start the Java screen. So thanks for watching this video. Stay tuned for the next book. Hey, guys. Nice to see you. This is the second part of this tutorial. And in this sectire we are going to start our Java screen. In our previous tutorial, we complete the Stimulant CSS part of this project. So let's start the Java screen. Up at the end deep tag, I'm going to take Deep tag tap and I said this script tag, we are going to start our Java screen. At first, we need to add levens all of this button. So we need to run a loop according to the button lane. Here we have only three button, so I need to run a loop for three time. And using Add even listener, I'm going to add click event to all of this button. So at first, I'm going to take a variable, and our able type is Cs. Cause and our variable name is tab button tab button. Equal to here I'm going to target all the tablings. You can see in the button, we have a class then tabling. I'm going to copy class name, tabling. And here, I'm going to type document QoI letter function. QoI selector A, and inside the roundresses, inside the single code, I'm going to pass the class name tablings. 5. Javascript tab part 2: I'm going to store all the tablings in this variable. And so we're going to do in this line. And for this array, we are going to run a loop. So here I'm going to type, and I'm going to run for for. I said the round dresses, I'm going to assign a variable where I equal to zero. Now we need to set the condition, and I want to run this I according to the butter N. I then tab button dot N function. I. This condition going to run our loop three time. Is going to end. Then we need to increment the I variable. I plus plus, and after run the loop, I want to add ClickEven to every button. For that, first, I'm going to select this array, tab button, then inside the square resis I want to target the first array item found to pass I. After select the button, I want to add add Even listener, add even listener. Now I want to add ClickEven. Then inside the single code, I'm going to type cling. So whenever user click this button, I want to run a anonymous function. So type function, and it is a anonymous function and semiconnt in this line. Now, whenever user click any of the button, then I want to get the value of data type attribute. If they praise tab, then we are going to show tab one content. Similarly, if they praise tab three, we are going to show tab three content. For that, first, I'm going to take you very well in this function where the variable name is tab name. This variable going to store the data attribute value equal to first, we are going to use this keyword, its mean the exact tab where user currently clean. Then we need to grab the data attribute value of this button. For that, we have another method named datas. Data sale. And then we need to mention the dataset name. And if I show you my dataset name, which is tab. So here I'm going to pass dot tab and semimo this line. So whatever value it store, it's going to save in tab name variable. And I'm going to pass this value to create this selector. At first, I'm going to take a variable name where and our variable name is tab quantum. Here I'm going to pass document, get element by ID, which ID? Which one is stories tab name variable? Is the rounddress I'm going to pass the Valuin tab n sem in this line. So when user target the tab one, then we need to target the tab one content ID. I want to say it's user, click on Tab one, then we are going to turn it this tap on det ID, which is tab one. Now, after target the tab content IDing, we need to add this block property to this D. For that, I'm going to type tab contain dot tile taught this the property, this play, and I want to change the win, equal to I want blog and semicon two in this line. By default, in our CSS section, we add the property nun in our tap content. Let me show you. Aerogacy in every tap content we use is the property nun. So when I load my browser, contents are not visible in our browser. But whenever user click on any button, I want this property block so that user can see the content related to this tab. And now we need to do one thing. If user click on any button, we need to add active class to this button, and we already style the active button in our previous tutorial. So here you can see, we run a loop for button. So we need to add a class to the particular button. For that, we need to use this keyword. This dot, here we need to use class list method, class is. Class is dot and add function. Inside the rounders, we need to pass the class name which is active and semiground two in this line. Let's set the five. For now, I'm going to click on tab two. After click on tap two, you can see the content to relitate tap two. Also you successfully add active plus to this step two. That's why type two background color become green because we style out active plus and set background color green. Similarly, if I click on tap three, also you can see the tap three content. At the same time it open tap two and tap three, and also it add active class in tab three, but there is a problem. We successfully open our particular tab, but we can't hide the other tab. After open tap three, type two should be grouped At the same time, it show all the tab we need to hide all the inactive tab. For that, we need to select all the tab. Here I'm going to create a variable and our variable n is but all tab content. A tab content. Equal to I'm going to target all the tab, I'm going to type document, dot, query selector all inside the arm pross I'm going to target all the tab. For that, I'm going to use this class name tab content. Copy the class name tap contain and I'm going to paste it here. Dot tap contain. Seg in this line. So I successfully target all the tab using the class name, tap contain. First, I want to hide all the unnecessary active class from the tab. So I want to this line, and I'm going to change the variable name. A tab button. To select all the buttons, I'm going to use this class name, which is tabling. This is the contrast between tabs for the coptic class name, and I'm going to paste it here. Document dot i Selector A tabling. So I successfully create two variables, our first variables store all the tap content, and our second variable store or the tab button. So first, I'm going to run a loop for the content, and I'm going to run for here I'm going to type for in the round presses, I want to be glad a variable. And our variable name is J, J ag width zero. Then according to the content length, we need to run a loop. For that, we set a condition. J, less then all tap content length function, and semicoe. Also, we need to increment the J variable, J plus plus. First, we run for tab one, then tap two, then tap three. Then inside the loop, it's going to make all the display property none. Some copy the variable, all type contains Is D querra says, I'm going to pass the V which is J. As I told you, qui slc are all function store value as an array. So it worked for particular array I type one by one, and I want to make digital property nun for the particular item. For that, we need to use style method style. Style dot display. Distal property equal to nun. As emigre two in this slide. I mean it's going to show the particular block according to the active button. So let's set the file and click on. First, I'm going to click Tab two. As you can see, it show tap two related content. But if I praise tap three, now you can see it show only tap three related content. So I successfully handle the content part. And now we need to handle the tap portion. And now we need to remove the active class from the active tab. So again, we need to use another follow. So I'm going to get this portion, and we need to follow nearly same process. First, I'm going to change the variable name. W K. I'm going to replace J with K. And here also, we need to replace the variable name. I'm going to replace step content with tab button because this time I run the loop for the tab button all tab buttons. And inside the square resist, we need to pass K variable. And to remove the active class, we need to use class list method again. I'm going to copy class list name, and I'm going to paste Kd classles here we need to use the opposite function, which is the ring. And I want to remove the active class. Copy the class name, and I'm going to paste it here. I'm going to set this fine. Whoops, remove is a function. Here we need to use round braces, not equal to sine. So cut this active class, and best it is a D round braces. And I'm going to set this file again. Let's click on any tab. So first, I'm going to click tab three. As you can see, tap three button is active and also it show the related content of Tab three. And now I'm going to click on tap two. So it's worked perfectly. After click tab two, it show tap two related content. Also active the tap two button and unactiv the tab three button. So how it's work? The first time is going to remove all the active plus from the tab. After that, here you can see a line, clusst add act. This line going to add act plus to the particular tab where we click currently. That's why you can see the act plus style properties. I successfully create our functional tab, and now I'm going to remove this unnecessary border. Here, I'm going to remove this border. Basically I just comment out this line, and I'm going to set this file again. But there is another problem. When I reload my browser, first time it do not show any tab content. It is just through a blank page with button. But when user open the website first time, I want to show tab one content. I don't want to show blank page. For that, we need to add some line in Javaswek. So after end of this four row, here we need to target the tab contents. I want to target the first tabling. So here I'm going to type document Dot, this time I want to select only particular item. I'm going to use query selector, not the idleor query selector. Then you said the round press, her you need to pass the tabling. Basically, it's going to target the first tabling only because her do not use Quisleor. By default, it's going to choose the first one here I'm going to apply click method clade. This math would click the button automatic. So when we reload this page, it automatically click the first button. So let's set the file and see, is it worked properly on n. So after step this file, first time you can see it automatically active tab one and it so tab one content. Then I'm going to praise tab three, and if successfully active the tab three and hide the tab one content and so the tab three content. So I successfully create a tab using Hess DML and JavaStre. I hope you like this project. Thanks for watching this video, Sched une for the next project. 6. JavaScript Scroll To Top Tutorial : Hello, guys, good to see you back. Once again, I'm back with new exercise related JavaScript stem and CSS. And in this tutorial, we are going to learn how we can create scroll to tub button using JavaScript. As you can see in my screen, I open a TML page, and in my TML page, it's pull up text. And also, you can see in the right side, we have a vertical scroll bar. So whenever I scroll down this bar a little bit, here you can see automatically a button appear in right bottom corner. And whenever I scroll up this bar, it automatically hide. So whenever I scroll down too much and I go to back to top, in that case, we can press this button. If I press this button, here you can see I scroll work smoothly back to the top. So this is the usage of scroll to top button. I know you are already familiar with this button. Maybe using this button in a lot of websites. Without wasting your time, let's start the practical and see how we can create it. As you can see, side by side, I open my Visual Studio code editor and my browser using Lib server extension, and I already create an SML document named index dot DMM. If you notice, you can see in my browser, there is no scrollbar. It's completely empty. At first, I'm going to take a paragraph in my body tag. I'm going to use Ptag Instead this paragraph, I'm going to use dummy text, Sound type, Lim, 1,500 character. After set this file, you can see all the text in my browser. Now I want to display button in that position at bottom right corner. After spread this button, it's going to scroll up the browser page. For that, I'm going to take a button tag up paragraph. Se paragraph here I'm going to type button. Also, I'm going to assign ID to this button. ID scroll the top. Inside this button, I'm going to type GT and I'm going to set this file. After I set this file, if I scroll down my browser, here you can see the button, go to. And now we need to style this button. For that, we need to use CSS. Inside the head tag, I'm going to use style tag, Style. Here I'm going to style this button using this ID. I'm going to copy the ID name and I'm going to tie has tag the ID. Inside the color recess, I'm going to use a property name color here I'm going to pass white color. Why. This colored property is used for fond color. Our next property is background. Background, and I want red color. Red. Our third property is padding. Padding and I want padding ten pixel from every direction. Ten pixel. And now I want to fix this button at bottom place. I want to fix it right bottom corner. For that, I'm going to use position property, position fixed. And from bottom, I'm going to take ten pixel. And from right side, also, I'm going to take ten pixel. Also I want when user robot the cursor on this button, I want cursor pointer. I'm going to use another property named cursor. Cursor pointer. Now, let's set the file and see is it worked properly or not. After set this file, you can see the result in my browser. At right bottom corner, you can see the button, go top, also you can see the position is fixed. I think I need to move this button upside little bit. From bottom, I'm going to take 30 pixel. Up step this file, you can see the now it perfectly pigs and now I don't want to show got button first time. When user scroll down the page a little bit, then I want to show this button. I want to say, when user scroll this page 300 pixel downside, then I want to show this button. For that, I want to use this property. Display, none. After step this file, as you can see, we successfully hide the button, and now we need to start the Java script. So after the button tag, and I'm take script tag, scrap. At first, we need to add an event to this window. At first, we need to grab the YXS position of this scrollbar. So here we need to use scroll event. So to type window, dot, add event Disener inside the round dress, inside the singer course, the event name and the event name is scroll. So when user scroll scroll bar, then I want to run an anonymous function. So comma, I'm going to type function. Also, you can take arrow function here. I would like to go with arrow function. After Run brcs I'm going to use arrow sign. And now we need to grab the scroll l. For that, we need to use a method, which is pageY opposite. Before I use it, I'm going to show in my console. Here I'm going to type console dot log I at the Runds window page Yosite. And semigo this line. Up to set this file. If I show you my console section in my browser, now you can see it written a value, which is 221. The value is showing how much we already scrolling the page. If I move this scroll bar upward, now you can see it's return zero. And if I move this scrollbr downward, now you can see the value. Instan 746. If you are familiar with JavaScript Dom, then you know how it's work. Now I want when user cross the 300 value, then I want to show the button at this position. For that, we need to use the same method with p condition. So I want to remove Coso dot log and I'm going to replace with IIP statement. I Window dot, page dot Yost, greater than 300, then inset the IP condition, I want to show this button. For that, first, we need to target this button. Instead this script tag, I'm going to take a variable and I'm going to declare the variable with const keyword. Cs and our variable name is scroll button. Scroll button. Scroll button, equal to document dot, query selector. Inside the round dresses, I'm going to target this button using the ID. I copy the ID name and round to paste, has tagged scroll to top and semi in this slide. I'm going to target this button using this variable. Is the colors, I'm going to type, so I'm going to type, scroll button, I'm going to use style method, style style dot, display equal to the double codes. And segun two in this line. When the page, scroll down 300 pixel at YX direction, then it going to say display property block to this button. Also, if it less than 300 pixel, then I want to hide this button. In the s parts the calibre is, I'm going to use this statement. Scroll bit style display equal to none. If the value is more than 300, then it's going to show the button. And if the condition is not true, then it's going to hide the button. Let's set the file and see is it work properly or not. Suppress step this soil, you can see the button. But if I scroll up this page, then what happen? As you can see, when the value is less than 300, then our program hit this button. Now I want when user click this button, then automatically our scrollbar move upward. For that, first, we need to add clicky bend to this button. Again, I'm going to use adding listener to this variable, mean scroll button. I want to type scroll button, dot, add event listener, and I want to add click event, click. After I use click event, I want to call anonymous function, and here I'm going to use arrow function. Then suddenly alias, here I'm going to scroll this quindo. However user click this button, I want to move this scrollbar upward. For that, I'm going to use a method named scroll two. I'm going to type Window dot, scroll two. Then you said the round presses and inside the color resses here we need to mention how much I want to scroll this page. Here I'm going to pass top bello zero, top colon zero. If you want to add transition to this movement, yes, you can. But before I'm going to set this five and I'm going to praise got button. When I praise go to button, as you can see instantly our scrollbar moved to the zero position, but there is no smooth ways to this transition. For that, we need to use another property and the propriety name is behavior. We have here inside the double codes and here smooth valve smooth. Let's set the file and see the result. After set this file, I'm going to move this score bar downward. Now you can see gootup button. If I click this button, now you can see the transition. Our score bar move to the zero position and also it at a beautiful transition. I successfully create this exercise. First, we insert score event to this window and we set a condition. If the Y upset value greater than 300, then show display property block, and if the condition is not true, then show display property none. And then we add click event to this button. Whenever user click this button, it's troll the Window and stop to the defined position. In our case, top zero. As we add behavior for transition, which is smooth. This is it for this tutorial. Stay tuned for the next tutorial. I hope you enjoy this tutorial. Thanks for watching this video. 7. JavaScript Sticky Header Tutorial: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial and relate it JavaScript TML and CSS. Today in this tutorial, we are going to create sticky header. Here you can see a file in my web browser and it's full with some content. Here you can see a dip which takes sticky header. Before this deep, we have some paragraph, and after this deep, we have another paragraph. Whenever I scroll my page, as you can see, this header dip stick to the top. I want to say this deep fixed to the top and also it increase the width and add a little box shadow. At the opposite way, if I scroll up this section, now you can see, which is dropped by 20%. This is the example of sticky header. Let's start the practical and see how we can create it. As you can see, side by side, I open my is studio code editor and my browser using lip server extension, and I already create an HTML document named index dot HTML. At first, I'm going to add a paragraph in our body tag. So He moonotypeP inside this body tag, and inside this paragraph tag, I'm going to add M 2000. Up sub this file, as you can see, it had DamiParagraph in our browser. Then after paragraph tag, I'm going to add a dip tag, B, and also, I'm going to assign a ID to the Zip tag. ID equal to header. Inside this dip tag, I'm going to type sticky header. Now let's style this page. Inside the head tag, I'm going to use style tag, style. Inside the style tag, first, I'm going to style the body tag, body inside the culiaO first property name is font family. I want to change the font font family, and I'm going to use Aerial font. Our next property is margin. I don't want to set any margin. I'm going to pass margin zero. I'm going to say this file. Now I want to add little padding to this paragraph. For that, I'm going to sell it P tag. Paragraph tag is the colors padding zero. From top and bottom, I want to say padding zero, and from left and right, I'm going to say it padding pixel. I'm going to set this file. Now I'm going to style the header D. This section, sticky header. For that, I'm going to slate the IDHs tag header. Then inside the clivors or first property name is background. Background, and I want red color background. I'm going to set this file. Now I align this text center of this D. For that, you need to use another property which is text align. Text, align text align center. With that, I want to increase the font size. Font size 20 pixel. Then I'm going to change the font with font with bold. I want to use bold font. Also I'm going to assign height to this sticky header. So type height, 50 pixel with 80%. And now I want to center this D. For that, I'm going to use merging property. Margin, from top and bottom, I'm going to use zero value, and from left and right, I'm going to use auto Value. It's going to align this container middle of this page. After I set this file, you can see the result. And now I when I scroll this page, I want to stop this stickhader portion top of this page. For now, as you can see, we don't have any content below the stickhader D. So we need to add some dummy content for this example. I'm going to add another paragraph up this D. P tag. And in this paragraph, I'm going to use nearly 1,500 word, Lem 1,500. After set this file, and now we can scroll this page also sticky header. Whenever I scroll my browser or sticky headed dip section, do not stick into the top position. I want to stick this header portion top of this page. I want to fixed it at top position. For that, we need to use JavaScript. Here I'm going to use Script tag script. Then inset this script tag. At first, we need to get YX Val sticky headed deep. I want to calculate the YXS position from the top. At first, we need to select this sticky headed deep. I want to type const and I want to declare a variable, and our variable n is header. Header equal to document, document dot, Quiri selector, inside the roundress inside the door course, I'm going to select the deep using its IDHs tag, header. Then semigt can this slide. I successfully target the header. Then I'm going to take another variable Cs and our variable is sticky and I'm going to use short from atiATs variable going to store oppste top value. Here I'm type header dot OosteTpen slide. Now, let's bring the variable in our console and see what value we get. So to type, console, dot log inside the round presses and the value is sticky. I would call sticky variable subgin in this line. If I set this file and show you my console section, inspect Console. Now you can see the value. It's written 4,180. From the top, our sticky headed distance is 4,118. Now I want to get Y offset value when user scroll the page. For that, I'm going to use Window object. Window, dot, add even listener. Then inside the round dresses, and here I want to call an event name stroll. Inside the single code I'm going to type strong and also I want to call anonymous function here I'm going to use arrow function. Parenthesis, arrow operator. And here I want to extract the scroll Y OsteVL. At first, I'm going to print in my Console, Console, dot, log. Is the roundress Window dot, page YsiteVL Sorry, Y opposite, not X opposite. So if I set this file and show you my console, now you can see our user already scrolled 3,909. If I scroll up little bit, as you can see, the value is reducing. Now it's print 3,709, now we need to set a condition. If the YFS is greater than SDK variable means sticky variable, then stop this sticky header bar at that position. I want to say if the condition written true, then fix the sticky header bar at that position. First, I'm going to remove console dot blog and here I'm going to say p condition. If Window phy opposite is greater is greater than ST variable then inside the class, first, we need to target this header, and I already target it. I'm going to use this variable name header, header and I want to add a class to this header dip. I'm going to use another method name class list. Dot, are you already familiar with this method? Class list, and I want to add a class and the class name is sticking. I'm going to use at function, add inside the round presses, inside the single code our class name. The ergon in this line. In the part, we need to remove the class name if the condition is not true. In's condition, s, inside the color res is here, I'm going to use the same line. I copy this portion and I'm going to paste it here. This time I want to remove this sticky class, I'm going to use remove function. I'm going to replace Add with remove. So when users stall this page, it's going to check the opposite value. If the opposite value is greater than this header, then our condition going to add a class to this D and our class name is sticky. If the condition is not true, then also it's going to remove our class from the headed D. Now we need to style this class in our CSS. Let's get to the style section. Here I'm going to type dot sticky. Instead the aliases, first, I'm going to use a property named position position fixed. Our next property is top top top value from top, I'm going to use zero. With that, I want to extend the width of this D Width, 100%. With that, let's use some box shadow. So to type box shadow box shadow. From x's direction, I'm going to pass zero pixel. From x's direction, I'm going to take two pixel. Also, I want to block this box shadow. I'm to pass four pixel and our box shadow color is gray. Let's set the file and scroll the page. Let's scroll the page. Hey, it's work, but not perfect. Because we need to select this sticky class with the header ID. So to copy the header ID. This means if our header have this sticky class, then apply this CSS. Let's set the file and scroll the browser again. After scroll the browser, as you can see, now it's work perfectly. First it stick our header top of this position, then it's extend the width of this header section. Now it completely hundred percent. But before, it's 80% and also it adds some little box shadow Bilo. Now, let's open the elements section to clear it. Here you can see in the sticky header de it assign a class named sticky. But whenever the condition fails, it removes the class name. Again, if the condition is true, it add sticky glass, and if the condition is fail, then it remove the class name. This is how we can create sticky header using JavaScript. Thanks for watching this video. Stay tuned for the next example. 8. JavaScript Side Menu Tutorial Part1 : Hello, guys, good to see you there. Once again, I'm back with a new project related JavaScript tamel and CSS. In this tutorial, we are going to create side menu. How we can create side menu using JavaScript. Here you can see in this page in our header section at left up corner, we have a button named menu. If I click this button, you can see the side menu bar. If you click this button again, it hide the side menu bar. Also you can see we add a little animation to this menu bar. Let's see how we can create this side menu. Without wasting your time, let's study practical. So as you can see, side by side, I open my visors to your code editor and my browser using Lifesaver extension, and I already create an TML document name index dot TML. And as you know, today in this project, we are going to create JavaScript side menu. So let's start it. At first, inside the body tag, I'm going to take in D and our Dev ID is Min. So I'll tie Dev, and I'm going to assign an ID Min. Then insert this deep, I'm going to take a button and in an order list. Here I'm going to assign a button. With that, I'm going to assign an ID to this button, Hastag and our ID name is Menutagal. And inside this button, I'm going to type a text, and our text is men. And before the Minutext, I want to show a Hamburger icon. For that, I'm going to use a code. Here I'm going to use an TML entity code to show the Min icon. So here, I'm going to type N person sign, hastexSgn and the code is 79 double 76, and then semi goon to ND line. This is STM entity codes. If you are not familiar with that, you can search it in Google. So let's set the file and see if it worked or not. After step this file, you can see the result. We successfully create Menu button with CN, and now I'm going to take a nodal list. UL, and also I'm going to assign an ID to this nodal list and the ID is Menu list. And inside this menu list, I'm going to take three unorder list, AI, multiply with three inside the unorder list, I'm going to take an nga tang, some type A. If I press NTA, as you can see, here you can see, we have three LI list with nga tang. By default, result studio code editor, come with Amit I use this shortcut. If your code editor not support Amit in that case, you need to type it manually. Inside this code editor, I'm going to add some dammi takes. Iem one. I'm going to copy this one and I'm going to type item two. As I'm going to type item three, I'm going to set this file. Now we need to style this menu. Inside the head tag, here I'm going to use style tag. Inside this tie tag, at first, I'm going to select the whole body. I'm going to type body tag, body. Inside the chalices, first, I'm going to assign a basic font to all of this page. Font, family, and I'm going to use aerial. Then I'm going to use another property which is margin. I want to finish all the margin. Margin, zero. And now we need to style the menu D Haztag men. Inside the alive first, I'm going to assign background color, background, and I'm going to use red color background red. Also, I'm going to assign weight to this D, we hundred percent. Also, I'm going to assign height, height 35 pixel. Our next property is position, position fixed. As you know, we're creating side menu. That's why we need fixed maneuver and also need to mention the fixed position. I want to type top zero. And now I'm going to set this file. Up to set this file, now you can see the main. If you notice, you can see our meno is not vertically center, so I'm going to add another property to make it vertically center, and our property name is line height. Line height, line height. Also, I'm going to add 35 pixel. If I set this file, now you can see our meno is vertically center. And now I'm going to style this manlis. I copy the ID name men List, and I'm going to select this one. Has tag, Mnulis. Then inside the calss I'm going to assign margin from the left side. I want to type margin, P and I'm going to pass ten pixel and I'm going to set this file. Now we need to style the Mntble Min. Copy the ID name, Minutugle and I'm going to select hastag Minutagal inside the civ says, here I'm going to use margin Margin P margin p thin pixel. If I set this file, as you can see, it provides little margin. It adds little margin to our menu button from the b site. Now we need to style the unorder list. For that, we need to select this ID, which is Mnlist. I copy the ID name manlist and I'm going to select in our style section. Men List. Inside the Caliss for this menu list, I'm going to use a transparent background color. I'm going to use background property, background, and to make it transparent, we need to use Alpha value. I'm going to type RGV value, RGBA. I'm going to use red Value four. And green Value 53. Blue Value 151. For transparency, I'm going to use Alpha value 0.95. If I set this file, you can see the result. Now we need to assign Wen height to this menu list. We and I'm going to pass 250 pixel. Our next property is height, height, 100 VH. This value going to use 100% view vote height. H stands for view vote height, and now we need to remove dot sine from this order list. For that, we need to use a property, and our property is list, List, style, is tile none. If I set this file, you can see the result. Also, I'm going to use padding and margin zero padding zero. Also margin zero. I'm going to set this file. Now we need to change the nga tag fixed color. We need to make it white and also we need to remove the underline. For that, we need to target Anca tags from the men ilist. Here type menise then we need to select all the gate, A. Is the colors is, first, I want to use white font color. Color, white. I want to set this file, if you want to remove the underline for that you need to use another property which is takes decoration. Takes decoration, none. Now I want little padding from the left side of this item. With that, I want to divide the ring with underline means border. For that, wouldn't you style the LI tag. Inside the nalist them tie, has tag, manlis all the LI, inside the manlis then first, at first, I'm going to add some padding. Padding, 20 pixel. Sorry, I don't want to keep padding from whole direction. I want to keep padding from lip side, SimultPadding, it. Padding lit, 20 pixel. F divided, I'm going to use border bottom property. Border bottom bottom, one pixel, and I want solid border. The bottler is white. If I set this file, you can see the result. Now we need to animate this menu. Whenever I click this menu icon, then I want to show the menu. With the same time, if I click the menu icon again, then I want to hide this menu. For that, I'm going to use animation, slide in animation and slide out animation. For that, we need to add active class to this minuton. First time, if I click this menu button, it's going to add active class. Second time, if I click this Minuton, it's going to remove the active plus. For that, we need to use JavaScript. In the next part of this tutorial, we are going to use JavaScript. Thanks for watching this video, stay tuned for the next part. 9. JavaScript Side Menu Tutorial Part 2 : Good to see you guys. This is the second part of this tutorial and in this part, we are going to animate this button. I want to show this side menu when I first time click on minVcle and also hide the side menu if I click on it again. Here I want to use sliding and slide out animation. For that, we need to use active class in this section. We need to insert active class on UL tag. First time, you're going to add the active class and second time, you're going to remove the active class. As you know, for that, we need to use JavaScript. After Deep tat, I'm going to take Script tag. Inside the script tag, first, I want to target this button because we need to apply the kick event to this button. For that, I'm going to create a variable, and I'm going to declare this variable using const keyword. Cs and our variable name is Menu toggle. Menu toggle equal to here I want to target this button. For that, we need to type document Coy selector. Inside the single code, we need to pass the ID. So to copy the ID name, Menu Toggle. Has tag, Menu tag and semicon to this line. With that, also, we need to create selector for UL tag because we need to hide and show the unorder list. Basically, I'm going to duplicate this line and I'm going to change the variable name Menu list. Document dot O selector here I'm going to pass this ID, Menu list. So here I successfully select the button and delist. Then you need to add a method to this button, which is addEvenlistener, and using it, I want to call click Event. Here I'm going to type Mnutogle Mnutoggle dot, addEven listener. Here I'm going to call click Event type click. Then I'm going to call anonymous function, and here I'm going to use arrow function. Parenthesis arrow operator. Then in the coliss in this unwadal list, I want to add a active class. For that, here, we need to use this variable, manual list. Menu list. Menu list, to add a class, we need to use class list method. Class list. This time, I'm going to use toggle function. Now the question is, what is the usage of Toggle function? This method works like a toggle switch. If I click it first time, it's going to add the class, and if I click it second time, it going to remove the class. Instead the rounddresses, we need to provide the class name and our class name is active. Now let's set the file and open the console section. Inspect Elements. I'm going to select this button Min. Here you can see in our menu list, there is a class. If I click this menu button first time, it's going to add a class named active and if I can click this mano button second time, it's going to remove the class. This is the usage of toggle function. And now it's time to style the active plus. Copy the class name active and I'm going back to the style section. Then inside the style tag, I'm going to select this class name active. Here we need to create slept like this. When in our men list, we add active class, then I want to style this active class. This style is for when we add the active plus. Also we need to create the slept for when we remove the active plus. I'm going to duplicate this section and here I'm going to use manlis and I'm going to use PosidoClass Colon naught. Then instead the round presses, I'm going to pass the class name which is active. Here we create two different selector. Minist with active class or minist with no active class. Now we need to animate this menu section. For that, I'm going to create two different animation. Here I'm going to take keyframes at the d keyframes and our animation name is slide in. Light. Then inside the calibss at the starting of this animation, 0% is at the clivus is. Here I'm going to use transform property. Transform, translate X, translate X. At zero position, I want to remove the whole menu out of this page for that here I'm going to use -100%. We mentioned this starting position of this animation. Now we need to mention the in position. At 100%, I want transit X direction Zn. Let's mean the default position. With that we need to create another keyframe to hide the menu list. Again, I'm going to select this section and duplicate it. This time our animation name is slide out. Then I'm going to just reverse the value -100% and for starting, I want to say it 0%. I'm going to sit this five. Our first animation is to show the menu section and our second animation is hide the menu section. I'm going to use this animation inside this selectors. When we use active class, I want to call this animation, slide in. I copy the animation name, and here I'm going to use animation property. Animation, our animation name is sliding, and then we need to mention the animation duration. I want to run this animation for 0.3 second. Next, we need to set the animation move which is is in out. When we use active class, I want to run this animation. Similarly we need to do the same thing for not active class. Copy this line and ins the calvas I'm going to paste it here. Here I'm going to remove the animation name sliding and I'm going to replace it with slide out animation. Slide out. At last we need to mention animation film mode, which is forward. If we use forward value, after complete the animation, it's not going to get to the start position. So now let's stub the file and see is it worked properly or not. After sub this file, as you can see, it hike the menu section. It's mean active plus is not incrud in an order list. So if I think this menu icon again, now it's going to add the active plus. Let me show you. As you can see the animation, it means it added the active plus successfully. Using tool function, first time it add active class and then it remove the active class. Sliding, slide out, sliding, slide out. Now you can add content in your website. Let's add some content up to this deep tank. So after man section, I'm going to add a paragraph, P, and I want to add nearly 2000 WadoParagraph. Lim, 2000. I press up this file, here you can see the result. Here you can see a lot of texts contained in this page. And if I click this meno icon, you can see the result. So this is it for this tutorial. Thanks for watching this video. Stay tuned for our next Tutorial. 10. JavaScript Image Slider Tutorial Part 1 : Hello guys. Good to see you back. Once again, I'm back with new project relatateTtable, CSS and Java Sweep. And today in this project, we are going to create a slider. How we can create slider. As you can see on your screen, we create a very basic slider. If I praise next button, as you can see, it changed the image with little animation. If I click Next button again, you can see the next image. Similarly, if I praise previous button, you can see the previous image with animation. But if I click Next button and this is our Lust image. Then again, I click Next button, as you can see, is back to the first image. Similarly, from the first image, if I praise previous button, now you can see is back to the ust image. This is a very normal and basic slider, but it can give you the idea how we can create beautiful sliders. Without wasting your time, let's start practical. So as you can see, side by side, I open my visual studio code editor and my browser using live server extension, and I already create an TML document named index dot HTML. With that, you can see in my current working directory, we have to toll three image. 01 dot JPG, 02 dot JPG and zero dot JPG. So at first, we need to create a container inside the body tag. And to this container, I'm going to assign a class, and our class name is slider container. Deep slider Container. And inside this container, I'm going to assign another D. And in this dip, I'm going to assign a class named slider, deep dot slider. And now I'm going to import images. For that, I'm going to use deep tag, not the image tag. So tie Deep dot and the class name is slide. And here, I'm going to use style property to import the image. Style tag and inside this inline style tag, I'm going to use a property name background. Background and I'm going to provide a URL. Inside the round dresses, I'm going to provide the image link, which is 01 dot JPG. At the same way, we need to input to other image. For that, I'm going to duplicate this section. Proton. This is image number two and last one is image number three. For three images, we create three different deep tag. Now we need to take to navigation button to control the slider. For that, upset the slider. Here I'm going to take another deep tag, Dev dot, and I'm going to take class name slider control. And inside the slider control, I'm going to take two button. At the first button, I'm going to type in the second button, I'm going to type next. Also we are going to assign class name to these buttons. In the first button, I'm going to assign previous slide, reps slide, slide. A second button, I'm going to assign next desk slide. As I told you, I'm going to create a simple slider. We turn over a stable part. Now we need to jump into the style section. Inside the head tag, I'm going to use Style tag. Style. But before I start styling, I'm going to set the file. After step the file, as you can see in my browser, we have only two button, previous button and next button. But if you notice you can see, you can't see any images in our browser. Because here we use background property to display images. But we do not assign any heightened width. That's why we cannot see the background image. When I style this slide, then you can see the background image. At first, we are going to style the slider container. So I copy the class name slider container, then I'm going back to style section. Dot slider container inside the cli res is first I'm going assign wed to this container, with and here I'm going to take 800 pixel. And for wheat, you can take your own win. It is not mandatory. And also I'm going to take a border to this container. Border one pixel, and I want solid bodre and I want black background color, 000. After that, we need to style this container. Slide, copy the class name. And here, I'm going to select dot slider and inside the color resist, and here I'm going to use display propriety, display and I want flix because I want all the images inside the slider container horizontally. I want to place all the images in a single horizontal line. And now we need to style the slide section. I copy the class name slide, and I'm going to select dot slide. And inside the color resist, here I'm going to use flex property. Flix. And using flex property, I'm going to assign wed to this slide. At first, I'm going to assign shrink and grow value. Shrink value zero, grow value also zero, and bass value 100%. And also, I'm going to take slide height, height, nearly 400 pixel. And for all the images, I'm going to set background size cooper. Background size Copper. And also we need to mention the background position, background position, and I want to position it center. So let's set the file and see party return. Hierogacy in my browser, it successfully horizontally align our images. Because I use display flex property, that's why it horizontally aligned the images. Next, we need to style the controls. For that, we need to select this class, slider controls. I copy the class name slider controls and inside the style tag, I'm going to select this one. And in the cool says, I want to place this control center of this image. For that, I'm going to use position property, position apps and from bottom, I'm going to take 20 pixel and from the left side, I'm going to provide 50%. So as you can see, we use absolute value and we want to place this navigation button inside the slider container. That's why we need to provide position value to the slider container. So here I'm going to use property name position, position relative. So if I set this file, as you can see, it plays the navigation button above the image. And now I want little gap between these two button. For that to style the previous slide and make slide button. We copy the class name, previous slide and Hem to stick the class. Dot, previous slide, coma next slide. Then inside the liss here I'm going to use margin property. Margin. From top and bottom, I'm going to take zero and from left and right, I'm going to take ten pixel. So if I set this file, as you can see, it provides little gap between to button. And if you want to press this navigation button left and right, yes, you can. Now, let's reduce the width of this parent container to adjust this image. So I'm going to make it 750. Up to stop this file, now you can see now our image perfectly adjust in our container. Also, you can notice our buttons are not perfectly aligned. So here we need to use transform property. Transform and I'm going to use translate x value. Translate, translate X -50%. If I set this file, now you can see we perfectly align our navigation button. With that, in case our images overflow to this border, then we need to hid in the overflow image. For that, we need to use overflow property. Overflow hidden and we need to sum it. I'm going to set this file. As you can see, after we set overflow hidden property in slider container, now to other images are not visible in this container because I don't want to show any content outside this border. That's why I use overpronPperty id. Now you might think our slider quite radom but it is not. It's ready, but it is not because heroin need to use JavaScript. When I click the next button, I want to show the next. Similarly, when I click the previous button, I want to show the previous image. Whenever I click on next button, I want to add active tas dynamically to the next image. Using the active class, we are going to perform the animation. We are going to perform the slide animation. Before we start the JavaScript, let's style read active class. Dynamically, I want to add the active class in these slides. Whenever we open our page, by default, I want to add the active tas in our first image, means first slide. Here I want to add the active class. Manual. Then inside this tile tag, up to slide, at the slide with active class, then inside the calibrass here I'm going to use transform property transform this transform property, slide the image. So I'm going to type, translate X value zero. If any slide with active plus, then I want to apply transform property, translate zero. It's mean automatically you're going to show the image inside this container. I successfully done our CSS part. At the next part of this tutorial, we are going to start Java Street. Thanks for watching this video, Stu. 11. JavaScript Image Slider Tutorial Part 2: So as you can see, once again, I open my Visual Studio code editor and my browser using Lifesaver extension, and I open my previous document, index dot H. As you know, in this project, we are going to create a slider. Dynamically, we need to put active class on these images. Here I click Next button, otherwise, previous button. For that, we need to use Javascrep. So outside the Dip tag, I'm going to take Script tag. Inside the script tag, first, we need to target slider, then buttons, slides, et cetera. So first inside the script tag, I'm going to target this slider. For that, I'm going to take a variable, Cs, and our variable name is slider. Slider equal to document, ii selector, the roundresses, I said the double codes, slider. Then Semgdon to this line. Next, we need to target all these slides. For that, I'm going to duplicate this line and first, I'm going to change the variable limb, slide to slide here, we need to use other function, not adslector. Here, we need to use ui selector. Oiisleor in the round presses slide. Now again, I'm going to duplicate this statement because we need to select these buttons. At first, I'm going to select previous button. I'm going to take variable limb PRV button, TN. For that, here I'm going to use Gileor. So I'm going to remove all from the Koi selector, and here I need to pass the class name, which is previous slide. Similarly, for next button, we need to create another selector. Hemel type next button. Document dot i sector, next slide. You successfully target the element and store it in these variables. Slider, slide, next button, previous button. Next, we need to create a variable for index number. Here you can see, we have total three slides and by default, we set active class in our slide one. When user click next button, I want to add active class slide number two and remove active class from slide number one. For that, we need index number of three of these deep tag. Our first index would be zero, then one, then two. At first, I'm going to take a variable and for this variable, I'm going to use late because we need to use it later. Late and our variable name is slide index. I'm going to use I and here I'm going to set a default value zero. Whenever we load the page, our value shows zero. And then when I load the page, I want active plus in our first slide. Hear add active plus minimally, but I want to add active plus with JavaScript. So for slides, Hero take a variable and the variable is slide. I copy the variable slide and her to paste it. Slides inside the square brass because it's an array. It store all the deep elements inside the square brass, her I'm going to pass our first slide and our first slide is slide index. Man zero. Then I want to add CSS class to this slide. For that, we need to use class list method, class list. Inside the rounds class list dot add function. Then inside the round dress, I'm going to pass the class name and our class name is active. I mean, whenever we load the page, it's going to provide slide index value at that position. By default, it's zero. Then it's going to add active class to the particular slide. Next, we need to add two events two of this button, previous button and next button. I want to add click event. For that, here I'm going to use add event listener method. At first, I want to add event on previous button. Previous button, dot, add event listener. Then instead the run presses, I want to add click event, click. Then I want to call a function. I'm not going to call anonymous function. Here I'm going to call a function name previous slide, slide. I'm going to create this function outside of this event. Similarly, I want to add event for our next button. I duplicate this line and I'm going to replace next button dot A even listener click Method. I'm going to call a function name next slide. And next, we need to create both the function. So first, I'm going to create function for previous slide. Function, our function name is previous slide. Similarly, I'm going to create function for next slide. Create this section and I'm going to type next slide. At first, I'm going to work on next slide function. Inside the next slide function, first, I want to remove active class from the current slide. For that, I'm going to use the same statement. I copy this statement and I'm going to paste it inside the next slide function. And here I'm going to use remove metal, remove. Remove active plus from the current slide because we need to put the active class on the next slide. So for the next slide, we change this variable value. Here we need to change this slight index value. I'm going to use the same variable, slide index, and here I want to paste it. Slide index equal to here we need to increment this value with one. If I type slide index plus one. 12. JavaScript Image Slider Tutorial Part 3: And then run this code, it's not going to work. Yes, this process can increment the value of this slide. But here you can see, we have to turn three slide. Up to slide two, we don't have any slide, but this method continuously going to increase the value if you click Next button. But I want to back to the first slide after complete the third slide. For that, here we need to use ternat function. So here I'm going to use ternat operator. So say the rounders her need to check here we need to check this slide index is last one or not. How we can check it set first, he to pass, slide index, slide index, identical weight, slides dot length. We have to tell three slide. That's why slide len function going to return three. But the problem is our index start from zero. That's why it's going to return zero, one, two, but length function going to count from one, one, two, three. He to minus one value minus one. If the condition match, then we need to move zero number index. I mean, first slide. Here I'm going to pass Z. But before, here we need to use quotient mark because we use Tati operator. And then after semicolon, if the condition is not matched, then I want to increment slide index value. So here we type, slide index plus one. We do not use hip condition here, here we use ternary operator. Inside the round presses, we check a condition. If slide index identical with slide length, then back to the zero index. Otherwise, increment the slide index. It's meant if the current index value is last one, then it's going back to the first slide. And if it is not, then increment the slide index value. And now we get the new slide index, so we need to add class to this slide index. So I'm going to copy this detment and I'm going to paste it here. This detment going to put active plus to the next button, but the active plus doesn't show the image. For that, here we need to use animation. So here we need to move the main slider using transpom propriety. Here I'm going to target this slider slider, and I'm going to use style property, style method. Style dot transbom equal to, I'm going to move this slider using translate Eggs value, but here I'm going to use template string. I'm going to take backticks. Here I'm going to use translate eggs value. Translate X. Then inside the round resis, I'm going to take minus, minus, and I'm going to take dollar sign and inside the calices, if you are familiar with tempest string, then you know the process. For that, you should have knowledge of a six and later versions. Here I'm going to perform some little calculation. Inside the calices, I'm going to type slide, index, multiply with 100 and outside the calices, I'm going to use percentage sign. So arrow successfully create the next slide function. At first, I remove active class from the current slide. Then we increment the value of slide index, and by default, slide index value is zero. He use ternary operator to create the condition. First, we check the next value is the value or not. First, we set a condition. If the next value is the last slide, then back to the zero position. I mean zero index. And if it is not the last value, then increment the slide index value with one. Then we add active class to the next slide and at last, we transform this slider using translate X value. Here you can see here we do some little calculation. If slide index value is zero, then it's going to return zero minus zero. But if slide index value is one, then it's going to return -100%. I two, then 200%. Then it's going to move this slide at minus XX direction 200%. So let's set the file and check it. Is it worked properly or not? After set the file, I'm going to click Next button. So whenever I click Next button, as you can see, it's changed the slide. And again, I click the Next button, you can see the different image. But if I click Next button, once again, as you can see, it's back to the first image because now it's matched with this condition. That's why it's written to the first image. But there is a problem. Our animation is not working. For that, we need to go back to the style section, and we need to style the slider. As you can see, her we use distal property flakes and basically, we move the whole slide. For that, we need to use transition propriety. Transition transform. And transition duration is 0.5 second, and our transition timing function is in. I'm going to set this file. Then I back to my browser. Again, I'm going to click Next button. Whenever I click Next button, now you can see the animation. Now our animation work perfectly. Now we need to work on our last button, previous button. Let's get to the JavaScript section. And from here, I'm going to copy all the code inside the next slide function. Then I'm going to paste it inside the previous function. Now, basically, we need to change the condition on nothing else. Here I need to say if slide index identical with our first index means zero, then go back to the last index. Here I'm going to type slide index. Dot length function with n function, I want to minus one. Another question is why I said this condition? Our side index length is three because we have to tell three slide. But our index start with zero, zero, one, two. That's why we need to minus one. To get the last index, we need to minus one from the index lane. And if the condition is that match, then we need to minus one from slide index. Here we need to decrement the value because we are going previous. Then everything remains same. So let's certifle and check. Is it worked properly or not. So first, I'm going to click Next button. This is our first slide. And this is our second slide. So if I click Previous button and now I'm going to praise previous button. After I press previous button, as you can see, it's worked perfectly. And this is our first image. So if I praise previous button again, as you can see, Hey, previous button is not working now. Also the next button, I think I did some mistic. I think oops I did a silvisti. Here we need to count this slide length, not this slight index length. So I'm going to remove index. Slide dot lens function. Again, I'm going to set this file. After set this file, if I click previous button, now you can see it's W. Our next button and previous button also work perfectly. So we already done. And if you want to remove the border, yes, you can. Just you need to remove the border propriety. Just comment out this line and set this file. And also if you want to place this button right and lift, yes, you can. For that, you can use display flex propabity. Let me show you. I need to go back, slider controls. And here, I'm going to use display property. Display flakes. And then I want to say wet to this container, weed hundred percent. Also, we need to use another property named justify content. So here I'm going to type justified content, and I'm going to use space between space between. If I set this file, you can see the result. So I successfully place previous button and next button right and left. And if you want to place this button and that position or that, you need to use bottom value with percentage, 50%. If I set this file, you can see the result. So you successfully create a slider and learn how we can create a normal slide. I hope you enjoy this video. Thanks for watching this video. Stay tuned for the next project. 13. JavaScript Confirm Box part 1: Hello, guys. Good to see you. Once again, I'm back with another project related Javascip HTML CSS. And in this project, we are going to create Confum box. As you can see in my browser, we have to tall two button, Contrm box and old Contrm box. If I click on old contum box, this is the default confirm box provided by Javasre. Here you can see you have product two button. If I praise Okay button, then it's going to perform according to this button. If I press Cassil, then it's going to perform other function. Let's click on Okay button. After press Okay button, as you can see it print, you praised Okay. This is the basic confirm box provided by Javare but today we are going to create our own confirm box. We cannot style our old confirm box. We cannot change the font color, button color, button style, confirm box size, et cetera. But in our new confirm box, we can do anything. We can style our confirm box. We can change button size, button color et cetera. Let me show you. If you click on this button confirm box, here you can see confirm box. With transparent background overlay, it is a custom on fromm box. You can display your message and also you can press your button and you can see how much button you want. If you want to pass 45 button, yes, you can. You can style your phone, change the background. As you can add cross sign in this corner. This is completely up to you. This is the confirm box that I'm going to cover in this tutorio. But before we start the practical, I want to til something. Here you can see a transparent. Inside this transparent, we have a confirm box. Mean, we have T. So we are going to call this black outer layer deep confum box, and we are going to call this White Deep message box. So first, we are going to create this black confirm box, and then we are going to put this message box inside this confirm box. Then inside this message box, I'm going to put this text and our buttons. So without wasting your time, let's start the practical. As you can see, I open my Visual Studio code editor, and I already create an TML document named index dot HTML. And I open this document using LP server. If I show you my browser, as you can see, now our document is completely black. So let's back to the the studio code reader. So here, inside the body tag, I don't going to type any TML. We're going to create the contrm box using pure JavaScript. So inside the body tag, I'm going to take script tag script. Then we are going to do all of these using a function. So I'm going to create a function. Function and our function name is Sho Qufram. Whenever user calls this function, it's going to send a message and I want to show this message in a confirm box. As a parameter, I'm going to take message. Instead the round presses, I'm going to type message. Then inside the Cali resis, at first, I'm going to take a variable. Inside this variable, I'm going to create a deep element. Also we need to add a class to this D, which is confirm box. Let's create the deep. I'm going to take a variable there and our variable name is confirm box. Confirm box, assign weed, document dot, create element, create Inside the rounddresses, I want to create a deep tag. D. Then Sem ground two in this line. And now we need to assign a class name to this D. So let's add D class. For that, I'm going to use this variable confirm box dot. We need to use classlist method, class list. And I'm going to use at function to add class name to this D. A inside the roundresses, we need to pass we need to pass the class name, and our class name is confirm box. Dash box and semi going to this line. We successfully assign a class to this D. For styling purpose, we need to assign this class. Here we create the contum box. At the same way, we need to create message box inside the contum box. To create the message box, I'm going to select both the lines and I'm going to duplicate it. Just I'm going to change the name. I'm going to rip this contum with message. Message box, and also we'll assign a class. So message Box class dot add. Also our class name is messes Box, messes box. And in this message box, I want to show a message is user pass as a parameter to this function. So we need to show the message in this message box. For that, we need to type message box dot here I'm going to use text content method. Text content. Using text content, we can show text in our DB element. And here, I want to show our message. So I copy the variable message and I'm going to paste it here and semicon in this line. And now we need to append this message box inside this confirm box. For that, I'm going to use appenchil method. So I type confirm box dot append child. Inside the round presses, I want to append message box to this confirm box. Copy the variable name message box, and I'm going to paste it here. And semi go on two in this line. So first, we create confirm box, then we create message box, and then we append this message box inside the confirm box. And now we need to insert button in the message box. But before I want to show what we create. For that, I'm going to call this function. So here I'm going to call show confirm. So Confirm. Inside the round messes, we need to pass the message, and our message is R 18 and Semgroal two in this line. If I set this file, and if I show you my browser, you can see nothing because we do not style our Dep tags. So let's d to the visas Studo coordinator. So first, we need to style the confirm box. So I'm going to copy the class name confirm box. And inside the head tag, I'm going to type tile and instead this tile tag, I'm going to selate confirm box. So I'm going to type dot and our class name confirm box. Then inside the Kalib says, first, I'm going to take background. Background, and I want black transparent background. For that, I'm going to use RGVvu RGBA. For red, I'm going to pass zero. For green, also, I'm going to use zero for blue, zero, and I'm going to take Alpha value 0.5. I'm going to set this one. Next, I'm going to assign with an height, Width, 100% and height also 100%. With that, we need to specify the position, position, and I want fixed position. Then I'm going to pass the location. P I'm going to pass from if side, I'm going to take zero. And for top, also I'm going to take zero. Then I'm going to use Z index property, Z index. ZR index, I'm going to pass a big Value, something 9,999. Because whenever we call the Ctram box, I don't want to show anything above the confirm box. Only I want to show the confirm box in our screen. That's why I use big VD. And now we need to style the messes box. I'm going to copy to copy the class name. Messes box. Also, I'm going to select dot message box. Then inside the color resis, first, I'm going to take background property. Background white. With that, I want to align the text inside the message box. Text align center. The next property I'm going to use font, font family, font family, and I want to use Aerial. Font size 16 pixel, and I'm going to take padding, 20 pixel. I'm going to add padding from all directions. With that, also I'm going to take a line height. Line height 1.5 am. Also, I'm going to take border to this message box. Border radius five pixel. And also I'm going to set boerradius to this message box. Border radius, by pixel. With that, I'm going to take box shadow, box shadow, and I want transparent box shadow. From excess direction, I'm going to take zero. From x's direction, also I'm going to take zero, and bloodiness of shadow is ten pixel. With that, and I'm going to take transparent color. For that, we need to use RGV RGBA. I'm going to use the Sincl 14. JavaScript Confirm Box part 2: And now we need to append this confirm box in our body deck. For that, we need to type document dot, body dot append child, Is the round presses, we need to append the confirm box in our body tag. Copy confirm box and paste it here, and semi go onto NVS line. So let's set the file. And if I show you my browser, as you can see, it append our confirm box in my browser. You can see the transparent black background. And inside this confirm box, we have also the message box, and you can see the text, RU 18. Now we need to place this message box middle of this page. For that, we need to use display property. Instead this confirm box, I'm going to use display, and I'm going to use display propriety, flex, and to make it vertically and horizontally centered, I'm going to use justify content, Justify content, cent for vertically center, we need to use align item property, Align item center. Let's set the file and back to the browser. Here you can see, we horizontally and vertically make it center. And now we need to insert buttons to this condom box. So let's back to the Visa studio code erator we need to add buttons inside the message box. For that, we need to create button box. For that, I'm going to select this two line, and I'm going to paste it here. And also, I'm going to move this line below the message box variable. To create the button box, we need to create a variable where button box. Then inside the button box, I want to add a class. So button box dot class dot add button box. Button box. Then we need to append this button inside this message box. Copy message box variable and Hemo type message box dot, appenchil Inside the round presses, here I'm going to pass button box. And semiconal in this line. So we successfully create the button box. Now we need to insert two button in this button box. So we need to create two different buttons. So let's create our first button. For that, I'm going to copy the same line. And I'm going to paste it here. And this time our name is button. This is our first button, button. But this time our element is not D, so I'm going to replace D with button. Also, we need to assign a class to this button. For that, I'm going to go p this line. I'm going to replace button Box with button. Button dot, classles dot at, and our class name is yes button. Third button, I'm going to use small B. And also, I need to add text in this button. For that, we need to use this line. Copy this line and I'm going to paste it here. I'm going to replace message box with yes button. Button dot text content, and there I'm going to pass insert the double code, yes. Now also we need to append this button to this button box. For that, I'm going to copy this line. So I'm going to replace message box with button box. Button box dot append child, and inside the button box, I want to append a button. At the similar way, we are going to create No button. So duplicate this section. And this time our variable name is no button. No button dot class list, and our bottom class name is No. And also, we need to change the text content of this button. Which is no. No button dot text content, equal to no. And at a similar way, we need to append this button to this button box. So I'm going to replace yes button OI No button. Button box dot Append hild no button. I'm going to set this file. So let's set the file and back to the browser. If I show you my browser, as you can see, below our messes, we have two buttons, yes and no. And now we need to style both the buttons. Let's go to the Visual Studio code editor and style this button. Let's get to this style section and we need to style the button box. I copy the class name button box and back to the style section. Dot button box inside the arises, first, I'm going to use first, I'm going to use margin property. Margin, top. From top, I want nearly 30 pixel margin. And then I'm going to style the button and no button. I copy button and back to the style section. Dot button. Is the calibers, but I want to apply same CSS, with the buttons. With button, also, I'm going to take no button, comma, dot, no button. So at first, I'm going to add padding property, paddy. From top and bottom, I'm going to take ten pixel and from left and right, I'm going to take 20 pixel font size, I'm going to take 16 pixel. Then I'm going to use margin property. Margin. From left and right, I'm going to use zero and from top and bottom, I'm going to use 20. And next, I'm going to remove the default border from the button. Border, none. And also, I'm going to add some radius to our buttons. Border radius nearly five pixel. With that, I want to make my cursor pointer when I go to this button. Cursor pointer. And now we need to provide different color bode buttons. I'm going to select s button and for s button, I'm going to use background green. I use font color white color white. I'm going to duplicate this section and I'm going to type for no button. I want background color red. And font color white. You can decorate your buttons in your choice. Now, let's set the file and back to the browser. If I show you my browser, as you can see, now it's look pretty good. As you can see, our compound box is ready, and also you can see the transparent background of this compound box. Through the transparent background, you can see the content behind it. This is it for this tutorial. In the next tutorial, we are going to coding the button and no button. Thanks for watching this video. Stay tuned for the next word. 15. JavaScript Confirm Box part 3: Alba is good to see you where. This is the second part of this project. And in this tutorial, we are going to coding button and No button. So let's back to the visual studio code editor. As you can see, we create button and No button, and I want to add ClickEvent both the buttons. Set first, let's add ClickEvent yes button. So type button dot. We need to use add event listener, add event listener. Then inside the round address, He, I'm going to use click event. So I'm going to type, click. And at the next parameter, we need to call it function. And our function name is Yes button. Button kick. So I need to create this function. Similarly, for no button, I'm going to copy the same line and I'm going to paste it here. I'm going to change the variable name. No button. And our function name is no button Key. Whenever user click yes button, it's going to call this function yes button. I user pays no button, then it's going to call no button Key. And now we need to create both the function. First, I'm going to create button click function. Copy the function name yes button and here, I'm going to type function and our function name is button Then round resist. Then at the calices I'm going to call a function. For that, when I call show confirm function, with this text, I'm going to pass another function. It's an anonymous function. Then at the round sis, here, I'm going to pass a variable and our variable name is result. And inside the Kress, I'm going to call IP statement. If the round presses result, then it's become true. Is user praise yes button, then I want to print in my console user press yes. Song type console dot log inside the rounds inside the double codes, pressed Yes. And if the condition is not true, then in our s part, se instead the round Caliss I'm going to print this same statement. Copy this statement, and I'm going to pastFT time I want to print praise, no. As you can see, we create this function as a parameter. So we need to take a variable. Basically, here we use callback ten. I'm going to take my variable name callback. So with message, I'm going to take another parameter name callback. Then I'm going to call this callback function inside the Yes button key. Let me show you. Call that Round braces and inside the round braces, I'm going to pass through. At the same way, I'm going to create no button function. I to create this section and I'm going to replace s button with no button No button kick. And inside the no button function, I'm going to pass forms. Now the question is how it's going to work. Whenever user going to call this function, show confirm, then this function going back to the callback function. In show confirm function, Hey pass to the two argument. One argument is text argument and another one is anonymous function. To handle this anonymous function, Hey create a variable name callback. We directly use this variable as a function in our button click function. And if user click button, then it's going to call this function call back and it's going to return true will. And if user press no button, in that case, it's going to return false. As you can see, Hi handle the condition using IP condition if else. If it's written true, then it's going to print press yes in our Csole. I user press no button, then it's going to print, pressed no. We nearly done our project. But before we need to remove the confirm box where the user click on yes button no button. For that, here I'm going to create a function, and using the help of function, I'm going to close this confirm box, and our function name is remove confirm box. Function, remove inside the calices and here we need to remove a deep element using remove function. We need to remove this deep element named confirm box. If you notice, this is the parentv element inside this deep element, we create our confirm box, message, et cetera. I'm going to select this variable and I copy. Then back to this function. To remove it, we need to follow this method. Document dot, body, remove child, remove child. There inside the round res is just only to pass the variable limb and our variable name is confirm box. I'm going to end the line. We create this remove function and also need to call this function. Copy the function name, and I'm going to paste after callback function. Also I'm going to call this function inside the no button click function, and I'm going to set this function. So whenever user click button, first it going to return true, then it's going to remove the confirm box. Similarly for no button. So just set this file, let's go back to the browser. Harroc see the confirm box. At. Whenever we reload our browser, automatically it appeared the confirm box because Harry directly call the confirm box. We do not use any button to call this confirm box. It's not a very big deal. So whenever I click yes button, as you can see, it removes our confirm box. But if I show you my console, now you can see, it's return, pressed yes. Because IT here's button. But if I reload my browser again and this time I'm going to press no button. After I press no button, as you can see, it successfully remove the controm box. But if I show you my console section, as you can see, now it's print, you pressed no. Basically, here I just pin to statement in our console. But you can do whatever you want. You can call functions, you can perform any calculation, et cetera. Basically, I want to show you how we can create confirm box. Now I want to call this confirm box up to place a button. For that, in our estimal portion, here I'm going to take a button. I'm going to create a button, button. And inside this button, I'm going to assign a ID, ID, and our ID name is open box. Inside this button, I'm going to type confirm box. So whenever anyone click this contum box button, I want to show the C box. To call this show confirm function, we need to create a selector. At the end, I'm going to tie document Coy selector, inside the roundress Is the double codes, and our button ID is open box. I copy the ID name and I'm going to paste it here, hashtag, open box. And in this button, I want to add click event, add event listener. Instead the single codes. And a single parameter, we need to call anonymous function. I'm going to create a arrow function. This is our arrow operator. I know you are already familiar with it. Here we add Tiven to this ID. Then insert the calices this function going to call this function, show confirm. I'm going to copy this section. Basically I'm going to cut this section and I'm going to paste it inside this anonymous function, and I'm going to set this file. Now, let's back to the browser. Now you can see in my browser, we have a confirm box. If I click this button, as you can see, it show our confirm box. Now we have two option, yes or no. I'm going to praise yes button. A third praise yes button, as you can see, it remove our confirm box. If I show you my console, also it print, you pressed yes button. So successfully create a confirm box. I hope you like this project. Thanks for watching this video. Stay tuned for the next project. 16. Modal Box: Hello, guys, good to see you back. Once again, I'm back with another project. And in this project, we are going to create a model box. As you can see on your screen, we have a button named Open Model. If I click on this button, as you can see, OpenemdL box with transparent background. It's pretty similar to previous example. And if I click this cross icon, as you can see, it close our model box. And also, we can close our model box if we praise anywhere outside the modal box. Suppose I click in that place. Also it close our model box. So how can we create Model box? Let's start the practical LLC, how we can create it. As you can see, side by side, I open my Visual Studio code editor and my browser using lip server extension, and I already create an HTML document, named index dot HTML. Today in this project, we are going to create a Model box, and our project is pretty similar with previous project. So without wasting your time, let's start it. So at first, we are going to start with HTML. So instead the body tag, first, I'm going to take a button. Button. In this button, I'm going to set an ID. ID equal to my button, and hero type Open model. Then I'm going to take a D, D, and I'm going to assign ID to this D. ID equal to, and this is our model box. Here I'm going to set my model, my model. With that, also I'm going to set a class class equal to model. This is our trigger but for model, and this is our actual model. Inside this model we hit to pass model content. Here I'm going to take another dip element, D Also I'm going to set a class to this de element. Class model content. Hyphen content. Then inside the model content, first, I'm going to take a paragraph P tag here I'm going to pass some dammitext. Lower, six. Basically, it's going to add to six word here also, we need to take a I gun to close the model box. For that, I'm going to use span tag with TD code. So I want to type span and I'm going to assign a class to the span tag class, and our class name is close. With that, here I'm going to use NTD code for cross sign. To start entity code, first, we need to use person sign. Then I'm going to type T Astin, this one. So let's set the file and see what it return. After I set this file, as you can see, first it create a button, then inside the model box, it had model content. Basically, it had a dummy paragram. With that, it had cross sign. We are going to use this cross sign to close this model box. And now we need to design the model box using its class name. So I'm going to select the class name model. And after title tag, I'm going to use style tag. Style. Inside this style tag, first, I'm going to select the model. Inside the aliases, our first probity name is display. Display. For now, I'm going to use Dist do position, and I want position fixed position. With that, also I'm going to use Z index. Zero index is very important because I don't want to show anything above the model box. When I click on this button, I want to show only the model box. I'm going to set ZR index one. And if you want, you can use any bigger value. Because in this project, we are going to create only the model box. That's why I don't need any bigger value. If you add more estable content, then you should use bigger Z index value. Our next property is IPT. From LAPD I'm going to take zero for top, also I'm going to take zero. Then I'm going to set height and wide to this model box with 100%. Also, our height is height, 100%. Here we use full height and full width of our browser. Then also, we need to control the overflow. Overflow and I want to set overflow auto. Here I enable scroll if user needed to scroll. That's why I use auto Veil. Our next property is background color. Background color, and I'm going to use Rg VV RGBA. For red, I'm going to take zero. For green, also, I'm going to take zero. For blue, also, I'm going to take zero. For red, I'm going to take zero. For green, also, I'm going to use zero, and for blue, again, I'm going to use zero. And for Alpha Value, I'm going to use 0.5. It's going to provide black, transparent background, and I'm going to set this file. And here you can see the result. Here you can see it take full height and full with of browser, and also it provides a transparent background. So we successfully style our model background, and now we need to style the model content. For that, I'm going to select the class name model content in our style tag dot model content. Inside the colorss our first property is background color. Background color, and here I'm going to use a hexa dissimilar el hashtag FE, FEFP. It's going to provide a little gray white color. Next, I'm going to use Margin property. Margin. From top and bottom, I'm going to use 15%. And from left and right, I'm going to use auto. With that, I want to stat padding to this model tent. Padding and I want to add padding from every direction to pixel. Our next property is border, and I want one pixel border. With that, I want solid bo solid. Our border color is eighth eight. Here I use gray border color. Then we need to mention the width of this model box. Hemotp with 80%. It could be more or less depending on screen size. Then I'm going to set this file. And now we need to style this cross K. We need to move it right side. So let's select it Smocpy the class name. Close. I'm going to type that close. Then inside the Cali re says, first, I'm going to assign a color, colored, and I'm going to use Higa V. Here I use a little bit gray color. With that, I'm going to say float. Float, right. Our next property is font size. Phone size 28 pixel. And our another property is font weight. Font to it and I want to use bold. I want bolder font. Let's step the file and see. After this file, you can see the result. Now it's look a little bigger. Now when I hober my cursor on this icon, I want cursor pointer. With that, I want little dark color to this icon. For that, we need to use Hober effect and focus. Sound type, dot, close, colon Her. With that, also, I'm going to take dot, close, colon, focus. Then inside the colo resist, first, I'm going to say fond color, color, and I want black colored. And then I'm going to say it takes decoration, takes decoration, none. I don't want any decoration. Unless I'm going to style the cursor, cursor pointer, and I'm going to set this file. Now, if I open my cursor on this icon, you can see the result. First, it change the background color, then it make our cursor pointer. Successfully create our simple model box, and now we need to hide this model box. I'm going to use distal property, none. I want to set this file. After set this file, as you can see, it hide our model box from this page. Now we need to show this model box when I click this open model button. I want to say when I click this button, then I want to make Dist property block. And when I click the close icon, then again, we need to make the disturb property none. So we are going to do it using JavaScript. This is it for this tutorial. In the next tutorial, we are going to start the JavaScript. Thanks for watching this video. Stay tuned for the next tutorial. 17. Modal Box adding javascript: Hello, guys, good to see you back. This is the same part of this tutorial, and in this part, we are going to start the Java screen. So after the last dip tag, I'm going to take script tag, script. And instead the script tag, first, we need to get the model. For that, I'm going to create a variable, where, and our variable name is model, model equal to, and we are going to get the model using its DNM. For that, we need to type document, get element by ID and inside the double codes, the ID name is my model. Copy the ID name and I'm going to paste it here. Then Semgro two can this slide. At the similar we need to grab the button using its ID name, which is my button. I'll copy the class name and I'm going to duplicate this statement. This time our variable name is button BTN, document dot get element by ID, my button. Next, we need to grab this pen element to close the model. For that, I'm going to create another variable where our variable name is span. Span equal to document dot. This time, I'm going to grab this span using its class name. Get element by class name. Then inside the rounds, we have to provide the class name and our className is close. With that, I want to grab the first I. Instead the square recess, we need to pass the index number, Z and then subgroun two in this line. I successfully select all the elements. Now, when user click on the button, I want to open the model. For that, we need to use onl function. We need to run on flick function to this button variable. So type button, button, dot, on click. Equal to, I'm going to run a anonymous function function. Then ARD Calibre says, I want to make model display property block. For that, we need to use style and display method. Let me show you. Homo type model dot, style, dot display. Equal to, I want to say it block. Then semicron two in this line. Let's set the file and click on Open Model button. After prese Open Model button, as you can see, it show model. But if I click this cross icon, it cannot lose our model. For that, again, we need to make display property none when I click on this icon. I'm going to duplicate this section, and this time, I'm going to run onl function on span tag, span dot onClick equal to anonymous function. Then if user clic ons icon, then make model display property none. If I set this file and click on Model button, as you can see it show our model. Now if I click on the cross icon, as you can see, it close our model. Successfully create the model box. Now, when you click on outside anywhere in the model, I want to close the model blog. Now, whenever user click outside the model box, I want to close the model box. Suppose user click at that place. Also, I want to close the model box. For that, we use for that, we need to select the window object. Let me show Window, onclick function on click. Then I want to call anonymous function. As parameter, I want to call an event. Then inside the Calirass here I'm going to use a hip statement. I event dot target equal to equal to model, then then stic Calibra says, I'm going to print this same line. I copy this statement and I'm going to paste it here, model dot style dot display equal to none, and I'm going to set this slide. Let's open the model. After open the model, I'm going to click on anywhere outside the model box. Now you can see, also it clows our model box. I hope you like this project. So thanks for watching this video, stay tuned for the next tutudio. 18. Search Table: Hello, guys. Good to see you back. Once again, I'm back with a new project. And in this project, we are going to create filter search table. As you can see on your screen, we have a input field. With that, we have a table. And in this table, we have to tell force today with two column. In our first column, we say student name, and in our second column, we say student country name. Suppose you have thousands of students in your directory. In that case, you want to search a student name which contained W character. So you may press W. As you can see, it's written add one. And it hide all the student table row. It show only the particular row, add one. Similarly, if you want to search Boris from the two enlist, yes, you can. I want to see the country name of Bois from where he belong. So type Boris. As you can see, he is from UK. Our search table is pretty advanced. Let's start the practical and see how we can create this kind of search table. So finally, we are in my visa studio code editor, and I create an estiML document named index dot HTML. And I open this estimate document using our live server. And now the document is completely black. And as you know, here we are going to create a feeded T. So let's start with HTML. First, I'm going to take a input tag, input. And input type is text. Also, I'm going to assign a ID to this input tag, ID and for ID, I'm going to take my input, my input. And also, I'm going to take a placeholder for that input. Las holder and inside this placeholder, I'm going to type search for name. Search for name. Let's set the file. If I show you my browser, you can see a input bar. Don't worry. We are going to start this input section later. Update DR is table part. Let's back to the user studio code. Now I'm going to create a Tan. I'm going to use tablet Tavin. In this table, I'm going to assign a ID and ID Name is ID equal to my table. Inside this table, I'm going to take table row using Tata TR, table Row. Also, I'm going to assign a class to this table row. Class header. And inside the table row to create the cola we need to use TTAG. This is our header, so I'm going to use TH th, I stars for table header. Our first header name is name, and our second header name is country. Also, I'm going to give some wet to this table header. I'm going to use inline style method. We, 60%. For name, I use 60% weed, and also I'm going to use the same property in our country column. Copy this section. And I'm going to paste it here with 40%. I'm going to set this file. If I show you my browser, as you can see, it creates two column name and country. We successfully create Tv header. Now we need to fill data using TA tag. Let's go to the users studio code, and here, I'm going to use TA tag TR. Is the TA tag, I'm going to use TD TD and I do bed. In our first TD tag means name column, I'm going to take a name and the name is add one. Aram form USA. Then I duplicate this section. Then I'm going to take another name Ravi Ravi from India. Then again, I'm going to duplicate this section. And our next student name is Amsa Amsa from Pakistan. At last, I'm going to take another Tab row, so I duplicate this section, and our last student is from United Kingdom, and his name is Boris. Boris from UK. I'm going to set this file. If I show you my browser, you can see here I can see we have to two students from different countries. Now we need to style this search bar and the table. Let's back to the visual studio code. I open my isal Studio code and my browser side by side, we can see the design. At first, we need to style the input bar. For that, I'm going to use this ID, my input. Then I'm going to create style Dag style inside this tile tag has tag our ID Name, input. Then in the colors is, first, I'm going to say, weight, 100%. Then I'm going to use pon size property. Pon size 16 pixel. With that, I'm going to add some padding.PaddingF top, I'm going to take 12 pixel. From right, I'm going to take 20 pixel. And from bottom, I'm going to take 12 pixel again. And from the left, I'm going to take 40 pixel. With that, also, I'm going to add some border. Border. I want one pixel border and I want solid bot, sold our border color is gray. Up to set this style, you can see the result. Now our sars looking pretty good. But also, I'm going to add some margin from the bottom. Margin bottom margin bottom to a pixel. I successful style the input section. Now we into style the tab section. For that, I'm going to use this ID, my table Hashtag my table. Then inside the calibrs my first property is first property we are going to use, which is border collaps. Border. Collapse. Border collapse equal to collapse. It going to collapse the borders. Our next property is with 100%. I'm going to use 100%. Our next property I'm going to add, which is bod. Border, I want one pixel border. Also I want solid border. I'm going to say boater colored Aztac DDD, gray color. Also, I'm going to set the font size font size to pixel. I'm going to set this file. Now you can see the changes in our tip. Let's increase the font size of this tip. Here I'm going to pass 18 weeks. I'll slip this one. Now it's look pretty. Now we need to style the table cells, including header. So to copy, my table, and I'm going to select both. Table header and Tb theta. MtvilTHtag Wi I'm going to select MTvil TDTag. Then inside the calibrssO first property is text align. Text align, and I want lift alignment, lift, and I'm set this file. Also, I'm going to add some padding between these cells. Padding nearly 12 pixel. This is good. Now our Tevis looking very good. But if you notice, you can see, there is no divider line between Tevis row. For that, I'm going to add border. My tab and I'm going to select this time T at tat will row. Then inside the calibraces, I'm going to add border at bottom. I'm going to type border bottom border bottom, one pixel, and I want solid border. With that, I'm going to say border color, DDD, gray color. Now you can see the result. Now I want to add O effect to our table rows. When I over my cursor, any of the row. For that, we need to select my table, TR So table row header. Because for table header, here we define a class name header. With that, I'm going to select all the table row. M TR Colon O. Then inside the calices, I want to say background color. Background color, and the background color is Hatag if, if one, if one. I'm going to set this file. It's a gray color. Here we use combination selector. Whenever I open my cars on the stable row, as you can see, it provide gray background color to the particular row. In this tutorial, we done CSS and hist part. At the next tuttial we are going to start the Java Script. Thanks for watching this video, stay tuned for the next 19. Search Table Add Javascript: Hello, guys, good to see you back. Once again, I am back to my Visual Studio code editor, as you can see, we already create the table and the search bar. As I told you, from this part, we are going to start JavaScript. At first, I want to add an event, event to our input section. Here, I'm going to use an event, and our event name is on Keh on Key. This event going to call a function when user release the key. Here I'm going to call a function and my function name is my function. My function. So I'm going to create the function inside this script tag. So copy the function name, then back to the table tag. Here I'm going to use script tag. Script. Inside this script tag, first, I'm going to create a function. As you know, our function name is my function. Function and my function name is my function. Then inside the CariasF, I'm going to declare some variable, and to declare this variable, I'm going to use one liner. Word, our first variable name is input. C. Our second variable name is filter. Our third variable name is table. Our fourth variable name is table row, PR. Our fifth variable name is theta, TD for loop iteration, I'm going to use I and our last variable name is text dV. Then semigr into N this line. So first, I'm going to grab the input data using input variable. For that, we are going to use this ID, my input. I copy the ID name my input and back to the function. And here I want to type input equal to document dot, get element by ID, document dot, get element by ID inside the Rundss inside the double codes. Inside the double codes or ID name, my input. Then semicurnt in this line. To handle this case sensitive of input data, we are going to use filter. Filter, equal to input dot value, Here I'm going to use a function named two uppercase, two uppercase. Then inside the round presses, and this is a function to aperks function. Then Semgro to end this line. This function going to convert small case over into aperks to handle the case sensitiveness. Next, I'm going to target the table. For that, I'm going to use this Mitf copy the ID name and herotype table equal to document, dot, get element by ID inside the round presses, inside the double course our ID name, my table, then semicolon to ND line. Also, we are going to target Taviaw using Tata. T equal to tablet, get element by tag name. Then inside the round ss, I'm going to pass the tagnym which is P tablow then similar to NVS line. From the Tavil variable, I'm going to target the tbows now we need to run a loop through all the tbow and hide those who don't match the search query. Here I'm going to type four. For inside the round resis, I'm going to type I, I as with zero. Then also need to set a condition. I less than TR means Devera dot LN. Then increment the I variable. I want to type I plus plus. Here you can see, we already declared a variable name I. Then I assign I with zero and to run the loop through all the table rows, here I use length function with tow tbowt Length. If the I value every time match with this condition, then increment the I value with one. Now inside the coli resis first, we need to target the tv letter from the every row. For that, I want to use this variable TD. TD equal to TR, table row. Then inside the square resis, I'm going to pass the I value I. We need to extract table data from every row. That's why we need to pass I because every time we run the loop, it's going to add new index number to I variable, get element by tag ni. Get element by tagnim. Then inside the round resis, I want to tag data means TD. Inside the D goes, I'm going to type TD table data. Then we need to select the specified table data. Here I want to search students by their name, not their country. For that, we need to pass inside the square versus zero, their index number. If you search students by their country, in that case, you need to pass one because our index start with zero. As you can see, we have to do two column in our tab index zero and index one. That's why I pass zero because I want to search by their name. Then semicon to end this line. Then inside the four loop, here I'm going to use p condition. If inside the round verses, TD table data are written true, then inside the Cariss I'm going to call a variable named text V. Text value equal to, I'm going to compare table data using or operator. So first, I'm going to type Td dot text content or operator td.in a text. Then semicolon to Egisline. Here we compare to method using order operator to get the fixed value. Our first method is fixed content, and another method is inert text. If any of the method get the value, then assigned to this variable. Then inset this EP condition, I'm going to run another IP condition. If I set the round res is text value, I'm going to call to upper guess function to upper case. Dart. Also, I'm going to call index of function, index. Then inside the round ss, I'm going to type filter. Here, first, we convert this text value into uppercase. Then we use index of function. These functions retain the position of the first occurence of the value in a string. Then greater than minus one. Then inside the calices, as you know, we run the loop through over all the table row element. Which row content match with the text value, I want to show only the particular row and I want to hight all the other row. This condition, I'm going to check if the filter value is substring of text value. Then inside the IP condition, I want to display the particular row. Suppose you use that type BO in their search feed. Then after convert this input value into upper case, this function going to find body C is substring of text value, then show only this particular row. Inside the calibrass I'm going to type ER inside the square resist. Is the squared resist particular row number, I here I'm going to use style method, style dot, display, and equal to, I want to remain as it is. I don't want to change the distal property of particular row, but I want to hide all the other roles. For that, at the s part, else inst the cli is, I'm going to use the same statement. I copy this statement and I'm going to paste it here. But this time I'm going to say dis property, none. And I'm going to set this file. We create our search table. Let's set the file and search some query. First, I'm going to type Ravi RA. As you can see, after type A, it shows the result. It shows the particular table row and height other table rows. Similarly, if I search for Bodies O then also you can see, it's written the particular table row from Bodies. It autocomplete the student name, and I don't need to type and I don't need to type complete name and I don't need to type complete name. But this time, I'm going to type only I. As you can see, after press on the I, it's going to return result from two table row Robie and boys because both the name contain IQ word. To handle case sensitive ness, we convert result and search query into perks. We successfully create the project. Thanks for watching this video statue for the next project. 20. My to do list implement HTML and CSS part 1: Hello, guys. Good to see you back. Once again, I'm back with a new project related JavaScript HTML and CSS. And in this project, we are going to create my DB list. As you can see on your screen, we have a input field. Also, we have a Add button. And below this header section, we have some list, and we have put all four list item in this list. And now I decide to add another list item to this list. I want to buy some Apple, so I'm going to add these in my list. So to type buy Apple. And I'm going to press Add button. So this is our To list, and I complete some of the text from this list. Suppose I already buy eggs and read a book. Then I'm going to add checkmark to this list. So I'm going to click on it. It add checkmark to this list. And if you buy mistake hake any of this list item, you can uncheck it also. Suppose you want to unhacke pay bills, then click it again. It's going to uncheck your list item. Also, if you want to remove list item from your To list yes, you can. Suppose I want to remove MIT advance from this list. Then right side on the screen, you can see a closed button. If you click this Close button, as you can see, it remove the list item. This is how you can remove list item. You can check or uncheck your list item. Also you can add multiple list item as much you want. Without wasting your time, let's study platel and see how we can create it. As you can see, side by side, I open my Visual Studio code editor and my browser using LipserverEtension. I already created an TML document name index dot Asta. At first, inside the body tag, I'm going to take Deep tag. D. I'm going to assign a class and ID to this dip DA ID and the ID name is MDP. And the class name is header. Then inside this dip tag, first, I'm going to take heading to tag, H two, and here I'm about to type M two list. Then I'm going to take a input, I input tie text, and here I'm going to use I IDequal to my input. Next, I'm going to use another parameter, which is placeholder. Placeholder, and by default, I'm going to type title. I'm going to set this file. Up to set this file, you can see in N browser. And then we need to create a Add button. For that, I'm not going to use any button tag. Here I'm going to use Span tag span, and also I'm going to add a class to the span tag. Class equal to Add button. And here I'm going to type add and I'm going to set this file. Then I'm going to add a nodal list outside the D element, nordal list UL. Also, I'm going to assign ID to this nodal list. ID, ID equal to MUL. Then one by one, I'm going to add some list items. So I'm going to use Alita. In our first list item, I'm going to type B X. Then I duplicate this line, and also here I'm going to type, read a book. Next, I'm going to add pay bills. I'm going to replace read a book with pay bills. And last, I'm going to add meet, meet, add one. And I'm going to satisfy. So these are all list items that I already add to our M two do list. So first, you need to buy some eggs, then you need to read a book, then you need to pay your bills and meet your friend add one. Now, suppose you pay your bills, so you need to add a check mark to this list item. For that, here I'm going to add a class. Class and our class name is chick and I'm going to set this file. So we successfully complete our table part. Now we need to start with tiding. For that, in at the head tech. Here I'm going to type style tag style. And inside the style tag, first, I'm going to select a universal selector, start. Then inside the caliss first property is box sizing. Boxing, box sizing, border box. Next, I'm going to select all the UL tags, UL. Then inside the calisF I'm going to remove all the margin and padding from the list. So type margin zero padding zero. Now we need to style all the list items. Hemo ti, UL, AI, then in at the clerssF I'm going to make cursor pointer, cursor pointer. Our next property is position, position relative. Also, I'm going to add some padding from every direction. Padding. From top, I'm going to add 12 pixel. From right, I'm going to add eight pixel. And from bottom, also I'm going to add 12 pixel. And from the lab, I'm going to add 40 pixel. Our next property is background. Background, and for that, I'm going to use Axa, has EEE is a kind gray color. Then I'm going to add some font size. Font size 18 pixel. With that, I'm going to add some little transition because in future, we are going to add Hobo effect on it. That's why we need to use transition property. Transition and transition timing is 0.2 second. Now, heroin need to use another important property, which is user select. Using this property, we can make the list item unselectb. For that, I'm going to type user select Nun. I'm going to set this file to set all the list items to a different background color, we need to use NGL selector. Let me show you. I'm going to type UL, Ali colon in child. Then inside the round bruss, I'm going to slit odd. Then inside the carlirss, I'm going to use a property named background. Background. And I'm going to set background color, a hexa VH tag, F F nine, F nine. I'm going to set this file. So here you can see the Jebrastip effect in the list items. Next, I want the dark background when I open my curar to this UL tag. Sorry, the AI tag. For that, we need to select UL, AI colon O. I'm going to use Over selector. There is the coloss I'm going to tie background, background, and I need little darker color. So I'm going to use Hatag DDD. So set this file. If I Oba my on this list items, you can see the effect. I already use transition property, transition 0.2 second. That's why you can see the little transition when it changed the background color. Now, we need to style the particular list item, and the list item name is chaped. Here I use a class name chipped. We need to style this item, so I copy the class name chap. 21. My to do list implement HTML and CSS part 2: So from this list, user already pay their bills. I need to check this list item. So I need to style this list item. For that, we need to tie li dot class name, which is checked. Then instead the calibraces. I'm going to use a property name background. Background Haz tag 888. With that, also I'm going to change the font color. I want white font color. Color Hashtag and takes decoration, takes decoration. I'm going to use line through. If I set this file, you can see the result. So you successfully check this list item, and also we need to add check mark before the payable. For that, we need to use a Posurus selector, and our Posiduruselect name is before some type Uli dot check. Then colon I'm going to use before selector. It's a Posius selector. Then inside the Caliss first we need to create a blank content. Contain equal to blank. Our next property is position. Position absolute. Then next, I'm going to use border color. Border color. Border color, I want white color. Haz tag if if A. Border style. I'm going to use solid. Our next property is border with Bder with. From top, from top, I'm going to take zeal. From right, I'm going to take two pixel. From bottom, also I'm going to take two pixel, from lab, I'm going to take zeal. Next, I'm going to use top value. From top, I'm going to take ten pixel. And from the lab, also, I want to take 16 pixel. With that, I'm going to use another property, which is transform, transform, and here I'm going to use rotate, rotate, rotate, and I want to rotate it 45 degree. And also we need to mention the height and width, height, 15 pixel. Wait, seven pixel. So let's set the file and see what it return. After set this file, as you can see, it had checked MR before the pay bills. Also, we need to create a closed button to the right side, but we are going to do it using JavaScript. But for now, here I'm going to type a single line command style the Close button. We are going to adding the SAS when we start the JavaScript. Now, let's style the header section. For that, I'm going to select this class header, Hemo type dot header. Inside the colors, our first property is background color. Background color here I'm going to use gray background color. Great. I'm going to satisfy. Also, I'm going to add padding and change the font color. So to type padding. From top and bottom, I'm going to use 30 pixel and from left and right, I'm going to use 40 pixel. Our next property is color font color, color and I'm going to use white color. Next, I want to align the text. So type text align center, and I'm going to set this one. Now it's little good. Now we need to style the input section. For that, I'm type here inside the calibre I'm going to say margin. Margin zero. Our next property is border. Border nun then I'm going to say it border radius. Border radius, and border radius zero. Our next property is weigh, weight, and here I'm going to use percentage will, 75%. Padding ten pixel. Next, I'm going to use float property float lip float link also I'm going to assign font size. Font size 16 pixel. I'm going to satisfy here you can see the result. At last, we need to style this Add button. For that, I'm going to use this class ad button. Add button instead the colors or first properties padding padding ten pixel. Our next property is We. We, 25%. I'm going to set this file. Next, I'm going to add background. Background. And I'm going to add Higa V bb9b9. It's going to add kind of gray color. Next, I'm going to change the font color. Color, and also I'm going to add a ixaVHztag 555, is a dark gray color. Float, flit. Text align text line propriety center. Font size. And here I'm going to use font size 16 pixel. And I want CarzarPointer. CazarPonter. Transition, and I want transition in 0.3 second. Here I use transition property because we are going to add Hoverific our last property is border radius, border radius, border radius zero. And now I'm going to set this file. After set this file, you can see the result. And now I want to add Hobo effect to this button. For that, I'm going to select dot, Add button, colon hover. Then inside the color dresses, our property name is background colored background color, and I'm going to use hashtag DDD. After I sub this file, if I open my cards on this ad button, as you can see, it a little transition. Now, let's add little darker color of this shade. Up to set this file. If I open my cars on this button, you can see the result. Now, if you notice there is a problem. Our list items attach with this input section. For that, we need to clear floats after the header. So let's clear it. So up the header selector, I'm going to tie dot header with that. Here I'm going to use posius selector name Ater. Then inside the Cali says, our first property name is content. Contain blank. Our second property name is this play. This play and I one display Tevin. And our last property is clear clear both. After set this file, you can see our Tut list looks perfect. So successfully style our Tut list. From the next Tutorial, we are going to start JavaScript. Thanks for watching this video. Stay tuned for the next word. 22. My to do list implement javascript part 3: But hello guys. Good to see you back. Once again, I'm back with another tutorial related to this project. And now we are going to add new list item when I click on the Add button. For that, we need to create a function. So inside the script tag, here I'm going to create a function and our function name is new element. Function, new element. Then insert the cliress but before I create the function, I'm going to call the function. Copy the function new element. Let's back to the TML span tag. Here you can see, we have a spent name at button. In this pen tag, I'm going to use On Glick method on click. On take inside the double course, I'm going to call the function, which is new element, and I'm going to subi file. Then I back to the function and insert the new 11 function, at first, we need to create a LI element. For that, I'm going to create a variable that and our variable name is I, I equal to Document, dot, create element. Is the round presses, instead the double course. Then go on to N this line. Next, we need to target the input value from this input section. For that, I'm going to create another variable, and our variable is input value. Equal to document dot get element by ID. Then inside the round presses, inside the double codes, I'm going to tie the ID name. Let's back to the TM section and see the ID name. The ID name is my input I copy the ID name and I'm going to paste it here. From this ID, I want to say from this input section, I want to grab the value. For that we run dot Val. Then semigoN this line. And now we need to create a text node using the input value. For that, here moto type where T equal to document, dot, create text node, create text node. Inside the round presses, I'm going to pass the input value. Then Semgro this line. Now we need to append this text node inside the LI tag. For that, I'm going to tie it, Append child, append child, inside the roundress, I'm going to pass the text node, which is P and Semgon to this line, and I'm going to set this file. Now we need to append this LI tag inside this UL tag. But before we are going to check Ep condition. We are going to run if condition to check the input we are going to run if condition to check the input field is blank or not. If the input field is blank, then it's going to return a message. Not the message, it's going to return an alert box, and if it is not, then it's going to append the text inside this list. For that, I'm going to use IP condition. If inside the rounds input value, identical blank. If the input field is blank, then inside the IP condition, I'm going to alert a message. Alert. This is the double gods, I'm going to type, you must write something. And Seugontt this line. Otherwise, inside the sps the Calibra, I want to append this list item in this nodal list. For that, we need to target the nodal list. So to type document dot get element by ID. Inside the round dresses, were to pass the unorderlist ID name and the ID name is my copy the ID name, then back to the code here I'm going to paste the ID name, M Also, I want to append the append child. Is the round dresses, I'm going to append a ti. And I'm going to set this file. Now, let's try to add something. I'm going to set this file and inside the input field, first, I'm going to type by Apple. After press Adbton as you can see, in our list, it add by Apple. But if I blank this input field, then I press Adbton, now you can see it return a alert box. You must write something. But if you notice, you can see, after Hober on it, there is no cross button in this new list item. So here we need to add a close button. And to add this close button, I'm going to use this same code, this code because I already create this Pan tag and design this pan tag in our style section. I'm going to copy this section. Then here I'm to pays the code. And I'm motor service file. Basically, this is going to assign a crossed class to the penta to our new list item. Again, I'm going to add a new list item, and I'm going to type B Apple. And I'm going to press Enter. Now you can see the remove button in this list. But if I click this remove button, as you can see, it's not going to work because just we assign this class, but we do not do anything to remove this class and we need to use the same four loop to hide this list item. I'm going to copy this for loop, and I'm going to paste it here. I'm going to set this file. We already explained this four loop in our previous tutorial. I'm not going to explain it here again. Basically, it's going to add disability nun when I click on this cross ICN. Let's add a new list item. Here I'm going to type, buy Apple. I'm going to praise Adbton. Up to press Add button, as you can see, it's not working. I think there is a problem in my core. I think there is a problem of closing tag because this is the end of floop closing tag. So as you know, we at this flop inside the M function. Here we need to pass another closing tag. If I set this file, then I'm going to try to add a new item on this list. By Apple. And I'm going to praise Adbton. After Press Adbton as you can see, it ad buy Apple in our list. Then also, I'm going to praise Crouse button. As you can see, After Presse Cros button, it removed the item from the list. So successfully create my Tut list using CSS Java Script and HTML. So thanks for watching this project. Stay tuned for our next course. 23. My to do list implement javascript part 4: Good to see you back, guys. This is the second part of this tutorial, and in this part, we are going to start JavaScript. First, we are going to create Close button, and we need to append it each of the list items. So here, I'm going to take script tag, script. And inside the script tag, first, I'm going to declare a variable. But, and our variable name is my node list. Equal to document dot get element by ID. Here I'm going to target all the LI tags. Type get element by tag name inside the roundreses inside the double goes and semicron two in this line. Next, I'm going to declare a variable where I so here we target all the LI tags. We have to tell four LI tags, and now we need to run loop through all the LI tags. I want to tie for inside the rounds I, I equal to Z semicolon. Then we need to set a codon. I less than my note least, I note least in function. If I variable less than not least N, then increment the loop. I plus plus. Then inside the clivss first, I'm going to create an element, sumo type, and our variable is span. We are going to create span ta. Span equal to document, create element. Create elem. Then inside the Rundresses inside the double code, here we are going to create a span tag and similar to this line. Then inside the span tag, we are going to create a cross sign and to create the cross sign, we are going to use Unicode. Our type word and our variable name is THT text, equal to document, create text node, create text node. Then instead the round presses, instead the double code, here I'm going to use a unicode. Backslash U double zero D seven. D seven and semigontN this line. And to assign a class, I'm going to type, span, dot, and here I'm going to use class name method. Class name. Then equal to inside the door codes close. I successfully assign a class to this pen tag, and now we need to append this text inside this pen tag. For that, I'm going to type span, dot, appNil Appen child. Then inside the roundress I'm going to pass THT. Then seminar to this line. And now also we need to append this span tag inside the nod leist item. So here we need to type my Nodlstt Append Giant. Then inside the roundresses, I'm going to type span and Semgon two in this line. And I want to set this file. So we successfully create the Close button and append it inside each of the list. Now we need to style this rose button. Otherwise, we cannot see the Close button here. For that, we need to go back to the style section. And here we are going to style the Close button. As you know, in our Close button, we assign a class, and our class name is clove, clove. Then inside the Carly says, first, I'm going to set position, position, and I want to set position absolute. Our next property is right. From right, I'm going to take zero. Also, from top, I'm going to take zero. Then I'm going to add padding. Adding to pixel. From top, I take 12 pixel. From right, I'm going to take 16 pixel. From bottom, I'm going to take 12 pixel again and from the left, I'm going to take 16 pixel and I'm going to set this file. Now I'm going to add background color. Background color, and I want gray background color. Also, I'm going to use font color. Color and our color name is whine. I'm going to set this file. If I set this file, as you can see, we cannot see anything at that position because in JavaScript, we need to append it all the note list item. For that, inside the square ress we going to pass I. If I set this file, now you can see the result. Here you can see it add the cross button to every list items. Now I want to add Hova Effect to this cross button. For that, I'm going to cut these two properties here, I'm going to use a posts selector. Let me show you. Dart, close Colon Hover. Then you say the closes, I'm going to paste both the properties, background color and text color. I'm going to set this file. After I set this file, as you can see, when I over my car any of the cross button, you can see the oeffect. Also, you can see it's changed the font color, dark to white. So we successfully create the close buttons. And now I want to hide the least item whenever I click this close button. For that, we need to back to the Javascript section, and outside the four loop, I'm going to create another variable where and our variable name is Cl Close equal to here I'm going to target this pan element using its class name. I'm to type, document, dot, get element by class name, get element by class name, then inside the round presses, inside the double codes, I'm going to pass the class name, which is close, and semicronoN line. Then again, we need to run a loop. For that, again, I'm going to declare a variable where I as you know, in every span tag, we have the same class named group. We need to run a look through every close items. For that, I'm going to use four group for instead the round dresses, I equals to zero, sicol. Then we need to set the condition. I, I, less than Close dot length function and semicrot. If the condition is matched, then increment the I value with one I plus plus. Then in the liss then I want to add on ti event to every close button. For that, I'm going to type closes the squares I dot on click. Equal to her will call a anonymous function. Then inside the car resis, sorry, it is not class dot length, it is closed dot length. Close. Then inside the car resis, here we need to select the particular parent div element. For that, we need to use this keyword. So type, and our variable name is D equal to this dot parent element. Parent element. And semicron two in this line. Now the question is why we use this dot parent element? Because I want to target the particular parent element of this Span tag. That's why we need to use this keyword. And then we need to hide this DV element. For that, I'm going to type Deep dot style dot display. Equal to inside the double cores none, and semicron in this line. So whenever we click the particular close button, it's going to say display property none of this parent tag. This means it going to hide this list item. So let's set the file and click on any of the list item close button. So I want to delete Mt add one from this list item. So if I click on this button, as you can see, it delete Met ad one from this list item. And now we need to add check symbol when I click on any list item, something like that. Suppose I already buy g. For that, we need to add check symbol. For that, again, I'm going to create a variable. Let me show you how. Outside the four loop, I'm going to type word and our variable name is list, equal to document dot i Selector. Document dot, qui is selected, inside the round presses inside the single codes. Here I'm going to target order list. So I'm going to type UL and seicorn two in this line. At the next line, I'm going to add a event to this list. For that, I'm going to type list dot add even isar. Then inside the round presses, I want to add click event. So type. With that, I'm going to call a anonymous function, and I'm going to type function. Then inside the roundresses, I'm going to take a parameter and our parameter name is EV. Then inside the Clses here I'm going to use a EP condition. Here I'm going to check if the targeted tag is AI then I want to add a class to this particular item and the class name is cheap. I'm going to add the same class here I use for paps. So I'm going to type E inside the round dresses, evitargt tag NIM. Identical with. Is the single course I. Then inside the cars. If the targeted if the targeted tegnym is Ali, then I want to add in class to this targeted Ali. For that, I'm going to type V target class list method, class list. Here I'm going to use Tule method. As you know, towel method work like a switch, some type togle. Then inside the rounds, inside the single core, I'm going to type the class name which is chick and serve on to end this line. First time, if I click this item, it's going to add the class and second time if I click on the same item, it's going to remove the class. I want to say first time, it's going to add the check class. If I click on Big list item. If I click it list item again, then it's going to remove the check class. So to set this file, I'm going to click this list item, Redemlick this item, as you can see, it add check signed to this list item. Similarly, if I click on Mt advance also you can see it add checked icon to this list item. And if I click it again, it's going to remove the check signed. Now let's get to the JavaScript. Then outside this event, if the condition is not match, then return fogs Semgron two can this line. This is the second part of this tutorial. In this part, we learn how we can add Close button. Also we learn how we can add check button to the list items. At the next part of this tutorial, we are going to learn how can we add new list item after pressing the Add button. Thanks for watching this video, stay tuned for our next Tutorial.