JavaScript API project : Image search app

1. Introduction: Hello everyone in this class, we're going to build in Photosearch app using JavaScript. This is how our Photosearch app is going to look like, and you can search for any photos in this app, I want to search for car related photos. I can just type car in this input field and I can click the search button and I'll get car related photos. As you can see, we got car related photos. If you want to generate more photos related to the search strum, then you can click this more button and as you can see that we got more photos related to the search strum. From where we are getting these photos, we're getting these photos from Pexels API. To build this project, we are going to use Pexels API. Now I'll search for photos related to nature. To search for photos related to nature, you have to type nature and then click this search button and now as you can see, we got photos related to nature. If you click this more button, you will get more photos related to nature. So you got more photos related to nature. And we have trending photo sexon as well in this project. So just reload this project. This is the trending photo sexon in this project, and this trending photo sexon is being generated by the pixels team means this trending photo sexon will get updated every hour. So if you want to know how to build this kind of project, you can join this class and let's start building this project from the next video. 2. project setup: Let's do this setup for our project in this video. To write code, we are going to use Visual Studio code editor and we have to create a folder inside Visual Studio code editor. I've already created a folder. The folder name is image search project, and you have to create three files, HTML file, JavaScript file, and CSS file. I've already created HTML file. The name of HTM file is indexed to HTML. And then style CSS and ab dot js. Now let's write HTML boilerplate. To write HTML Bilerlt I'll open my HTML file, so I've already opened my extremal file and inside this HTML file, I'll just type exclaim in Mark and click Enter and VS code will automatically write the HTML boilerplate. I'll go below this title deck and I'll link this Style CSS file. To link style CSS file, you have to just type Link and just click this Link Column CSS. Inside this HRF, you have to type the filename. My filename is Styloid CSS and inside this HRF, it's written in Styloid CSS. That means my CSS file is linked with my HTML file. Now I'll link my JavaScript file with this HTM file. To link JavaScript file, I have to create a Scriptex so I'll type script and then I'll click Script Column SRC, and then I'll type the file name of my JavaScript file. So the final name of my JavaScript file is app dot js sol type app dot js. As we're going to use icon in our project, so I'll show the icon which we are going to use. This is the icon which we are going to use means this search icon in our project to get this search icon, we are going to use this website, not this website, we are going to use Font Awesome. So to get the CDN link of Font Awesome, you have to just search CDN Js in your browser and click this website or open this website. And in this search input, just search font awesome, so I'll type font awesome and click this first link. And from here, you have to click this button, copy Link Tech button, click this button and your link will be copied. Now I'll open my visual studio code and I'll paste it here below this link tech, Control V and my Link tech will be pasted with the CDN link. This is the CDN link, and this is the Link tech. This is the CDN link, and this is the Link tech. Now let's check what else we want to do. As we are going to use robot to font in this website, means to create this project, we are going to use Roboto font. So to get that font, we are going to use this website, Google Phones. Just search Google Fonts in your browser and you'll get this website. The website link is phons.google.com. In this search fonts button, you can search Roboto, or you will get Roboto here itself. The first font family itself is Roboto font family, just click this. If you find Roboto here, you can click this or else you can search Roboto font here. I'll click this Roboto and from here, I'll click this G fond button. And I'll click this get embed code and I'll click this input and copy this part. Only this one, you have to copy, this input URL, you have to copy. Copy this and open your visual studio code and open your CSS file. Inside this CSS file, I'm going to paste that link which we copy it. I pasted this input URL inside my CSS file. This is it for our setup video. Now let's start writing ETL code from the next video. 3. generating API key: Now we are going to generate APA key from Pexels API. Why we are using Pexels APA, we're using Pexels APA to generate photos. Like I searched Nature here in this website and after searching Nature, I got Nature related photos. From where I got these photos, I got these photos from Pexels API. Means to get photos, we're going to use Pexels API and to use Pexels API, you have to generate APAKey and to generate APAKey you have to create an account with Pexels. It's very easy to create an account with Pixels. Just search Pexels API in your browser and click this first link or open this first website. Or as you can type this URL, the URL is px.com slash APSASF here, you can click this Get Started button or you can click this Join button. I'll click this Join button. I won't click this Join button. Join button is doing something else. I'll click this Getrted button itself, and from here, I'll click this login button. If you already have account with Pexels, you will get this login button and if you don't have any account, you have to click I want to download button, and then you can create your account here. I already have an account, so I'll click Login button. After logging in into Pexels, you will see this kind of interface. Now, you just have to click this Back button. Or you can click this Pexels icon. And you can type API in this URL, or else you can open that website again. But now I want to click this slash API and now from here, you can click your APK. Instead of get started button, now we are getting your APK after creating our account and just click this button, your APAC button. So we have successfully generated our APAKey. Now don't lose this APK. You can just save this APK in your project folder. So I'll just save this APK in my project folder and you have to create your own APK. Don't use my APK because I'll delete this APK and you won't be able to use this Pexels APA. You have to create your own APAKey and create this project. This is it for this video. Now let's write our HTML code in the next. 4. Building the structure: So now we are going to write it TML code for our project or we can say we are going to create structure of our project using ITML. So we've already created this HTML boilerplate in our set of video. If you have not watched that set of video, just go and watch that set of video or else you won't understand from where we got this kind of links and from where we got this input URLs. So if you want to understand from where we got those input URLs and from where we got this font awesome link, you have to go and watch that set of video. In that set of video, we have written this much HTML code means we have already created our HTML boilerplate, and then we have linked our font some with our HTML and then we have linked our CSS file with our HTML and then we have linked our Ja voice Script file. Now we can write our HTML code and to write our HTML code, I'll go inside this body tag and inside this body tech, I'll create some tag. What kind of tag I'm going to create to check that I'll open my website. So I'll just open my website and inside this website, as you can see, our background image is missing. We'll fix this background image missing thing in this course. Means later on in this course, we will fix this background image thing. Now we just have to create this structure. So first thing, what I will do is I'll create this header and then I'll create this input field, and I'll create this button with a search icon. Then I'll create this photo section. Let's do this. First of all, I'll create these headers. To create this, I'll go inside this body tech and I'll create one Diff te. And the class name of the Diff tech will be Min. Why I created this dif tech I created this diff tech to add CSS in this and to create a dif tag with the class name of Min, you can just type deep dot Min. This is t using MD, we can just type Didot men and we'll get a Diff tag with the class name of men. I'll go inside this Diff tech and I'll create another dif tech and the class name of this Diff tech will be header, type header. And click Enter. Now we'll get a Diff tag with the class name of header. Now inside this diff tech, I'll create one H one tech. Inside this H one tech, what I'll type, I'll type this header text. I'll just type, find the best photos. I can copy and paste it inside this H one tech and now I'll create one input field. To create one input field, I'll go below this H one deck and here I'll create one more Diff tech and inside this Diff tag, I'll create one input tech, and the type of this input tech, I'll just click Control jet and the type of this input tag will be search. Type search and then we'll give some placeholder inside this input tech why we're giving some placeholder Because what is placeholder? You can see search photos written inside this input field. This is placeholder. So to create placeholder, you get one attribute, the attribute name is placeholder, just type placeholder. Inside this placeholder, you can type anything or you can write anything and that thing will be displayed inside this input field. Now we want to display search photos, so I'll just type search and this photos. I'll give a class name to this input field. The class name will be search. Now I'll create one button deck below this input field. To create one button deck, I'll just type button and I have to give some class name inside this button deck also. The class name of this button tag will be BTN one. And now we have to create the search icon inside this button tech. Which search icon, this search on we have to create. How we will create this search icon will create this search icon using this font awesome. If you visit font awesome and just type search in that search input, you will get search icon. The search icon will have a Itech and inside this Tech, there will be a class name. And what will be the class name, the class name will be far dash solid than far ss magnifying ds glass. Just type f dash solid. And then type f dash magnifying and then ds glass. This is the class name for that search icon. If you want to find the class names, you can just visit this website and search the icon and click those icon to get the class name of those icons. The icon which we're using means the search icon which we're using. The class name of this search icon is far des solid, far as magnifying, des glass. Now if I save this and now let's have a look in our browser so I click right click or I've already opened in our live server. This is our live server and this is how our project is looking like now. We have created one header tech means one H one tech, then we have created one input field and inside this input field, we have written a placeholder and what's written inside the placeholder, it's written search photos. Then we have created one button tech with the search icon. Now let's check what is we have to create. We have to create one photo section and these photos will be displayed only after we fetch the data from the APA and we'll fetch the data from the API. In the Java Script video means in the next video or next to next video. Now we are just creating the structure. Means we are just building this structure. I'll create this photosexon and after creating this photo secon, I'll create this more button. I have to create one different secon to create different sexon, I'll go below this diff tag and I'll create one sexon tag. Just type sexon inside this sex and tech, I'll create one Defteg the class name of this Diff t will be name, type div dot name and then click Enter. Now we get a Difteg with the class name of Name. Inside this Diff tech, I'll write or I'll create one H two tag inside this H two tag, what I'll write, I'll write photos, copy this. And paste it here. Now I'll go below this dif tech or I'll go below this secantg I won't go below this sex and tech because what I want to do is I want to create one dif tech where we will display these photos. Now we don't have any excess of these photos, but we have to create one Diff tech to display these photos. After we fetch the images from the APA, we'll display these photos inside that dftch. We have to create the Diff tech. I'll go below this dif tech and create one more Diff tech and the class name of this if tag will be photos. Click Enter and then we got a Diff tag with the class name of photos. Now we have to create one more button. To create this more button, I'll go below the sex and t and I'll create one more Difteg and inside this Diftek, I'll give it a name the names a class name. Class name and then class name will be mores. I'll create one button tech, just create button or just type button and the class name of this button will be more. Type more and then type more inside this button because we are creating a more button, so more. Means because it's written more inside this button, that's why I wrote more inside this button tag. I'll save this and let's have a look in our browser so Controls and open this browser. Now as you can see, we have successfully created our structure using HTML. Now in the next videos, we are going to fetch the data from the API and we'll display those data means we'll display those images in the next to next videos, Is. In the next video, let's fetch the data from the API. 5. fetching data from api: Now we will make the fetch request from the Pexels API. To make fetch request, you have to get the APA endpoint. To get APA endpoint, you can search Pexs API in your browser and open this website. And this is the same website which we use to generate our APIKey. So you have to open the same website, and in the same website, you have to click documentation. And if you forgot your APK, you can just click this button to get your APAKey and you'll get your APAK if you forgot that APIK. So just get this APAKe if you don't click this button and you'll get this APK, copy it and leave it now, copy it and leave and then click this documentation button. And inside this documentation button, we will get a lot of option because Pexels APA gives us a lot of feature and lot of options to implement in our website, but we just want to implement the search feature and the td photos feature. So what is this td photos feature? Using the td photos APA endpoint, we can display random images in our website. Means the project which we're creating in that project, we can display random images using these td photos and using the search for photos Apendpoint we can search for photos. Now I'm going to make a fetch request in this Ap endpoint. And after making fetch request, I'll get image related to the search strum. Means whatever I'll search, I'll get the images or I'll get the data related to that search rum. This is the APA point which we're going to use to make APA search request, and this APA endpoints needs some parameters. Parameters like query is required, means you have to give this query parameter in this APA point or else this AP won't run and what is the meaning of query? Inside query, we can search the query. It's written here. The search query means whatever you want to search, I want to search for the nature related photos, then I will write query equals to nature, and then I'll get nature related photos. If I want to search for ocean related photos, then I'll search or I'll type, query equals to ocean and I'll get ocean related photos. You can just copy this Appoint or you can copy this Appoint. Inside this example request. Inside this example request, Appoint, it's already written query, so you don't have to write it by yourself, you can just copy this Apenpoin just paste it and now I want to make a fetch request to this APA endpoint. To make a fetch request, you have to create one fetch method. Inside this fetch method, you have to give the APA endpoint or the URL of the API. This is the URL of the API, which we are going to use to fetch the data. I'll just copy this, remove it from here, and I'll paste it inside this fetch method. I'll click Control that because I have to paste it inside the ctix. I'll create ctixs and inside this vectix, I'll paste my URL. And if you read this Pexels APA documentation, you will get to know that. We have to provide our authorization key to access data from the API endpoint or access data from the API URL. So I'll click this authorization to show you. So you can see that authorization is required for Pexels APA. Anyone with a PXs account can request an APAKey which we have already done. We have our APAKey and using this APAKey we can do this authorization. So how to do this authorization, it might be written inside this documentation or I'll show you how to do that. Yeah, it's written here, I guess. You have to just write authorization and provide your APA key. Just give comma after this fetch request means after this RL, you have to give this comma. Here we are going to provide the authorization key. To provide authorization key, you have to create one curly brackets and inside the curly brackets. I'll use one header property, headers inside this headers property, I'll create one more curly brackets and inside this curly bracket, I'll type authorization and I'll provide the key type authorization. You can see you have to type authorizer like this. I'll copy this thing and paste it here. Yeah, so I'll paste it here. So I wrote authorization, and here we have to provide our APAKey. So you can paste the APK which you have already copied. The APK which we copy is here. If you don't have your APK, just click this overview and inside this overview, you have to click your APAKey button and you will get your APAKey. Copy this APG. I'll copy this properly. So I've copied this APAKey and I'll create one variable. So the variable name will be key. I'll create one string. Inside this string, I'll paste my APK. This is my APK. And now I'll provide this APK inside this authorization. How to provide this APK, I can just type the variable name in which I restored my APK. The variable name is key, so I'll type key here. Now to get the data from this APIENpn we have to use then method, to use then method IL type dot then inside this then method. We'll use this first then method to get the response from this APA endpoint and we'll create another then method to get the data. Inside this then method, Il type response because we are going to get response from this APA point inside this then method, so I'll type response, and I'll use arrow function. The response and the response will be in the string format, and we have to convert that string format into JSNFmat. To convert this response into JCNFmat, you can type response dot JSN. Now our response is being converted into JSNFmat and now I'll create another then method, so then inside this then method, I'll pass data here, then I'll create arrow function and inside this arrow function, I'll create one curly bracket. Inside this curly bracket, I'll type Console log so that we can get the data inside our Console type so console dot log. Inside this Console log, what I'll do, I'll just Console log this data. Now if we save this and open our browser, so I'll save this each tile file also and click Open with Live server. And I'll click valve to get the data. Our console tab is open and inside this consultme you can see that we are getting one object and inside this object, if I expand this inside this object, we are getting some data related to the nature search query because inside this query, it was written nature. We are getting the images or we are getting the data according to our search query. Where are our images? Images are inside this photos array. Expand this photos array and inside this photos array, you have to expand this object inside this object, there is the title of this image and then there is height of this image. And the photographer name of image is there and then photographer's URL is there, and then the images inside this SRC. And inside this SRC, there are a lot of size of the image. If you want to get the nscape size of the image, you can type data dot Landscape, and you will get Landscape size image. And if you want to get large size image, you can get large size image. You can get any size of images. So if you want to get around ten photos related to that search strum. I want to get ten photos related to this nature search strum. So I can just type per page ten or now I'll type five because I want five photos, and now I'll get five nature related photos. So if I save this and if I open my Console tape and you can see we got one object and inside this object, there is photos and inside these photos, there are five elements means there are five photos. Expand the photos array. This is the first image. This is second image. This is third, fourth and fifth. We got five photos according to our searchem. In the next video, we are going to display these images in our project. 6. displaying data: Now we are going to display the fetch photos inside our project. To display these photos, I'll open my JavaScript and inside this Java script, I'll go inside this then method inside this then method, I have to select that photos array. Which photos array I'm talking about? I'm talking about this photos array. To select this photos array, we can type data dot photos. Why to type data? Because we have passed data inside this then method. That's why we have to type data here. Inside this data object, we are going to select that photos array, type dot and type photos. Now our photos array is selected, so we can expand this photos array and check what we want to do. Inside this photos array, there are five elements. And inside each element, there are a lot of information about that photo. Like if I expand this first photo, you can see the title of the photo and then we got the photographer name, photographer ID, photographer URL. And then we got the image inside this SRC and the image are in the different sizes like landscape, size, large size, medium size. So in this project, we are going to use large size images. So now what I will do, now I want to access this large size image. So to access this large size image, first of all, I will create one for each loop and what that forage loop will do that forage loop will iterate over this photos array, and I want to create a dif tech for each element inside this photos array. To create a Diff tech for each element inside this photos array, I can use forage method. So just type photos dot forage for each. Remove this array from here. Inside this parameter, I'll pass image, so I'll type image. Now the meaning of this image is the elements inside this photos array. Refers to this image. If you type images, then the element inside the photos array will be images. Now I'll type only image. Now this image refers to the elements inside this photos array means. This is the elements. Inside this photos array, you can see these five elements. These five elements are image now because I type image inside this Cavey function. Now I want to create a dif tech for each image, to create Diftech for each image, I'll create one variable and the variable name will be image dif IMG and DIV. Inside this variable, I'll create one DeftegT create a Diff tech we get one method. The method name is document dot create element. I'll type document dot create element. In which element we are going to create, we are going to create DFElement type differe so now we have created a dif tech for each element inside this photos array. Now I'll add a class name inside this diff tech to add a class name inside this Diftek, I can write the variable name. So the variable name is image Dip, so I'll just typed dot clalis dot dot ClassList dot AD. And using this method, we can add a class name inside this Difteg. So while we're adding a class name inside this Diff tech, we are adding class name inside this DftekT add CSS in it means to add styling in this Diff tech, we are adding this class name. The class name will be photos. Al type photos, PHOTOS photos. But we've already written photos IS, so I'll add one more a inside these photos. So these photos will be the class name of this Deftch and now I'll go inside this diff tech means I'll select the inner Tamil of this if tech and I'll create another Df tech. To select the innerHTML of this dif tech, I'm going to type IMGdif dot innerHTML. Inside this Diff tech, I'll create another dftech. To create another Diff tag, you have to use Bactix, create a Bactex and inside this Bactex you can write H Tamil tech. As I'm creating a diff tech, I can just type DV and I'll give a class name to this div also. The class name will be Js Photos. And then inside this def tech, I'll create one paragraph tech. So why I'm creating this paragraph tech, I'm creating this paragraph tech to display the photographer name. So how to display this photographer name. To display photographer name, you can select, expand this photos array, and inside this photos array, you can expand this first element. So just expand this first element, and inside this first element, you can see photographer. Photographer is the name of photographer. So to access the name of this photographer, now I can type what I can type, I can type image dot photographer. I'll create template reteral inside this paragraph text, to create template teral I'll use this too symbol and then use curly bracket. Inside this curly bracket, I can type image. Why I'm typing image, I'm typing image because I passed image inside this forage, so just type image and then dot photographer to get the photographer name. So I'll check this spelling. I can just copy this and paste it here. Now inside this paragraph te, we will get the photographer name of the image which will be displayed, and now I'll close this paragraph tech and now I'll display the image. To display the image, I'll create one image tech. To create image tech, I'll type IMG and then I have to give a SRC. What will be the SRC SRC will be? Image dot arc dot Large. How image hrc dot Large? Because you can see, we have to select this SRC and inside this SRC, we have to select this size. So the size is large means we are going to use large size image. So I'll create this template reters and inside this template eaters, I can type image ARC and the image size. The image size will be large, so I'll type large. And I'll close this tech, so to close this tech, I'll just type SLS and then. So now we are going to create one download button. So to create Download button, I'm going to use Anchor Tech and HRF inside this HRF, I'll type the image size. I want to give I'll just copy and paste this and now the downloaded images will be of the original size. I'll remove this large and I'll type original. Now I'll close this DeftexT close this Diff tech, I can just type DF now I'll append this image dif with this DIF means the Diff tech which we created inside this HTML, this photos dif. Now I have to select this photos div in my Java script to select this photos dif I'll create one variable. And the variable name will be photos or I can type photo. To select this, I'll use document dot query selector, and then the class name. What is the class name? I have to check my class name. Class name is photos, so just type photos. Now what I will do, I'll append this things I'll append this dif inside this DFTech. To append this div inside this Difteg I can just type photo dot ApenhilPhoto dot Apenhild what I want to append, I want to append this image di, so I'll just type image DIF. I'll save this and let's have a look in our browser. Everything's working or not. I'll reload this So I'll open my live server again, HTML file, and I'll click Open with Live Server. And now, as you can see that we are getting the photographer name, we are getting the image and we are getting the download link. But I can't see any download link. Why I can't see any download link? I can't see any download link because I've not written anything inside this HRF machine inside this anchor tap, so I have to type download inside this Anchor tap, so just type download. And close this ycretc now let's say let's have a look in our browser. Now as you can see, we are getting the download button also. This is it for this video. Now in the next video, we are going to create the functionality. What kind of functionality? The functionality will be whenever we search for photos, we'll get the photos related to that search term. We are going to create this search functionality in the next video. 7. search functionality: So now we are going to build search functionality for this project. And after building this search functionality, we can just search for the photos which we want to search for like I want to search for nature photos, then I can just type Nature ear and click this button, then I'll get nature related photos. So to build this kind of functionality, I'll open my codator and inside this codator I'll open this JavaScript file. And inside this Java Sri file, we have to select some its Tamil element. Which Tamil element I want to select, I want to select this search input, and then I want to select this button tech, and then I want to select this more button tech. Let's select these three elements to select search input, I'll create one variable. The variable name will be search input, search and then input, and then I'll write document dot query selector. What I'll type inside this documented query selector, I'll type the class name. The class name is search, then just copy this search and then type dot and Control V, which paste this search. Now I'll copy this search input and paste it here. Now what I want to select, I want to select that button tech. The variable name of this button tag will be BTN, and then the class name will be BTN one. Let's check the class name. The class name is BTN. I'll just select this button tech and now I'll create another variable, the variable name will be more, so I'll type more because I'm selecting this more button. I can just copy this and paste it here and the class name will be more. Let's check the class name, it's more or not. So yeah, the class name is more. So we have selected this three thing in JavaScript, now what I want to do. Now I want to create some functions. So first function, I'll create for this fetch. Means this fetch call, will make this fetch call inside a function. So I'll create one function. The function name will load photos. I've created this load photos function, and now what I will do, I'll just copy this fetch calls I'll copy everything, and I'll just paste it inside this function. And I'll pass a parameter inside this load photos function. The parameter name will be Trum. Why I pass Trum here, I pass Tru because I want to get input drum means I want to get the input value inside this trum that's why I pass Trum inside this load photos. You'll understand why I pass Trum Now if you didn't understood, you will understand after some time. Let me explain why I created this function. I created this function because I want this function to run whenever a button will be clicked. Means whenever this button will be clicked, I want this function to run. So whenever which button will be clicked, if this more button will be clicked, then I'll run this load photos function. Now I'll create one more function. The function name will be search photos, just create one function and the function name is search photos, and then I'll pass Tram again inside the search photos. Tram and then create a curly bracket and inside this curly bracket, what I want to do? I want to call this load photos function. So just write load photos. And pass drum inside this load photos. Pass drum. Now from where we get this drum. We'll get this drum inside another function. Means I'll create one event listener inside this button tech, so I'll create this or I'll select this button te means this search button Teck, and inside this button Teck, I'll add event listener and which event this button will listen to this button will click event, so just type click and then comma and then I'll create one function. This function will run whenever this button will be clicked. So I created one arrow function and inside this arrow function, what I want to do? I want to call this search Photos function because whenever this search button will be clicked, I want to call this function and whenever this function will be clicked, I'll call this load Photos function and then we'll make a fetch request and we'll get some photos displayed in our project. I want to call which function, I want to call search photos function inside this Evet listener, so just type search photos and now we'll pass the value of Trum inside the search photos. What will be the value of Trum the value of Trum will be the input value? So to get the input value, you can just type search input. Why I am typing search input here, I'm typing search input because the variable name in which we selected the input field is search input. That's why. So we want to get the input value. So just type the variable name which is search input and then dot value. So now you got the input value inside the search photos and we have passed input value inside this drum. Now this drum has the excess of this input value, and then we have pass this input value again inside this load photos function as trum. Now, where I want to use this rum, I want to use this drum inside this query. Whatever the user will tie inside the input field, this drum will get searched. I'm creating template uteral here and inside this template lateral to create template dater, I have to write dollar symbol also inside this dollar symbol, what I will pass, I'll pass drum inside this. Template literals means I'm passing trum inside this query. What is the value of this strum? The value of this strum is the input value. Whatever input value the user types, that input value is strum. Like the user typed car. We will get car inside this query. The query will equals to car and then we'll search for the photos related to car if the user typed tiger. The value of this strum will be tiger and then we will pass tiger inside this query and we'll get photos related to tiger. I hope you understood why we wrote Trum here and how we are getting values inside this trum. Now I'll add even listener to this more button, so I can just copy this and paste it here instead of BTN, I'll type more So whenever a user will click this more button, what we want to do, we want to call this Load Photos function. Copy this load photos function and paste it here, and then pass this search input value inside this Load Photos function. So just pass this search input value. And whenever the user clicks this more button, what we want to do, we want to increase this page also. So for page, we get one more parameter, the parameter is page. So I'll open this Pexels API documentation. So inside this documentation, I'll open this documentation first. So if I click the search photos inside this documentation, I'll get that API endpoint, and you can see the parameters. And inside this parameter, we can pass page also. So where is page As you can see, we got page here and the default page is one, but we want to get. We want to increase the page whenever the user will click that Me button, so we will add this page parameter inside our link. Copy this page and then open your VS code. Inside this API endpoint, you can just type means this end symbol and then you can type the parameter. The parameter is page. Now what I want to do I want to increase this page whenever the user will click this more button. To do this, I'll just use template daterals and inside this template datals I'll pass page. From where we'll get the value of page, we'll get the value of page from, I have to create a page variable, so I'll just create a page variable and the Bdfault value of page will be create this variable and the Bdfault value of this page will be one whenever the user clicks this button, we will increase the value of this page. How we increase the value of this page, we'll just type page plus plus. So every time the user clicks this more button, the page value will increase, and this page value also will be increased, and we'll get another page, another page. Means every time a user will click that page more button, this page will be increased and we'll get a new page. So that is the simple logic behind this. So now we can save this and let's have a look in our browser. So let's save this also and open your browser and click this open this thing, reload this and we'll search for cars and click this search button. Yeah, so now, as you can see, we are getting photos related to cars. So this is it for this video in the next video, we will add this random photos also. 8. build trending photos section: Now we will build this recommended photo sexion or we can say random photo sexon. So to get these photos, we are going to use another Appoint and to get another Appoint, I'll open this Pexels documentation, and from the Pexels documentation, you have to click UtdPhotos. So click cutdPhotos and after clicking td photos, you will get this API endpoint and using this AP endpoint, we can get td photos. Means we will get some random photos or else you can read here what this AP endpoint is doing. This endpoint enables you to receive real time photos curated by the pixel steam. We add at least one new photo per hour to our curated list so that you always get a changing selection of trending photos. Now you understand what this APA endpoint will give us. Using this API endpoint, we will get trending photos, which is curated by the PixelTeam and one of those trending photo will be updated every hour. So that we get a changing selection of trending photos. So let's copy this Ap endpoint. To copy this AP and point, you can directly copy this appoint or you can copy this AP and point. Why I'm copying this example requests AP and point. I'm copying this AP and point because they've already implemented the parameter per page. You get some parameters here, page, and then per page. We're going to use both parameters. One of the parameter is already used inside this AP and point, so I'll copy this AP point. I'll paste it inside M Java script file. Where I'll paste, I'll just paste here. Control V. Now I pasted this QtdPhotos API endpoint. So now what we will do? Now we will check if this drum is true, then we will call this ap and point, and if this drum is false, then we will call this appoint. Why we are checking this drum is true or false? We are checking this drum is either true or false because when this drum will be true, this trum will become true whenever user types something inside this input field. So if user types something inside this input field, the drum will be true and we will call the search photos ap and point. And if user types nothing inside that input field, then this trum will be false, and then we will call this Q td photos Ap endpoint. To add IS statement inside these two AP endpoints, we can just remove this Ap endpoint and I'll create one variable. I'll just copy this and remove it and I will type URL here, and then I'll create this URL variable. So I'll just create URL variable const URL. And inside this URL variable, I'll paste that API endpoint. So just Control V, and I pasted this AP point for search photos. Means this appoint is for search photos and this APi point is for Qtd photos. Now what we will check, we will check if this trum is true, then we'll call this Apenpoint if this trum is false, then we will call this ap and point. I'll just go below and I'll type Trum here. And now I'll use ternary operator. You can use regular ES statement also, but I want to show you how to use ternary operator because ternary operators are very useful. If you don't know how to use ternary operator, I'll teach you now. Ternary operator is distinct question mark, and then column. If this rum is true, this question marks means if this trum is true, then we'll run the code block inside this and if the trum is false, then we'll run the code block inside this column. I hope you understood this syntax. This syntax is very basic. If you don't understand this syntax, you can use regular EFLC statement. But I hope you know these ternary operators. That's why I'm using this thing. What we are checking, we are checking. I'll just remove this column from here. Yeah, now what we are checking, we are checking this trum is true or not. This question mark define that if this drum is true or not. So if this drum is true, we will run the code inside this question mark. So which code we want to run inside this question mark? If this drum is true, we want to run this block of code. And if this drum is false, we want to run this block of code. So for false, you have to use this column, and now if this drum is false, we will use or we will call this APPoin so just remove this AP endpoint from here and create a Batix and control V. So if this is true, we'll call this ap and point and if this term is false, we'll call this appoint. Per page, I want ten photos, and then we get another parameter, another parameter name is page Ils U. This is another parameter which we are going to use, this page parameter, just type page. Symbol and then page. And page will do this thing. Just copy this and paste it here. Why I copied and pasted this page here? Because if someone clicks this more button, we want to generate new photos. This is it. I'll save this and let's view it in our browser. Save this also and click open with Live Server. So as you can see for now, we are not getting anything, why we are not getting anything? We have to check. So there is no error inside this console tab. We have to check our syntax. There might be error inside our syntax. So the error might be a wave written cost here. So instead of const, we have to type let. So let's save this and so control S and let's say a look in our browser. Let's reload this and we'll add one page variable here, so page and page will be equals to one. And now we can say we can evoluve in our browser. So let's load this. So this is not working now. So let's fix this in the next 9. fixing errors: So the error is we forgot to call this function. We have to call this function. I'll call this load photos function here. Just copy this function name and then we can paste it here and just call it. Save this and let's take a look in our browser. Now as you can see, we are getting the rated photos. Means we're getting all the recommended photos or we can see trending photos. And if we click this more button, where is this more button? Yeah. If you click this more button, I'll zoom it so that you can see. If we click this more button, we'll get more photos. As you can see, we got more photos. So this is it. In the next video, let's add CSS styling and make our app look like this. Let's met in next video. 10. styling the app: So now we are going to add CSS in our project, and we won't write CSS. Why we won't write CSS? We won't write CSS because it will be time consuming. And I guess that if you are learning JavaScript, you already know CSS. That's why I feel like writing CSS code is just a waste of time. And that is the reason why I will just copy and paste my CSS code, and I'll provide you that CSS code file. So I'll just open my CSS file. You will get this code below in the resources section. So just copy this code. After copying this code, just paste it in your CSS file. This is our CSS file in which we are working on now. I'll just paste it. I'll remove this input and I'll paste it properly. I pasted my CSS code properly. We have selected a universal selector and we have added margin zero, pading zero. I guess you guys know why we add margin zero and pading zero in universal selector. We add Margin zero and pading zero because our web page is by default margin and padding and we want to remove those margin and padding. That's why I gave margin zero and pading zero. I've selected this main dif which one is main dif? This is the main dif why I selected this main Dif I selected this main dif to create our background. Inside this background, I've added my image, my image name is one dot JPG. Inside URL, I wrote one dot JPG. This is it, I'll just show you the code. I guess you guys know how to write CSS code and you guys can understand this CSS code properly. And if you can't understand this CSS code and you are facing some difficulties writing the CSS code, then you can just inform me in the discussion sexon and I'll create a video on this topic as soon as possible. Inform me in the discussion exon or Q&A exon. This is our CSS code. And what is this media and mix with thing? This media we use this media property to make our website responsive. So if you know responsive design, you know how to use this media property, we have added mix with 780 pixel. So our design will become responsive after our web page gets smaller than 768 pixel. If our webpage gets smaller than 768 pixel, we will add this CSS code in our project. I'll show you this code properly and slowly if you don't get any CSS files if you can't find that CSS file. To help you, I'll just scroll this slowly. You can just text screens if you did not find the CSS file. If you found CSS file, you can just copy and pace this code. This is our CSS code. Now let's see if we have to fix something in our JavaScript. Before that, I'll just save this and I'll save my index or HTML file. I remove this CSS file and now I just open it in our live server. As you can see, we are getting this kind of interface. But there is no background color. Why there is no background color? There is no background color because inside the folder which we are working on, there is no image, so I'll just copy this image and paste it here. Now we got our images. Now we got our image and we'll get this image in our background. Just save this and let's look in our browser. As you can see, we got a background image in the background. So now we have successfully CSS code in this project. Now what I want to do, now I want to search something like I'll search for car, click Enter or click this button. We got photos related to car. Now I want to search for nature related photos, so I'll type nature. I'll click this search button. Now you can see we are getting photos related to nature, but we're only getting five photos. If you want to increase these photos, you can just type, you can open your JavaScript file and you can just increase the photos inside the URL. You want to get per page ten photos, then just remove this five from this per page and at ten here. Now we will get ten photos. Let's have a look in our browser. I'll search for Tiger, TIG Tiger and click this search button. Now as you can see, we got photos related to Tiger and if I click this more button, I'll get more photos related to tiger. This is in this video and we have completely created this photos project and I hope you understood how to build this project using JavaScript and how we can use Pexels AP. If you know how to use Pexels API, you can easily understand how to use another APH also. This is it for this class.