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/go/30-js-projects
❤️ 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/go/html-css-co...
-------------------------------------
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/go/hostinger/
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/iamavinashkr

[@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

[@andystar444]

the greatest tutorial channel on youtube💫💫💯

[@rsfaraz]

Thanks a lot the man behind Easy Tutorials Lots of love and gratitude!! Fro Saudi Arabia. ❤

[@chiragsingh8323]

Just one word:- Awesome 🔥 Fast and great

[@Prashu-je4zo]

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

[@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?

[@hissamkhan4709]

thank you for giving the oppertunity of practical experience

[@satyamgupta1446]

Your projects tutorials are best😎👍

[@kousick3709]

Informative one, thanks 👍

[@tejeshkumardas9508]

Love it bro❤❤❤

[@namannema3349]

thanks brother a nice and good project

[@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

[@isidoramoonrose5657]

thanks a lot i expect more content from youuuu.

[@user-wf2ou1lq1r]

Thank you for this.

[@riyakoshta8958]

Sir, your videos are amazing

[@technology7033]

Informative Sir ❤

[@safaroads9504]

Thanks a lot, you made it easy.

[@lavkumargahe8174]

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

[@AaqilKulmie]

Thankz Teacher.

[@learnwithnagma]

Thank you 😊

[@techcodesmartly2547]

awesome, thanks go

[@historiasuperrandom9646]

Thank you so much for this tutorial!

[@IT-ScorchYt]

i appreciated u r work bro

[@dannyvanbenthem]

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

[@user-fl6dw1ki1s]

thank you sir

[@codingbyfaiz8069]

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

[@ABHISHEK-xr7dm]

Thank you so much sir

[@alfa.98765]

Thank you Sir ❤

[@sreedharlikit8966]

❤nice tutorials sir🎉🎉🎉🎉

[@danishgaming8249]

nice valuable content bro keep it up for learners

[@mohammadmeraj40]

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

[@mansisidher]

Thank u for existing dude!!!!

[@olatundeolukoya1788]

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

[@dannyvanbenthem]

Nice tutorial. But what about error handling?

[@ironman-29]

image carousel project will also be helpful

[@Islamicinfo578]

Sir you are a very good teacher I suggest you sir you will start reactjs

[@marufhasanshihab]

thanks

[@olatundeolukoya1788]

Beautiful beautiful beautiful🤗🤗🤗🤗🤗

[@offornna]

I like this

[@horrorhawk_gaming]

Sir Create some projects using react js please❤

[@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?

[@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

[@yashwanthgowdabc1127]

Thank you sir 😊 It works 😊🎉

[@GreatStackDev]

Welcome 👍

[@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

[@Naikks-qy2kr]

Your videos are awesome but plzz whenever uhh write a javascript new keywords, plzz tell us ki what that keywords does.. That will help us understanding Js more quickly..

[@fantoshfantosh]

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

[@GreatStackDev]

Great job!

[@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()?

[@rukmalherath8633]

Bro do video WordPress tutorial please.

[@Dibyendu_das_96]

nice video

[@artificialintelligence8688]

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

[@supriya_codes]

its working! thank you!😇🥰

[@GreatStackDev]

Welcome 😊

[@supriya_codes]

@@GreatStackDev 🥰

[@uzochukwuuzuegbunam6109]

​@@GreatStackDevi need your WhatsApp number

[@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?

[@shekabdulla457]

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

[@flex959]

Mr. Easy can you please teach us php

[@shammasmc2294]

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

[@akeaditing3896]

Sir how to add image Downloaded option

[@harshitasinghofficial9953]

Bhai I humble request. How to make a documentary?

[@sanketsingh5555]

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

[@ritikmodanwal810]

Sir, can you add a download image button

[@TOONSSTATION]

Completed.

[@Akhi_vlogs_46]

Can u please explain me?

[@TOONSSTATION]

@@Akhi_vlogs_46 Explain what bro ?

[@yashjetwani9192]

How can i search for new pages without re loading?

[@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

[@uzochukwuuzuegbunam6109]

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

[@Supreme42official]

Hey I am getting the error in Console uncaught type error and cannot read properties of null of Add eventlistener And Filed to load resources The server response with a status of 404 not found Help if any one know why and wht is it

[@xdjqye]

did you solve it yet? and did you add error handling methods to make sure you encounter no errors?

[@Funnyjksforyou]

Hi i want to know how to use Savefrom API

[@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

[@CarryonTechie]

my api unspash page is shown unformatted,

[@ebiarun8910]

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

[@emkaykhan]

Can we host this website and earn from AdSense?

[@Motivational_speaker_saikat]

Pls tell me how to Handel erroe

[@user-ht2ry4th1x]

intro0:0 to 2:50

[@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.

[@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

[@GaikwadSamarth]

Sir im not getting the images 😢😢

[@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 😊.

[@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)

[@kermanianmitra9508]

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

[@yogeshsingh4354]

How can we do this with google api?

[@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

[@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(); })

[@Akhi_vlogs_46]

Prblm in const url its not working

[@jmsaini9025]

please sir provide code

[@saikrishna-mz9iq]

image not changed how tochange image

[@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

[@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

[@uzochukwuuzuegbunam6109]

Set you function with the next button to block not none

[@falguniprasadranga3147]

Create KZbin video downloader project in javascript

[@Officialfkeyz-]

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

[@elifoxgamer11]

What is the name of your Visual Studio Code Theme?

[@codeKeshav]

Monokai Dark

[@anjalijain364]

Hello

[@codeKeshav]

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

[@Soulfulsongss]

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

[@deepak_daksh]

Also facing this problem

[@uzochukwuuzuegbunam6109]

Also map problem

[@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?

[@MrHrithikChoudhary]

bro please give java script code 🙏

[@bhartisinha2596]

This project can be add in resume

[@GreatStackDev]

Yes, you can add this project in your resume, and will recommend you to checkout this portfolio website project also: kzbin.info/www/bejne/Zoqpo3qvlNKtoLs

[@BirasaEmmanuel-pm4xt]

why do i have these errors Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at

[@byme880]

Same issue

[@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

[@SIDDHARTHwakade]

Bhai mere me url nahi aa raha hai

[@medianopolhosting]

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

[@unknownXD-wf6rz]

my api access key is not working help me

[@Zia_hussain]

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

[@pranavsoma8608]

Same issue with me

[@pvr-sl5wz]

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