How To Create Image Search Engine Using HTML CSS and JavaScript

Подписаться 1,1 млн

Просмотров 129 тыс.

50% 1

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

Опубликовано:

26 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 200

@evansmbewe06 4 месяца назад

of all the people on RU-vid 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

@saadlasharii 6 дней назад

Completed All the Projects! Love From Pakistan

@andystar444 Год назад

the greatest tutorial channel on youtube💫💫💯

@rsfaraz Год назад

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

@mansisidher Год назад

Thank u for existing dude!!!!

@olatundeolukoya1788 Год назад

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

@Akhi_vlogs_46 5 месяцев назад

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

@satyamgupta1446 3 месяца назад

Your projects tutorials are best😎👍

@chiragsingh8323 11 месяцев назад

Just one word:- Awesome 🔥 Fast and great

@vincentnjeru7116 8 месяцев назад

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?

@Prashu-je4zo Год назад

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

@shekabdulla457 11 месяцев назад

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

@hissamkhan4709 4 месяца назад

thank you for giving the oppertunity of practical experience

@codingbyfaiz8069 Год назад

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

@codeKeshav Год назад

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

@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 11 месяцев назад

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 11 месяцев назад

@@jasmeetkaur0395 i really thankful to you

@rohitshakya4293 11 месяцев назад

@@jasmeetkaur0395 Now code is working

@papidas974 8 месяцев назад

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 8 месяцев назад

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

@Naikks-qy2kr 8 месяцев назад

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

@dannyvanbenthem Год назад

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

@dannyvanbenthem Год назад

Nice tutorial. But what about error handling?

@safaroads9504 2 месяца назад

Thanks a lot, you made it easy.

@kousick3709 Год назад

Informative one, thanks 👍

@isidoramoonrose5657 Год назад

thanks a lot i expect more content from youuuu.

@danishbukhari6693 4 месяца назад

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 4 месяца назад

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

@petermwansa4890 7 месяцев назад

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 7 месяцев назад

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

@petermwansa4890 6 месяцев назад

@@salvadorron7151 yes I was able to access the api

@riyakoshta8958 7 месяцев назад

Sir, your videos are amazing

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

@supriya_codes Год назад

its working! thank you!😇🥰

@GreatStackDev Год назад

Welcome 😊

@supriya_codes Год назад

@@GreatStackDev 🥰

@WEBSITEINTEGRATOR 9 месяцев назад

@@GreatStackDevi need your WhatsApp number

@pvr-sl5wz 7 месяцев назад

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

@learnwithnagma 6 месяцев назад

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

@naaziz-ytyt 15 дней назад

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

@salvadorron7151 7 месяцев назад

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

@danishgaming8249 5 месяцев назад

nice valuable content bro keep it up for learners

@namannema3349 11 месяцев назад

thanks brother a nice and good project

@horrorhawk_gaming Год назад

Sir Create some projects using react js please❤

@tejeshkumardas9508 Год назад

Love it bro❤❤❤

@alfa.98765 2 месяца назад

Thank you Sir ❤

@lavkumargahe8174 Год назад

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

@rukmalherath8633 Год назад

Bro do video WordPress tutorial please.

@ironman-29 Год назад

image carousel project will also be helpful

@yashjetwani9192 10 месяцев назад

How can i search for new pages without re loading?

@olatundeolukoya1788 Год назад

Beautiful beautiful beautiful🤗🤗🤗🤗🤗

@Islamicinfo578 Год назад

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

@mohammadmeraj40 7 месяцев назад

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

@Mohsenkardani 9 месяцев назад

thank you sir

@yashwanthgowdabc1127 3 месяца назад

Thank you sir 😊 It works 😊🎉

@GreatStackDev 3 месяца назад

Welcome 👍

@AaqilKulmie 7 месяцев назад

Thankz Teacher.

@sanketsingh5555 Год назад

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

@technology7033 Год назад

Informative Sir ❤

@jyotivishwakarma5404 2 месяца назад

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

@kleincamper-e4s Год назад

Thank you for this.

@ABHISHEK-xr7dm Год назад

Thank you so much sir

@harshitasinghofficial9953 Год назад

Bhai I humble request. How to make a documentary?

@historiasuperrandom9646 Год назад

Thank you so much for this tutorial!

@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

@learnwithnagma 6 месяцев назад

Thank you 😊

@techcodesmartly2547 11 месяцев назад

awesome, thanks go

@kermanianmitra9508 8 месяцев назад

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

@Soulfulsongss Год назад

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

@deepak_daksh Год назад

Also facing this problem

@WEBSITEINTEGRATOR 9 месяцев назад

Also map problem

@Rose-gb1ku Месяц назад

GreatOne thanks :)

@lucklines 9 месяцев назад

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)

@IT-ScorchYt Год назад

i appreciated u r work bro

@emkaykhan Год назад

Can we host this website and earn from AdSense?

@fantoshfantosh 6 месяцев назад

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

@GreatStackDev 6 месяцев назад

Great job!

@artificialintelligence8688 10 месяцев назад

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

@sreedharlikit8966 Год назад

❤nice tutorials sir🎉🎉🎉🎉

@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 9 месяцев назад

Set you function with the next button to block not none

@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 11 месяцев назад

Yes I'm also getting same result

@saikrishna-mz9iq 5 месяцев назад

image not changed how tochange image

@AaqilKulmie 7 месяцев назад

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

@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

@shammasmc2294 Год назад

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

@MrHrithikChoudhary 3 месяца назад

bro please give java script code 🙏

@Zia_hussain 10 месяцев назад

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

@pranavsoma8608 7 месяцев назад

Same issue with me

@offornna Год назад

I like this

@ebiarun8910 9 месяцев назад

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

@naaziz-ytyt 15 дней назад

same like me, and what next ?

@flex959 Год назад

Mr. Easy can you please teach us php

@itsmjns23 4 месяца назад

Hi i want to know how to use Savefrom API

@akeaditing3896 Год назад

Sir how to add image Downloaded option

@dhanushyadav5030 4 месяца назад

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

@karthikrajk 4 месяца назад

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

@dhanushyadav5030 2 месяца назад

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

@BirasaEmmanuel-pm4xt 11 месяцев назад

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

@byme880 9 месяцев назад

Same issue

@marufhasanshihab Год назад

thanks

@elifoxgamer11 Год назад

What is the name of your Visual Studio Code Theme?

@codeKeshav Год назад

Monokai Dark

@CarryonTechie Год назад

my api unspash page is shown unformatted,

@pvr-sl5wz 7 месяцев назад

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

@bhartisinha2596 11 месяцев назад

This project can be add in resume

@GreatStackDev 11 месяцев назад

Yes, you can add this project in your resume, and will recommend you to checkout this portfolio website project also: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0YFrGy_mzjY.html

@BegoWael-n7s 10 месяцев назад

intro0:0 to 2:50

@tgaming3885 2 месяца назад

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 24 дня назад

yea sam ehere

@djdeto7382 22 дня назад

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

@djdeto7382 22 дня назад

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

@yogeshsingh4354 8 месяцев назад

How can we do this with google api?

@ritikmodanwal810 Год назад

Sir, can you add a download image button

@Dibyendu_das_96 11 месяцев назад

nice video

@GaikwadSamarth 6 месяцев назад

Sir im not getting the images 😢😢

@Motivational_speaker_saikat 11 месяцев назад

Pls tell me how to Handel erroe

@Officialfkeyz- 3 месяца назад

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

@djdeto7382 22 дня назад

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

@unknownXD-wf6rz 10 месяцев назад

my api access key is not working help me

@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 11 месяцев назад

@@alifern4578 😂