How To Create Image Search Engine Using HTML CSS and JavaScript

Learn How To Create Image Search Engine Using HTML CSS and JavaScript | Fetch and display Images from API using JavaScript
👉 Download 30 JavaScript projects Source Code (Including Image search engine):
greatstack.dev...
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this JavaScript project we will make an image search engine where we can search for any image by typing name and it will display list of images from stock images website unsplash.
Here we are using Unsplash API to make this image search engine with the help of JavaScript.
#JavaScriptProject #JavaScript
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 greatstack.dev...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- GREATSTACK)
👉 greatstack.dev...
My recommended projects and tutorials
👉 greatstack.dev/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Connect with me:
👉 linktr.ee/iama...

[@andystar444]

the greatest tutorial channel on youtube💫💫💯

[@mansisidher]

Thank u for existing dude!!!!

[@olatundeolukoya1788]

😂😂😂. He’s more important than my countries president rot now …🎉🎉🎉

[@Akhi_vlogs_46]

I get error in console Uncaught error And filed to load resources the server response with a status of 401 not found

[@chiragsingh8323]

Just one word:- Awesome 🔥 Fast and great

[@rohitshakya4293]

I search for different things every time but it gives me the same results every time. Why is this happening please sir give me answer

[@jasmeetkaur0395]

I also faced the same issue. The error I spotted in my code later was a line break within the template string for constructing the URL. This correction ensures that the URL is constructed correctly and without syntax errors. It's a common mistake to accidentally introduce line breaks within template strings, and it can lead to unexpected issues in your code. Hope it might help :)

[@rohitshakya4293]

@@jasmeetkaur0395 i really thankful to you

[@rohitshakya4293]

@@jasmeetkaur0395 Now code is working

[@papidas974]

Because there is a mistake in the js url line 14 the keyword is not highlighting. So to get the result recheck the line 14 and write the whole line in one row

[@papidas974]

Remove the space before {keyword} and write it in one line

[@codingbyfaiz8069]

Awesome 🎉❤ thanks for this, plz create a food recipe app using api html css js plz it's humble request please 🙏🙏🙏🙏🙏

[@vincentnjeru7116]

Hello bro. Thankyou very much for this. I have followed everything but I keep getting this error message when I try to search for images. Failed to load resource: the server responded with a status of 401 (). Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map') at searchImages (script.js:22:9) What could be the issue with my code?

[@codeKeshav]

At 33:53, the method cannot clear the images if previously load more is clicked. @GreatStack

[@dannyvanbenthem]

Nice tutorial. But what about error handling? Can you show us how?

[@dannyvanbenthem]

Nice tutorial. But what about error handling?

[@shekabdulla457]

22.00 after console this error will comeFailed to load resource: the server responded with a status of 401 () what can i do

[@horrorhawk_gaming]

Sir Create some projects using react js please❤

[@rukmalherath8633]

Bro do video WordPress tutorial please.

[@harshitasinghofficial9953]

Bhai I humble request. How to make a documentary?

[@safaroads9504]

Thanks a lot, you made it easy.

[@kousick3709]

Informative one, thanks 👍

[@isidoramoonrose5657]

thanks a lot i expect more content from youuuu.

[@tejeshkumardas9508]

Love it bro❤❤❤

[@petermwansa4890]

Thank you so much for this playlist. I have followed all the 30 tutorials and I have learned a lot from developing my css skills to working with APIs. I really appreciate it mate🙏🏽

[@salvadorron7151]

where you able access the api ? I followed all the steps but keep getting errors with the api part?

[@petermwansa4890]

@@salvadorron7151 yes I was able to access the api

[@sanketsingh5555]

Bro iss project ko next step pr le jao photo k saath videos section bhi

[@mansoorchanno8278]

Thanks sir for this but i have an error problem my J's file does not work well i put all the elements like the same way 😢

[@olawale11954]

Check the js code very well maybe you have spelling error.

[@riyakoshta8958]

Sir, your videos are amazing

[@supriya_codes]

its working! thank you!😇🥰

[@GreatStackDev]

Welcome 😊

[@supriya_codes]

@@GreatStackDev 🥰

[@WEBSITEINTEGRATOR]

​@@GreatStackDevi need your WhatsApp number

[@danishgaming8249]

nice valuable content bro keep it up for learners

[@yashjetwani9192]

How can i search for new pages without re loading?

[@salvadorron7151]

Thanks for the video, would anyone know how I can get test the api with my access code and have it not show up as json()?

[@naaziz-ytyt]

16:50 i;m stuck at there, already paste access key link. But nothing happen. So what next ?

[@emkaykhan]

Can we host this website and earn from AdSense?

[@namannema3349]

thanks brother a nice and good project

[@lavkumargahe8174]

this video are very helpful thank you bro 😁😁😁😁😁

[@alfa.98765]

Thank you Sir ❤

[@technology7033]

Informative Sir ❤

[@pvr-sl5wz]

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map') at searchImages (script.js:21:13)

[@learnwithnagma]

In html code, Write id in place of class in search result div . This solved my error 😊.

