How To Create Image Search Engine Using HTML CSS and JavaScript

hi guys welcome back to another video today in this video we are going to learn how to create an image search engine using HTML CSS and JavaScript here you can see one search bar if I enter any keyword here let me write tree and click enter or click on this search button so it will display the three images here we have this button to load more images so it will display other images we can keep on loading more images by clicking on this button now let's add another keyword we will add nature click enter so we got the Nature images here let's add animal so here we have the animals image let's add word so we got the words images we have created this image search engine with the help of unsplash free API and a splash provide copyright free images that you can use on your website so I will teach you a step by step how to design this website and display the images using API on your website using JavaScript but before starting this video please hit the like button and also subscribe my channel now let's start this video here I have this folder and in this folder I have one HTML file one CSS file let me open these files with my code editor which is Visual Studio code you can use any code editor so this is the HTML file where I have added the basic HTML structure and this one is a CSS file where I have added the margin padding font family and box sizing these CSS properties are applicable for all the HTML elements in this HTML file I have added this title image search engine easy tutorials then we have this link tag with the style dot CSS so it will connect the HTML and CSS file now we will add the code within this body tag so here let's create one title in the H1 tag so in this title we will add the text image search engine and let's come back to the folder open this HTML file with any web browser so you can see this text here now let me close this browser and I will open it with the visual studio code extension called live server so that it will refresh the webpage automatically whenever we will add any changes in the code file so you can see the same web page again now let's come back to the CSS file in this CSS file we will add the color in the background so here we will add the body for this body tag we will add background and here we will add one dark color and color it will be white that will be the text color so you can see the dark color on the complete web page and here we have the text in white color next we will add the CSS to align this text so it is in the H1 tag so here just add H1 and we will add the text align Center so it will be in the center then we will add some space using margin 100 pixel from top left right it will be Auto and 50 pixel at the bottom and we will change the font weight let's add 600. so you can see the position for this title image search engine next we have to create one form where we can enter the keyword and there will be one button to search the particular keyword and we will get the list of images so let's come back and here in this HTML file we will create one form and here let's add the ID search form and within this form there will be one input field where we can type the text so input type will be text and let's add the id id will be search box and we will add the placeholder so the placeholder text will be displayed inside the input field so let's add the text search anything here after that we will create one button so we will use the button tag and the pattern text will be search next we will come back to the website again and now you can see this input field and this search button we have to add the CSS to decorate this form let's come back and here we have this form so in this CSS file just add form tag and for this form we will add the width it will be 90 and the maximum width will be 600. then margin Auto so it will be at equal space from the left side and right side we will add the height of this form it will be 80 pixel and background in the background we will add one color code then we will add display flex and align items Center after adding this you can see here we have this box and in this box we have the input field and search button next we will add the CSS for this input field let's come back and at this form here and within this form we have the input field so just add input and here we will add Flex Flex 1 so it will use the entire space available in the form then we will add the height for this input Field height will be 100 percent and border 0 outline 0. then we will add the background so the background will be transparent right now the background was white let's add the color color will be white and we will add the font size 18 pixel then some padding 0 and 30 pixel 0 from top and bottom and 30 pixel from left side and right side after adding this let's come back and here you can see that input field is looking good here we have the search button so we will add the CSS for the search button let's come back and in this form we will add button so for this button let's add some padding that will be space inside the button then we will add the height height will be 100 percent and background we will change the background color will be white so the button text will be white color font size 18 pixel and again border outline 0 then we will add the radius so we will add the Border top right radius it will be 8 pixel duplicate it it will be border bottom right radius 8 pixel then cursor pointer and here we have the form so in this form let's add border radius of 8 pixel now this input field is looking good just we have to change the color of this placeholder text so let's come back and at the end we will add double colon placeholder and here we will update the color so the color will be White which is triple F and we will update the font size 18 pixel now you can see this text in white color search anything here and here we can type any keyword tree animals like this and next we have to add one button at the bottom that will be used to display more images so let's come back and in this HTML file after this form here we will add one div with the ID search result in this search result we will display the images when people will search any keyword and after this div after closing of this search result div we will add another button so we will add button and let's add the ID it will be so more BTN and we will add the text so mode let's open the webpage and here you can see this button in the left side that is not looking good so we have to add the CSS for this button so just come back and here we have the ID just copy this one and add it here let's add this ID with the hashtag and here we will add the background it will be this color code then color white and again border 0 outline zero and padding 10 pixel from top and bottom and 20 pixel from left and right side border radius very small 4 pixel next we have to add some margin for this button so we will add the margin 10 pixel and left right Auto and at the bottom 100 pixels cursor will be pointer I will add display block so it is here right now this button is displaying but we have to hide this button it will be displayed when we will load any images using the API so let's come back and instead of this block we will add none so it will be hidden you can see that show more button is hidden and right now we have just one input field and search button next we have to write the JavaScript that will fetch the images from the API and display the images on our website let's come back to the code editor and here we will click on this icon to create a new file so here we will add the file name script dot Js so here we have a new file a script.js next we have to connect this JS file with the index.html file so come to the HTML file and above this closing body tag we will add script SRC and write the file name script.js now the HTML file and JavaScript files are connected let me show you the folder here you can see in this folder we have the HTML file a script file and CSS file now just come back to the code editor here we have added some IDs search form search box search result and show more buttons so we'll create the variable for these elements let's come back to the script file and here let's add const search form equal to document dot get element by it and write the ID from here that is search form now duplicate this and here we will update search box and this will be search box next is search result here we will add search result and here also search result and next we have the show mode button that is vtn so so more BTN here and here also next we have to get one API from where we will get the images to get the API we will come to the website on splash.com open this website and here you will find the copyright free images for your website so on this website here we will click on this icon and here you can see one link developers slash API click on this link and here you have to create your account click on this button registered as a developer and enter your full name email ID username and password and click on the join button so it will create your new account after that you will come to this page and here you have to create a new application let's click on this link just read all these API guidelines and select these check box then scroll down and click on this button accept terms here you have to add the application name and some descriptions so I will add my channel name easy tutorials and write some description then click on create application after that you will come to this page here just a scroll down here we have two keys access key and secret key so we just need access key just copy this access key somewhere on your computer when you are logged in with the developer account you will see this link view the documentation click on this one and here click search photos by keyword just click here and here you can see we have the API link this one this is the API link and after that we have to pass some parameters that will display the images so we have to enter this API link and after that with this API link we have to give the query like search term and we have to give the page which is the page number it will start from 1 and per page it means in one page how many results you want so let's copy this one and paste it in our browser so you can see authentication error the access token is invalid here we have entered the API link then page equal to 1 and query equal to office so it should give the office image but it is giving the error authentication error because we have not added the access key so at the end here we will add and client underscore ID client ID equal to and enter the access key that we have copied when we have created the account so just copy the access key from your computer and enter here and now you can see the result like this in this results we have the URL that is the image URL so we can display these images on our website here we have the links which is the page link on honest plus website for the particular image and we have other information also like users information user ID username and users profile picture also right now we just want to display the image and when user will click on that image that will go to the unsplash website so we have to use this API URL in our code file so let's come back here we will add here we have added this async function search image and before that we have added let keyword empty and let page equal to 1 and here we are adding keyword equal to search box dot value so in this keyword it will store the value that we will enter in the input field after that we are adding const URL and API URL with this API URL we are also adding the page number using this dollar page and the query text which is the keyword using this keyword and we have to add one more thing which is the client ID so here we will add and client underscore ID equal to red dollar and in this one we will add access key but we have not added access key anywhere so just copy this one and at the top let's add const access key equal to enter the access key that we have copied from a splash website so I have added my access key here so this access key will be added in this API URL using this client ID access key now we can get the response in our browser just add const response equal to a weight fetch URL and next we will add const data equal to a weight response Dot Json now we can print the data let's add console.log data so this function should be executed when we will add any keyword in the input field and click enter or click on the search button for that we will add the submit event on the form so at the end let's add search form dot add event listener submit here we will add e addo function and let's add e Dot prevent default so it will prevent the default feature when we submit the form now we'll add the page page will be one so every time we will enter any new keyword the page will become one and now we have to call this async function so add it here that's it now let's come back to the website here we will add any keyword birds and click enter nothing is happening but let's see our browser console inspect click on Console here you can see this object expand this one here you can see results expand it and here we have the 10 results are starting from 0 to 9 so we got the 10 images let's open and in the first one you can see links so these are the images links and let's click on the URL so it is the unsplash website URL for the particular image that we have to display on our website so we got the result in our browser console so we have to display the same thing in our web page let's close this console and come back to the code file and remove this console.log and a sheet of this one we will add here we have added const results equal to data dot results then we are adding results dot map result so whatever code we will write here that will be executed for each element of that array so here we will add const image equal to document dot create element and create element with the tag IMG so it will create one image tag then for this image we will add one URL of the image so we will add SRC equal to result Dot and we have to get the exact URL so let's come back and here you can see in this results we have the URLs and in this URLs we have the multiple images we have raw image full image regular image and small image thumbnail image so we will add the small image here so we have to add URLs Dot small that's it so write results dot urls Dot small so this line will create a new element with the IMG tag and this will add the image in that IMG tag so we have added one image next we have to add one link so that user will click on that image and that will be redirected to the another website that is on a splash website so we have to create one a tag so just add const image link equal to document dot create element a so it will create one a tag anchor tag and next we have to add the hdf link here so write image link Dot Dot it's rep equal to result Dot let's see it is links and HTML we have to link this particular URL it is in links and HTML so let's come back here we'll add links dot HTML so it will add one Link in the a tag next we have to add one more thing that is Target underscore blank so that the link will open in new tab so right image link Dot Target equal to underscore blank this will open the link in new tab so we have created one new element with the IMG and another element with the a tag next we have to place this image inside this a tag so let's add image link dot happen child image so this image will be inside this image link it means this image will be inside this a tag now where this a tag will be displayed so this a tag should be displayed in our div called search result in this one so so here we have the variable search result let's copy this one and write search result dot happen child image link so this image link will be displayed in this search result after adding this let's come back to the website and enter any search term here tree click enter now you can see three images next we have to align these images so let's come back and here we have the ID search result so let's copy this one and come back to the CSS file at the bottom we will add this ID with the hashtag and here let's add width 80 percent then margin then display grid grid template column one fraction three times so we will get three images in one row then we will add the grid Gap it will be 40 pixel and in this search result there will be some images so we will add IMG tag and for these images we have to add the width width will be hundred percent we will fix the height height will be 230 pixel after that we will add object fit it will be covered and border radius 5 pixel after adding this let's come back to the website and you can see the alignment for these images are looking good but right now it is displaying 10 images so these two fields are empty so we will display 12 images so that this space will be filled up so let's come back and in the subscript file here we can enter the per page so let's add and per underscore page equal to 12 so it will give 12 result let's come back to the website and enter any keyword nature and here we got 12 images now we have to display the load mode button or so more button so you can see in this CSS we have added display none that's why this button is hidden so we have to display this button so come to the script file and when it will be displayed it will be displayed just after displaying the images so we are displaying the images using this function so after this let's add so more BTN Dot Style dot display equal to block so this button will be displayed let's come back and here we will enter snow so we got 12 image and here we have this so more button but right now if I click on this button nothing is happening so we have to load more images when we will click on this button to load more images we have to load the images from the page to page 3 like that so let's come back and we will add the click event on the so more button so at the end in this script file we will add so more BTN dot add event listener this will be click event then write the addo function and in this one we have to add page plus plus so whenever we will click on that button it will increase the value in the page so if the page is one it will make it 2 and if it is 2 it will make it 3 so it will increase the phase value by 1 and again it will call that same search image function which is here search images so already we have the page one result and after that it will add the page to result page 3 result like that cat so we got the cat images let's click on this show more so we got more images this is working so load mode feature is working now refresh the website and if I write cat search enter and write another keyword here Birds so the bird is coming just below these cat results so we have to hide this cat result when we are entering a new keyword so let's come back and before displaying this result we have to check whether the page number is 1. here we will add if page 1 then it should clear the result so let's add search result dot inner HTML empty that's it now just come back and here we'll add cat we got the cat result and if we write animal we got the animal result so finally this image search engine is working fine we have completed this image search engine using HTML CSS and JavaScript there is one more thing when we are using the honest class API we have to give the credit to Anna Splash in the website you have to mention this image is coming from the anus plus I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel easy tutorials to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 18,526

Keywords: make image website, create image website, make image search engine, search engine using API, JavaScript API, get data from API using JavaScript, fech data API using JavaScript, HTML and CSS, JavaScript tutorials, javascript projects

Id: E4znbZgUWzA

Length: 34min 37sec (2077 seconds)

Published: Wed Jun 07 2023