How To Create Image Search Engine Using HTML CSS and JavaScript
Vložit
- čas přidán 6. 06. 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
👉 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
of all the people on CZcams 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
the greatest tutorial channel on youtube💫💫💯
Thanks a lot the man behind Easy Tutorials
Lots of love and gratitude!! Fro Saudi Arabia. ❤
Just one word:- Awesome 🔥
Fast and great
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 👍
Your projects tutorials are best😎👍
thank you for giving the oppertunity of practical experience
thanks a lot i expect more content from youuuu.
thanks brother a nice and good project
Sir, your videos are amazing
Thanks a lot, you made it easy.
Great tutorial everything work perfectly. Thank you sir for the video.
can you give me its java script code ?
@@MrHrithikChoudhary
Yes of course
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.
nice valuable content bro keep it up for learners
Awesome 🎉❤ thanks for this, plz create a food recipe app using api html css js plz it's humble request please 🙏🙏🙏🙏🙏
Thank you so much for this tutorial!
i appreciated u r work bro
Informative Sir ❤
❤nice tutorials sir🎉🎉🎉🎉
Love it bro❤❤❤
Very good very nice bro👍👍👍❤️❤️❤️❤️
awesome, thanks go
Nice tutorial. But what about error handling? Can you show us how?
Thankz Teacher.
Thank you so much sir
Thank you 😊
thank you sir
Thank you Sir ❤
at this moment I finish all videos .thank you soooooo munch
Great job!
Sir Create some projects using react js please❤
Nice tutorial. But what about error handling?
Sir you are a very good teacher I suggest you sir you will start reactjs
image carousel project will also be helpful
Beautiful beautiful beautiful🤗🤗🤗🤗🤗
Thank you sir 😊
It works 😊🎉
Welcome 👍
I like this
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..
its working!
thank you!😇🥰
Welcome 😊
@@GreatStackDev 🥰
@@GreatStackDevi need your WhatsApp number
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?
Bro do video WordPress tutorial please.
thanks
I get error in console Uncaught error
And filed to load resources the server response with a status of 401 not found
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
nice video
Bhai I humble request.
How to make a documentary?
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?
Mr. Easy can you please teach us php
also can you please teach us how to deploy it in any free hosting site , may be in netlify ?
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
22.00 after console this error will comeFailed to load resource: the server responded with a status of 401 () what can i do
Bro iss project ko next step pr le jao photo k saath videos section bhi
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()?
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
Completed.
Can u please explain me?
@@Akhi_vlogs_46 Explain what bro ?
Sir how to add image Downloaded option
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?
How can i search for new pages without re loading?
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
Can we host this website and earn from AdSense?
if I want to add a download symbol in this image and after clicking that my image is getting download what should I do
Sir im not getting the images 😢😢
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.
How do I fix this issue results.map((result) =>{
}
Console say cannot read property of 'map'
Hi i want to know how to use Savefrom API
Sir, can you add a download image button
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)
Chatgpt helped me to clear my errors so code is running fine
im getting 401 error code please help with this..... thank you.
@@karthikrajk you mostly would've used a inverted comma instead of template literal like me
But when I click one of the pictures it doesn't open the Unsplash website to show that image. why??
image not changed how tochange image
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
What is the name of your Visual Studio Code Theme?
Monokai Dark
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
While image searching by keywords, images not appear
please check the video at 22:00 do you get data in your browser console?
my api unspash page is shown unformatted,
code is not working problem in map function and in fetching url
Also facing this problem
Also map problem
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: czcams.com/video/0YFrGy_mzjY/video.html
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 😊.
intro0:0 to 2:50
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
The access key code is not working can anyone tell me why
Same issue with me
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 ()
Pls tell me how to Handel erroe
Web hosting is like a car - you get what you pay for. 🚗💰
Failed to load resource: the server responded with a status of 404 ()
bro please give java script code 🙏
Create CZcams video downloader project in javascript
why do i have these errors Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at
Same issue
How can we do this with google api?
i tired everything the api did not work what should i do to resolve this issue
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
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();
})
Hello
please sir provide code
Prblm in const url its not working
So, how to load another image if another image has been loaded in search-result?
nvm. thank you!