[@jyotivishwakarma5404]

if I want to add a download symbol in this image and after clicking that my image is getting download what should I do

[@artificialintelligence8688]

also can you please teach us how to deploy it in any free hosting site , may be in netlify ?

[@Soulfulsongss]

code is not working problem in map function and in fetching url

[@deepak_daksh]

Also facing this problem

[@WEBSITEINTEGRATOR]

Also map problem

[@fantoshfantosh]

at this moment I finish all videos .thank you soooooo munch

[@GreatStackDev]

Great job!

[@mohammadmeraj40]

Very good very nice bro👍👍👍❤️❤️❤️❤️

[@yashwanthgowdabc1127]

Thank you sir 😊 It works 😊🎉

[@GreatStackDev]

Welcome 👍

[@AaqilKulmie]

Thankz Teacher.

[@saikrishna-mz9iq]

image not changed how tochange image

[@VishalAhir-k2b]

thank you sir

[@learnwithnagma]

Thank you 😊

[@historiasuperrandom9646]

Thank you so much for this tutorial!

[@ABHISHEK-xr7dm]

Thank you so much sir

[@lucklines]

Can we Earn through these kind of websites through selling pics or ads, as if we are getting these images from an API of free source website(s)

[@akeaditing3896]

Sir how to add image Downloaded option

[@IT-ScorchYt]

i appreciated u r work bro

[@kermanianmitra9508]

But when I click one of the pictures it doesn't open the Unsplash website to show that image. why??

[@CyberHunter370]

ailed to load resource: the server responded with a status of 401 () unsplash search keyword problem how to solve it

[@emmanuelvijaypeter7109]

recheck your're code cause every coder have this problem check the js and HTML and you can solve it, take care

[@shammasmc2294]

Can just make these website by using reverse image search by same methode

[@durgamgirishkumar8893]

I have one error bro 12 images after show more btn will not display It will display 1st image before That is my problem

[@WEBSITEINTEGRATOR]

Set you function with the next button to block not none

[@dhanushyadav5030]

Chatgpt helped me to clear my errors so code is running fine

[@karthikrajk]

im getting 401 error code please help with this..... thank you.

[@dhanushyadav5030]

​@@karthikrajk you mostly would've used a inverted comma instead of template literal like me

[@ebiarun8910]

I registered in unplash ...but the link is working...i also paste the access key ...but didn't work

[@naaziz-ytyt]

same like me, and what next ?

[@Zia_hussain]

The access key code is not working can anyone tell me why

[@pranavsoma8608]

Same issue with me

[@MyGamingEra]

Done ✅ thank you so much sir🎉❤

[@GreatStackDev]

You are welcome

[@sravanit2002]

I search for different things every time but it gives me the same results every time. Why is this happening please give me answer

[@tabishansari1774]

@@GreatStackDev it giving me same results every time plzz help

[@ferhatabik1906]

@@tabishansari1774 I think I made the same mistake :D Did you solve ?

[@rakeshpandey6768]

Yes I'm also getting same result

[@itsmjns23]

Hi i want to know how to use Savefrom API

[@TheIpriest-fp2mk]

good day brother i did everything and my js script works fine but when i search bird i get the error OAuth error: The access token is invalid but my token is valid i copied the token that was given to me that is what i used

[@alimulla4098]

Bro did you got any solution to this problem please tell me I am also facing same problem

[@TheIpriest-fp2mk]

@@alimulla4098 sorry bro i did not so i actually abadoned the project

[@CarryonTechie]

my api unspash page is shown unformatted,

[@BegoWael-n7s]

intro0:0 to 2:50

[@marufhasanshihab]

thanks

[@AaqilKulmie]

Any one Please help. i have this error Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') Code: searchForm.addEventListener("submit", (e) => { e.preventDefault(); page = 1; searchImages(); })

[@ritikmodanwal810]

Sir, can you add a download image button

[@Motivational_speaker_saikat]

Pls tell me how to Handel erroe

[@Dibyendu_das_96]

nice video

[@GaikwadSamarth]

Sir im not getting the images 😢😢

[@tgaming3885]

bro api is not workig every time geting this error Error fetching data: ReferenceError: url is not defined Failed to load resource: the server responded with a status of 401 ()

[@lil-mol5694]

yea sam ehere

[@djdeto7382]

Api is chnaged use this instead ``` image.src = result.cover_photo.urls.small;

[@djdeto7382]

@@lil-mol5694 Api is chnaged use this instead ``` image.src = result.cover_photo.urls.small;

[@medianopolhosting]

Web hosting is like a car - you get what you pay for. 🚗💰

[@Omkartemkar5686]

Sir I completed the tutorial I have written the same code as in video and there are no errors in any of code but why no results are coming even after searching please tell?

[@abdurRahman-po6jr]

Make sure you are connected to the Internet .

[@alifern4578]

Several possibilities: Make sure the "search-result" div includes "id" and not classname. Check that your access key is correctly copied and including the quotations, make sure that the searchResult expression is written correctly everywhere. Good luck!

[@ritikmodanwal810]

