JavaScript Project | Image Search App With JavaScript API
Вставка
- Опубліковано 28 чер 2024
- In this video, I'll guide you through building an Image Search App using JavaScript API. Perfect for beginners and those looking to enhance their HTML, CSS, and JavaScript skills. This JavaScript project will help to understand the fundamentals for API. Join us as we create this dynamic project together!
Source Code 1: www.buymeacoffee.com/tech2etc...
Source Code 2: ko-fi.com/s/979ec0831e
All Source Codes: www.buymeacoffee.com/tech2etc
⛔❌Do Not CLICK This Link: bit.ly/3lJLyLY
Need any help? Join my Discord: / discord
This project is inspired by "JavaScript King".
Keywords: javascript project, html css javascript project, javascript projects for beginners, javascript projects, javascript api tutorial.
⭐️ Merch ⭐️
👕 Merchandise: tech2-etc.creator-spring.com
If you enjoyed this video, then please please 👍LIKE and SUBSCRIBE this channel & press the bell icon for future videos.
Thank you.
=============
SUPPORT ME 💪
=============
🎁 Support and Buy Me A Coffee for exclusive episodes, discord and more!
www.buymeacoffee.com/tech2etc
🎀 Donate Me By Paypal: www.paypal.com/paypalme/tech2etc
==========================
Free Course to Improve Your Skills
==========================
✅ WordPress Insider:
• WordPress Tutorial
✅ Learn Bootstrap With Projects:
• Bootstrap Website Tuto...
✅ Web Development For Beginners:
• Learn Web Design & Lea...
✅ Responsive Web Design With Projects:
ua-cam.com/users/Tech2etcpl...
✅ Learn JavaScript With Projects:
• JavaScript Projects Fo...
✅ Learn Python With Projects:
• Python Projects
===============================
Connect with me & get daily updates👇
===============================
Discord: / discord
Instagram: / fahimulkabir.tech2etc
Twitter: / tech2etc
LinkedIn: / fahimulkabirchowdhury
Group: / 14295322
FB (Personal): / mdfahimulkabir
FB Page: / tech2etc
Timestamps:
0:00 Intro
1:35 File setup
2:44 HTML
7:39 CSS
21:05 JavaScript
46:58 Final Project
Thank you for this well-detailed project, and i am longing for more tutorial.
Thanks for this amazing project. I loved following this tutorial and creating the image search application
Thank you so much for the project! it has been explained simple and. clearly! the explanation in the end of the video amazed me a lot!
Mass Thalaiva nee❤🔥❤🔥🔥🔥
This course is priceless and amazing seriously.. I love you bro
thanku so much its my first project using api
Yes there is error in code in js where we append child so we can solve this problem by this code
imageLink.appendChild(image);
imageWrapper.appendChild(imageLink);
searchResults.appendChild(imageWrapper);
This is the solution so then its proper work if after this its not working then you entered incorrect code so when i put this it’s working 😊 thanks
Thank you so much bro🔥 worried about not working..... Thanks a lot bro🎉🎉✨
Thank you a lot!!
bro what's about "could not find name 'searchResults' "? how to fix that?
also i did this code but didnot work
Thank you so much! You helped me.
Great tutorial! Thank you for your effort
Works like magic
Thanks
Thank You Sir! A lot of new knowledge. Join you as a Subscriber!
Great job bro! Thanks a lot!
thanx a lot for such a job oriented project this might help in getting our resume shortlisted for jobs
Great tutorial! I learned a some new things. Last appendChild had to be fixed, but otherwise everything went smooth as butter. I did few modifications for CSS and built in a clear-button. Cool and informative project tutorial, keep it up!
Really enjoyed this project. The upper video has a few errors but after fixing them, works perfectly. Kudos to the publisher!
what is the url
The URL he has used is it correct? Got 401 error.
Excellent, the review at the end is very valuable. I hope you continue to do the review. It helps us understand the process. Thanks for all your hard work.
Thank you for creating this video.
thanks macha .....I subscribed ...Love from india
i loved ur Ecommerce website project and u tell us that javascript concepts with real website example that no one will tell with real life/website example
Clear and crisp explanation..Learnt many things .Thanks ..
may you please help me in my code
this was really helpful, i follolwed along and my app works thank you
Thank you. It works beautifully!
Can u help me to run this code
Thank you so much, I learned a lot on this project! I will do the rest of your tutorials to learn more its very comprehensive and easy to follow specially for beginners like me
mera to kam ni kr rha h plz help
Thanks for this amazing project. I loved following this tutorial and creating the image search application. However, as a beginner, it would be great if you could also explain the purpose of each function or keyword you are using alongside so we could understand JS better.
very useful. thank you for this project.
i learned a lot of things from this video thsnkyou..
thank you so much for the tutorial.
Thanks for this project ! I love how you explain every step !
super duper buddy thank u
Really helpful!✨
Want more 🚀
deserved my subscption thanks for teaching
Thank you SIr...!
thankyou for this it was really helpfull.
Very interesting tutorial. Thanks for your efforts.
Thankyou so much!
Bhai do you cover all topics in your javascript projects like aslsynchronous js. api etc and more advanced topics like promises ???
Please confirm then I'll follow all your projects
great i love it
its really amazing
wow so nice idea
It's awesome. 😊😊😊
I have learned many things from this project.You have done such a great job.Thanks a lot.
Images not coming after clicking search button
Thanks Sir
Kindly teach how to create a personal portfolio in which the entire website can be linked for web developers ... please
Thanks for this amazing tutorial. Can you tell me how I can get a certain numbers of pictures per request/page, thanks!
Thank you sir it is an amazing video for me as beginner..
Your most welcome dear 😇
that's really impressive for me and i really enjoyed and really helpful for me thank a lot man
Can u help me to run code
Awesome, Thanks for the tutorial
wow bro:)
Hey great video, I just don't really get how do you manage to show different images when clicking the show more button? the same function is called to add the data based on the input value but images are not repeated, how do you do that?
You deserve like
thanks sir for create this unique project
waoo thanks
Amazing
Excellent work❤
Can u help to run code
If anyone does a problem with the code check your const url and input /search/ before photos in your url
I take help from your vedios.please teach me how to edit the whole website project in my personal portfolio
yes api is working you can go with it
thanks dude
Plz Bro We want more applications project
perfect i am from IRAN
Please explain const accessKey?
You can just add react and it gonna be more simple
bro can you make a video for mern fullstack e-commerce website plz..
Hi , sir its a great video but the code isn't working on my system , any suggestion?
I am getting the pictures in vertical manner how to make them to visible in horizontal
API is not fetching data
anyone facing this problem?
same here
issue resolved?
Use Back tick ` ` not single ' '
and
let page = 2;
For anyone who has TypeError: Cannot read properties of undefined (reading 'map'):
1. Check the accessKey
2. Retype: const url and make sure you enter it correctly, no spaces or any newline
3. Check the results dot map
can u help me to fix this?????? {"errors":["OAuth error: The access token is invalid"]}
Can u help me to run it
3. worked for me. thank you!!
You are rock
And i am john cena
I couldnot understand result .map function can anyone explain
Assalam o Alaikum WrWb..There is a mistake in JS part..
//incorect
let page=1;
//Correct
let page=2;
otherwise, the show more button won't work..
same
Image is not beig searched it shows blank and showmore button only what should i do
@@user-zu2ot5ik4w same issue i am facing did your issue resolved
Great share! ✨👏
Thank you
@@Tech2etcI need your Help to link my entire website in personal portfolio
which vs code theme is this ?
its not fetching any images . what to do now
my app is not fetching the inputData
what may be the issue ?
Why my Show more button is not working? Please reply sir
Eventhough I have chrome extension for cors...Im facing corspolicy error...Can somebody help me ?
Uncaught (in promise) TypeError: Cannot set properties of null (setting 'href') this is my problem hope u can answer
Thanks a lot for the project demo
may you plz help me
@@HITESHKUMAR-dv6se say bro?
@@neiljohn2637 if we search any word then it return same images again and again
@@HITESHKUMAR-dv6se Same thing is happening with me!
@@neiljohn2637 if we search any image it is returning same images again and again and more button is not at its right position and not working
Thanks for this video ,but i have a doubt, i have written alL the code correctly ,no error is showing in console also but still images ARE NOT LOADED WHEN CLICKING ON SEARCH PLSS HELP ME.
I got the same problem
Brother please can you create a attractive website with only for personal peoples or family. where we create a personal account with login and upload our pictures with personal chat
code is not working
Just change this in html: Search
Hey! do you have the source code of this project? I have issue in fetching the data.
@Tech2_etc Hey great video. I followed each step and made sure no bugs were present, I had touble when I searched for something, the page goes blank upon clicking search and rarely would it load the Show More button. Any ideas? (I also created an account on the API, etc)
same issue, what works for me was i did inspect my site and check in "console" to see the error in my java script.
First make sure that there's semicolon in all the script.
2nd i did see an error 400 in the link. I miss type "$" instead of "&" in the URL
3rd is the error in image.src = result.urls.small i typed "url" missing the "s"
its very helpful to check in console tab to as it will give you the error and line/s so double check why the JS isn't working.
Took me hour to troubleshoot. Hope it helps.
same problem;😒😒
.value ke pass error show kr rha h how to fix it
theme name?
having error in map function and in fetch (url)
guys if anyone have a problem because showing same picture everytime check the function
async function searchImages(){
inputData = inputEl.value; the value should be "v" minimize not "V" capitalize
Problem in map method not work and error 404
Url not working...plz give the solution
Done
It's not working with same code I think there are some some error which we can't see it's. 😢
i need help mera work nhi kar rha hai error arha hai fetch problem
there is exactly not an error but if i write and click to search to anything it doesnt work there must be something to change or add but i dont know what it is. need some help
guys if anyone have a problem because showing same picture everytime check the function
async function searchImages(){
inputData = inputEl.value; the value should be "v" minimize not "V" capitalize
It's not working for me. TypeError: Cannot read properties of undefined (reading 'map')
hi why its not working?
Good video , but i suggest take more time to explain things rather than just saying ,it feels like tech show is happening .
Does this app working properly
i have done same but not showing search image showing error in authencation @t
guys if anyone have a problem because showing same picture everytime check the function
async function searchImages(){
inputData = inputEl.value; the value should be "v" minimize not "V" capitalize
I can't get an hover affect.... why? what would be the error?
.search-result img {
width: 100%;
height: 200px;
object-fit: cover;
transition: opacity 0.2s ease-in-out;
}
.search-result :hover img {
opacity: 0.8;
}
this is what I've given where would be the error?
Remove the space in
.search-result:hover img{
it works
does anyone has all the code
when I click search button, the page goes blank and load the Show More button. Any idea
check all code again not its working…🎉 choti choti mistake thi