How To Create Image Search Engine Using HTML CSS and JavaScript
HTML-код
- Опубликовано: 6 июн 2023
- 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
👉 easytutorialspro.com/go/course/
-------------------------------------
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- EASYTUTORIALS)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ 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
Great tutorial everything work perfectly. Thank you sir for the video.
of all the people on RUclips 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
Thanks a lot the man behind Easy Tutorials
Lots of love and gratitude!! Fro Saudi Arabia. ❤
Just one word:- Awesome 🔥
Fast and great
the greatest tutorial channel on youtube💫💫💯
Great Job Broo👏👏👏👏👏👏 your tutorials are very much useful to us broo... keepon doing THANKS A LOT👍👍👍👍👍
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.
did the api's work , i keep getting authorisation error?
Informative one, thanks 👍
thank you for giving the oppertunity of practical experience
thanks brother a nice and good project
thanks a lot i expect more content from youuuu.
Sir, your videos are amazing
this video are very helpful thank you bro 😁😁😁😁😁
Thank u for existing dude!!!!
😂😂😂. He’s more important than my countries president rot now …🎉🎉🎉
Thank you for this.
Informative Sir ❤
Love it bro❤❤❤
awesome, thanks go
i appreciated u r work bro
Awesome 🎉❤ thanks for this, plz create a food recipe app using api html css js plz it's humble request please 🙏🙏🙏🙏🙏
Very good very nice bro👍👍👍❤️❤️❤️❤️
Thank you so much for this tutorial!
nice valuable content bro keep it up for learners
Thankz Teacher.
thank you sir
Thank you so much sir
Nice tutorial. But what about error handling? Can you show us how?
❤nice tutorials sir🎉🎉🎉🎉
Thank you 😊
at this moment I finish all videos .thank you soooooo munch
Great job!
image carousel project will also be helpful
Nice tutorial. But what about error handling?
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?
Sir you are a very good teacher I suggest you sir you will start reactjs
Sir Create some projects using react js please❤
Beautiful beautiful beautiful🤗🤗🤗🤗🤗
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?
its working!
thank you!😇🥰
Welcome 😊
@@GreatStackDev 🥰
@@GreatStackDevi need your WhatsApp number
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🙏🏽
where you able access the api ? I followed all the steps but keep getting errors with the api part?
@@salvadorron7151 yes I was able to access the api
I like this
thanks
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()?
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..
22.00 after console this error will comeFailed to load resource: the server responded with a status of 401 () what can i do
nice video
Bro do video WordPress tutorial please.
Done ✅ thank you so much sir🎉❤
You are welcome
I search for different things every time but it gives me the same results every time. Why is this happening please give me answer
@@GreatStackDev it giving me same results every time plzz help
@@tabishansari1774 I think I made the same mistake :D Did you solve ?
Yes I'm also getting same result
Completed.
Can u please explain me?
@@Akhi_vlogs_46 Explain what bro ?
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
did you solve it yet? and did you add error handling methods to make sure you encounter no errors?
I get error in console Uncaught error
And filed to load resources the server response with a status of 401 not found
Bhai I humble request.
How to make a documentary?
also can you please teach us how to deploy it in any free hosting site , may be in netlify ?
Mr. Easy can you please teach us php
How do I fix this issue results.map((result) =>{
}
Console say cannot read property of 'map'
Can just make these website by using reverse image search by same methode
I registered in unplash ...but the link is working...i also paste the access key ...but didn't work
Bro iss project ko next step pr le jao photo k saath videos section bhi
Hi i want to know how to use Savefrom API
Sir how to add image Downloaded option
How can i search for new pages without re loading?
Chatgpt helped me to clear my errors so code is running fine
im getting 401 error code please help with this..... thank you.
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
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 :)
@@jasmeetkaur0395 i really thankful to you
@@jasmeetkaur0395 Now code is working
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
Remove the space before {keyword} and write it in one line
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)
Sir, can you add a download image button
my api unspash page is shown unformatted,
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 😢
Check the js code very well maybe you have spelling error.
But when I click one of the pictures it doesn't open the Unsplash website to show that image. why??
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')
at searchImages (script.js:21:13)
In html code,
Write id in place of class in search result div . This solved my error 😊.
ailed to load resource: the server responded with a status of 401 () unsplash search keyword problem how to solve it
recheck your're code cause every coder have this problem check the js and HTML and you can solve it, take care
Can we host this website and earn from AdSense?
Pls tell me how to Handel erroe
intro0:0 to 2:50
I have one error bro
12 images after show more btn will not display
It will display 1st image before
That is my problem
Set you function with the next button to block not none
How can we do this with google api?
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();
})
why do i have these errors Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at
Same issue
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
Bro did you got any solution to this problem please tell me I am also facing same problem
@@alimulla4098 sorry bro i did not so i actually abadoned the project
code is not working problem in map function and in fetching url
Also facing this problem
Also map problem
How to get that index.html file of chrome and style.css in pc please tell
Just make a file name index.html
What is the name of your Visual Studio Code Theme?
Monokai Dark
While image searching by keywords, images not appear
please check the video at 22:00 do you get data in your browser console?
The access key code is not working can anyone tell me why
Same issue with me
Prblm in const url its not working
At 33:53, the method cannot clear the images if previously load more is clicked. @GreatStack
image not changed how tochange image
Web hosting is like a car - you get what you pay for. 🚗💰
This project can be add in resume
Yes, you can add this project in your resume, and will recommend you to checkout this portfolio website project also: ruclips.net/video/0YFrGy_mzjY/видео.html
Sir im not getting the images 😢😢
Create RUclips video downloader project in javascript
Hello
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?
Make sure you are connected to the Internet .
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!
@@alifern4578 thank you so much bro i had written it class instead of id
@@ritikmodanwal810 You're welcome! A sister here ;)
@@alifern4578 😂
Failed to load resource: the server responded with a status of 404 ()
i have done every step still my search is not working help!
Bro same thing happens with me repeatedly go open console and check for any error
@@alimulla4098 its hsowing TypeError: Cannot read properties of null (reading 'appendChild')
Name shi se target kro brother
Element name jo html file mai hai vhi same javascript mai hona chaiye
solved using gpt
my page keep bringing back same 12 images after clicking on more. please help
pls check your code once, i ' m sure you made a mistake :)😉
@@rakeshsondagar2981 alright thanks
I think I made the same mistake :D Did you solve ?
@@ferhatabik1906 no, didn't work
please sir provide code
my api access key is not working help me
does anyone have working source code tried to solve error but failed. please reply it will be a great help
Is it solved?
Bhai mere me url nahi aa raha hai
Link kesa add kar na h ye samaj me nhi aaya mera me error aa raha h??? Reply plz,...
Kya error hai btaou
Same bro website par work show nahy ho raha
So, how to load another image if another image has been loaded in search-result?
nvm. thank you!