@@alifern4578 thank you so much bro i had written it class instead of id

[@alifern4578]

@@ritikmodanwal810 You're welcome! A sister here ;)

[@Omkartemkar5686]

@@alifern4578 😂

[@jmsaini9025]

please sir provide code

[@Officialfkeyz-]

i tired everything the api did not work what should i do to resolve this issue

[@djdeto7382]

Api is chnaged use this instead ``` image.src = result.cover_photo.urls.small;

[@falguniprasadranga3147]

Create KZbin video downloader project in javascript

[@smarterDev]

my page keep bringing back same 12 images after clicking on more. please help

[@rakeshsondagar2981]

pls check your code once, i ' m sure you made a mistake :)😉

[@smarterDev]

@@rakeshsondagar2981 alright thanks

[@ferhatabik1906]

I think I made the same mistake :D Did you solve ?

[@smarterDev]

@@ferhatabik1906 no, didn't work

[@Akhi_vlogs_46]

Prblm in const url its not working

[@djdeto7382]

Api is chnaged use this instead ``` image.src = result.cover_photo.urls.small;

[@vinaybhardwaj4005]

Link kesa add kar na h ye samaj me nhi aaya mera me error aa raha h??? Reply plz,...

[@codingbyfaiz8069]

Kya error hai btaou

[@mansoorchanno8278]

Same bro website par work show nahy ho raha

[@dilshanikalhara9770]

Image web site name

[@anjalijain364]

Hello

[@28_ankitakumariit8]

Randomly kuch bhi aa rha search krne pr or baar baar same pictures hi aa rha h plzzz help m sir

[@lavkumargahe8174]

code dikhao

[@dididudu2072]

So, how to load another image if another image has been loaded in search-result? nvm. thank you!

[@tipsinfo8589]

need source code

[@delikiz3722]

i dont know my api doesnt work

[@alifern4578]

Several possibilities: Make sure the "search-result" div includes "id" and not classname. Check that your access key is correctly copied and including the quotations, make sure that the searchResult expression is written correctly everywhere. Good luck!

[@SIDDHARTHwakade]

Nahi ho raha 😢

[@28_ankitakumariit8]

anyone plz help me

[@saadlasharii]

Completed All the Projects! Love From Pakistan

[@dannyvanbenthem]

Nice tutorial. But what about error handling?

[@TheIpriest-fp2mk]

good day brother i did everything and my js script works fine but when i search bird i get the error OAuth error: The access token is invalid but my token is valid i copied the token that was given to me that is what i used

[@dhawaljangpangi7164]

need to use ` instead of ' for the url

[@TheIpriest-fp2mk]

@@dhawaljangpangi7164 you mean can you please elaborate?

[@danishbukhari6693]

Finally completed the playlist. I did all 30 projects by following the tutorials and now feeling confident. I learned a lot and wanna say thanks to sir Avinash for those great tutorials.

[@dhanushyadav5030]

did the api's work , i keep getting authorisation error?

[@MrHrithikChoudhary]

bro please give java script code 🙏

[@olawale11954]

Great tutorial everything work perfectly. Thank you sir for the video.

[@MrHrithikChoudhary]

can you give me its java script code ?

[@olawale11954]

@@MrHrithikChoudhary Yes of course

[@manikiran949]

Can you please send the code here

[@VaibhavChawla-lz4fi]

Images are not showing😥😥 , worst tutorial 😠😠, do not watch☠☠

[@pvr-sl5wz]

Failed to load resource: the server responded with a status of 404 ()

[@oilybrakes]

12:05 line 17: Inserting a Js file this way will only work when html file and Js file are stored locally and the Js file doesn't need to be loaded from a server, right?

[@monsurolalekan4457]

I am getting this error: Uncaught (in promise) TypeError. Cannot read properties of undefined (reading 'small'). Meanwhile, I wrote image.src = result.urls.small.

[@evansmbewe06]

of all the people on KZbin you are the best because a lot of people hide the steps and show you the steps which they want you to see but you show everything. Good teacher

[@WEBSITEINTEGRATOR]

How do I fix this issue results.map((result) =>{ } Console say cannot read property of 'map'

[@SureshKumar-qx6vh]

While image searching by keywords, images not appear

[@GreatStackDev]

please check the video at 22:00 do you get data in your browser console?

[@abdultanveerj6441]

How to get it downloaded through this website itself?

[@sangeeth3908]

i have done every step still my search is not working help!

[@alimulla4098]

Bro same thing happens with me repeatedly go open console and check for any error

[@irfanahmed7004]

@@alimulla4098 its hsowing TypeError: Cannot read properties of null (reading 'appendChild')

[@codingbyfaiz8069]

Name shi se target kro brother

[@codingbyfaiz8069]

Element name jo html file mai hai vhi same javascript mai hona chaiye

[@sangeeth3908]

solved using gpt

[@satyamgupta1446]

Your projects tutorials are best😎👍

[@Prashu-je4zo]

Great Job Broo👏👏👏👏👏👏 your tutorials are very much useful to us broo... keepon doing THANKS A LOT👍👍👍👍👍