JavaScript project : Build a Gif search app

1. Introduction: Everyone in this class, we're going to build GF search using JavaScript. This is how our JF search is going to look like. In this A you can search for any kind of JF. I want to search for laughing related JF, so I'll type here laughing. I'll remove this HP and type laughing here. And click this search button. As you can see, we got laughing related GFS. Now I want to search for Cooking related GF. I'll type here Cooking CWKING Cooking and click this search button. Then I'll get Cooking related GFS. Now I want to search for running JF, so I'll type running here and click this search button. Then I'll get running related GF. Let's learn how to build this kind of GF searchv using JavaScript from next class. 2. Setup: This video, we are going to do setup for our project. For writing code, I'm going to use Visual Studio Code Editor. If you don't have Visual Studio code iter, you can just install it. For installing, you can just visit Google and search Vs code and click this first link or open this first website. If you have Windows, you can click this download for Windows button and if you have, you'll get download for Make button here. After downloading, we are going to create some folder. Here I've created one folder. The name of the folder is F generator. You can also create one folder. The name of the folder can be anything. But I wrote JF generator here inside this folder, there are three files. First file is index dot HTML. Your filename can be anything, but the extensions would be H dot js and then Css. Just create these three files index html script dot js and style CSS. Flames can be anything, but the extensions would be HTML CSS, and JavaScript. And open this index with HTML file. I've opened this index with HTML file, and now here we are going to create HTML boilerplate. To write HTML Bilerbd we have to type a lot of code. But if you're using visual studio code, you don't have to write a lot of code. You can just use one trick or one shortcut. The shortcut is just type exclamation mark and click Enter. Inside this HTML Voilerb we can write any HTML code. First of all, I'll link this CSS with our HTML. To link CSS with our Html, I'll use Link tech, so I'll type Link here and click this Link CSS, and the Hf should be the filename. Our filename is styled CSS, and inside this HRF, we have written style CSS itself. I've done some mistakes. I'll type Control jet and it will be fixed. So now let's connect our Java script with our HTT connect JavaScript with each Tamil, just go inside this body tech and inside this body tech, you have to create one Scripte so I'll type script. And as soon as I wrote SC, I got some suggestions and from this suggestion, I have to click Script SRC. Inside this SRC, I'll type my JavaScript film. My JavaScript film is script dot js, so I'll type here script dot js. Script dot js. Let's create some space here. That's it. We have done our setup properly, and from next video, let's start writing our code for this JF generator. 3. creating the UI: This video, we are going to write TML code for our project. To write extremal code, I'll go inside this body tech and inside this body te, I'll create one container DIF. To create container dif, I'll just type D and then type dot and type container and then click Enter. Container DV is ready. Inside this Die I'll create one more Diftech for input and button. I'll type Diffe DIV Div the class name of this div will be input container. I'll write class here, CLAWs class and the class name will be input container, IN Put input dash container, and TI NR container. And let's create one input tech. For creating one input tech, I'll type input and the type of this input will be text and then I'll give one ID to this input and the ID will be search input. And we need one button below this input tech. I'll go below this input tag and create one button tag. In the name of this button will be search. Should be in cabal letter, I'll write as in uppercase, let's check what we are missing to check I'll open our GF searchab you can see, first of all, we need one H one tech where F searchab is written, then we need one input field, then we need one search button. Let me write this F search above this input field. I'll go above this DFTech and below this continuer DF, I'll create one H one tech and inside this H one tech, I'll write GIF searchab. Now let's save this and have a look in our browser, how our website is looking now. So as you can see, our F search is looking like this now. Let's add some styling in this F SearchF and make it like this. To add styling, we'll add this styling in another video or in next video, we are going to add styling in this F SearchF. Let's finish our H table first. What's there to finish? The last thing we have to do is we have to create one Diff tech to so our GIFs means for this thing we have to create one Diff tech, so I'll create one Diffte here. Below this input anternat, I'll create one Diff tech, and the class of this diff tech will be, let me write class here. Let me write I divide ate class. Let's write IDN, the ID of this dv GIFs. With this wave properly wrote our HTML code. Now let's add some CSS in this project. 4. styling the UI: In this video, we're going to add styling to our project. To add styling, I'll open the style CSS file and inside this style CSS file, I can type CSS code for our project. So first of all, I want to add styling in this contener Dip. I'll select this content div in CSS to select this content, I can copy this container class and in this style CSS file, I'll just type dot why I'm typing dot Because continuar class. If the container was ID, then I'd be writing has. Let me write dot because it is class and click Control fee. Now our contener dif is selected, now we can add style into our continent Df. Let's check what kind of styling we want to add. In this continuant dif we want to add this is telling means we want to bring our continent defence center. To bring this continent Divine center, I'll use Flexbox. The first property while using Flexbox is display flex. I'll type display, and then flex FLA X flex. Now I'll type flex directs and column, flex directs and column and then justify content center. Justify content and justify content with V center. Now let's save and have a look in our rowser. I saved this file and now I'll open this browser and I'll reload this. As you can see there is no changes. Let's check why there is no changes. There is no changes because I have written here styles, but my file name is style. Let me remove this s and click this save button and then let's have a look in our browser. Now let's reload it. Now it's not working because I have to save this CSS file also. Control S and then reload. The flex directions would be not columns, so I'll type a row here, remove this column and write a row. Save. Now as you can see, our JF searches in center, but we have to add more stylings to this. What I will do now is now I'll change this direction to column instead of justify content center, I'll type line items center. Lines center. Now let's have a look Controls and as you can see, now our F search is properly aligned in center. Now we will let style into this input field and this search button. For input field and search button, I have to select this class input container. Let's select this Control C. And then dot Control V. Now let's align this thing also in center. This search button is in the right side and the input field is in left side, but we want this search button below this input field like this. For this, we have to select this input container and we've already selected this input container. Now we have to center this properly. To center this properly, I'll Tiegin display flex here. And flex axon will be column and Aline item will be center. Control C and Control V. Now let's save and have a look in our browser. You can see now input field is Ab and button is below, like the one in here. Now let's add some styling in this button tech. To add some stelling in this button Teck, I have to select this button. As we only have only one button in our project, so I can directly select this button tech to select this button Tek I'll type button here and then add some selling in this button. First thing will be margin top because we want some margin from top. As you can see, there is no margin from top or there is no margin between this input field and this button. To create some margin between these two, we have to write margin top. I'll type margin top. It will be ten pixel, and then I had some padding in this button, padding padding will be top and bottom ten pixel and left and right, 20 pixel. Top and bottom ten pixel, then space, then for left and right, I'll type 20 pixel. And then to make our button round, I'll add some border radius in this button, border radius, and to make it properly round, I have to type 50 pixel. Properly round means this much around, as you can see, I want to make this button this much round. For this, I'll type 50 pixel border radius. Now I have just typed border, so I'll type border radius. So now our button will be round. Let's have a look in our browser. As you can see, our button is now round. Now I'll increase the font size of the search. Then I'll add some color in this button, and I'll change the color of this search text. Means I'll change the color of this font. So to increase the font size font size here and the font size will be 24 pixel, then to add color Ile type background color, and the background color will be, I'll type the act as 05a4 seven A. Then now I'll make this font color white. To make this font color white, I have to type color and just type as FFF. It will make our color white and then I'll add some cursor pointer. Whenever we hover above this button, I want to remove this cursor symbol and bring one hand symbol. To bring one hand symbol, I'll type cursor, CR SOR cursor, and then cursor will be pointer. So let's save and have a look in our browser. Now whenever I'll hover up this button, my cursor will convert into pointer. Miss this hand symbol. Let's add some hover effect in this button. Whenever I'll hover this button, I want to change the color of this button a little bit. Means I want to make this background color a little bit darker. For that, I'll select this button tech and to add hover effect, I have to type colon and then write hover, HOV hover. Inside this curly bracket, I'll type background color, and then this background color will be a little bit darker. Control V and I'll select some darkal background color. Bring this cursor a little bit down, then our button will be a little bit darker. Let's save this and have a look in browser. Now as you can see how Her effect is working properly. Now I want to add styling in this input field. To add styling in this input field, I'll select this input field to select input field. I'll just type input because we have only one input tag in each table. That's why I'm directly selecting this input field with input tag, not with any specific class or ID. So first of all, I want to increase the size of this input field. To increase the size of this input field, I have to write padding and the padding from top and bottom will be ten pixel and left and right will be 20 pixel, 20 px. That saves and have a login browser. Now you can see our input now our input field is a little bit bigger. Let's add some more styling in this input field. I want to make this input field round to make this round Ile type border radius, and then border radius will be 15 pixel. And the font size value 24 pixel. Then let's add some border in this input film to add border Il type border and inside this border, I'll write one pixel solid, and then some color name. One pixel, solid. And the color name will has three C means has CCC. Now let's save overlook in our browser. As you can see now our input field is looking like this. Now I'll increase the font size of this H one te to increase the font size of this h1t, I have to write H one here, means I'll select this H one tech N, just write font size F font, and the font size will be around 24 pixel. Let's save an overlook in our browser. Now my font size is smaller to make it larger Aletype bigger font size like 35 pixel. The size would be more like 45 pixel, now let's have a look in our browser. Now our font size is proper. Now let's remove this border from this button to remove this border from this button, I'll type border nun in this button. I'll go inside this button and then write border, and then border will be none. Let's save and I look in Browser. Our black colored border is removed from this button. Now our styling is looking same. This is styling in this styling is same. Now let's write JavaScript code for our project.