JavaScript Project | Image Search App With JavaScript API

Поделиться
HTML-код
  • Опубликовано: 5 янв 2025

Комментарии • 317

  • @prajwalnayak214
    @prajwalnayak214 Год назад +7

    Clear and crisp explanation..Learnt many things .Thanks ..

  • @ibrahimkashif4098
    @ibrahimkashif4098 Год назад +3

    Really enjoyed this project. The upper video has a few errors but after fixing them, works perfectly. Kudos to the publisher!

    • @nihalmaganur4957
      @nihalmaganur4957 Год назад

      what is the url

    • @rishi3968
      @rishi3968 Год назад +3

      The URL he has used is it correct? Got 401 error.

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

      I'm a beginning learner to JSON....may I ask what is the error that you fixed?

  • @briancedrickonan7376
    @briancedrickonan7376 Год назад +7

    Thank you for this well-detailed project, and i am longing for more tutorial.

  • @paneer-q1q
    @paneer-q1q Год назад +1

    Mass Thalaiva nee❤‍🔥❤‍🔥🔥🔥

  • @dakiworld
    @dakiworld Год назад +1

    This course is priceless and amazing seriously.. I love you bro

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

    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.

  • @expertprestige4912
    @expertprestige4912 Год назад +23

    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.

  • @srishtisonkar9715
    @srishtisonkar9715 Год назад +1

    thanku so much its my first project using api

  • @samionk8905
    @samionk8905 Год назад +2

    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!

  • @arvinbonggal5443
    @arvinbonggal5443 Год назад +3

    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

  • @khanprinters7104
    @khanprinters7104 Год назад +2

    Thanks for this amazing project. I loved following this tutorial and creating the image search application

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

    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!

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

    this was really helpful, i follolwed along and my app works thank you

  • @redi08
    @redi08 11 месяцев назад +1

    Works like magic
    Thanks

  • @olavoz8210
    @olavoz8210 Год назад

    thanks macha .....I subscribed ...Love from india

  • @asadyousafzai7563
    @asadyousafzai7563 Год назад

    thanx a lot for such a job oriented project this might help in getting our resume shortlisted for jobs

  • @konstantinreut2577
    @konstantinreut2577 Год назад +1

    Great job bro! Thanks a lot!

  • @irfanullahkhan2293
    @irfanullahkhan2293 Год назад +19

    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

    • @kadhalmarket1304
      @kadhalmarket1304 Год назад

      Thank you so much bro🔥 worried about not working..... Thanks a lot bro🎉🎉✨

    • @Professor_Moreira
      @Professor_Moreira Год назад

      Thank you a lot!!

    • @ninvitou7970
      @ninvitou7970 Год назад

      bro what's about "could not find name 'searchResults' "? how to fix that?

    • @dhavaltukadiya6275
      @dhavaltukadiya6275 Год назад

      also i did this code but didnot work

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

      Thank you so much! You helped me.

  • @Serhat786
    @Serhat786 Год назад

    Thank You Sir! A lot of new knowledge. Join you as a Subscriber!

  • @rbiyarakhmatova8607
    @rbiyarakhmatova8607 Год назад +2

    Great tutorial! Thank you for your effort

  • @Piyush_gamer-n2l
    @Piyush_gamer-n2l 11 месяцев назад

    i learned a lot of things from this video thsnkyou..

  • @sifatullah9872
    @sifatullah9872 Год назад +1

    I have learned many things from this project.You have done such a great job.Thanks a lot.

  • @SahilPatil-y8h
    @SahilPatil-y8h Год назад

    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

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

    Very interesting tutorial. Thanks for your efforts.

  • @gpynadath
    @gpynadath Год назад +3

    Thank you. It works beautifully!

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

    Thank you sir it is an amazing video for me as beginner..

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

      Your most welcome dear 😇

  • @MehediHassanMiraj-t1f
    @MehediHassanMiraj-t1f 10 месяцев назад

    It's awesome. 😊😊😊

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

    deserved my subscption thanks for teaching

  • @Ricky-uv5ej
    @Ricky-uv5ej Год назад

    very useful. thank you for this project.

  • @jeremiahogunfuwa9187
    @jeremiahogunfuwa9187 2 месяца назад

    Thank you!👍🏾

  • @CodeByPavan
    @CodeByPavan Год назад

    Thank you for creating this video.

  • @jbjbkb8693
    @jbjbkb8693 Год назад

    that's really impressive for me and i really enjoyed and really helpful for me thank a lot man

  • @snehapanwar6262
    @snehapanwar6262 Год назад +2

    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.

  • @akankshapatil1049
    @akankshapatil1049 11 месяцев назад +2

    when I click search button, the page goes blank and load the Show More button. Any idea

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

      check all code again not its working…🎉 choti choti mistake thi

  • @TheCutemonsterable
    @TheCutemonsterable Год назад +1

    Thanks for this project ! I love how you explain every step !

  • @minahilsaleem4212
    @minahilsaleem4212 Год назад +6

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

    • @kplcreation8748
      @kplcreation8748 Год назад

      same

    • @Riduu-c5h
      @Riduu-c5h Год назад

      Image is not beig searched it shows blank and showmore button only what should i do

    • @avinashkarotia781
      @avinashkarotia781 Год назад

      @@Riduu-c5h same issue i am facing did your issue resolved

  • @Rajdeep24-q4x
    @Rajdeep24-q4x Год назад

    thank you so much for the tutorial.

  • @shubhamdixit2555
    @shubhamdixit2555 Год назад

    thanks sir for create this unique project

  • @leekevin-m8q
    @leekevin-m8q Год назад

    thankyou for this it was really helpfull.

  • @viralmistry-x4o
    @viralmistry-x4o 6 месяцев назад

    super duper buddy thank u

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

    great i love it

  • @tonsomar-coder
    @tonsomar-coder Год назад +2

    Really helpful!✨
    Want more 🚀

  • @themonster4759
    @themonster4759 Год назад

    wow so nice idea

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

    I am getting the pictures in vertical manner how to make them to visible in horizontal

  • @Პერფექციონისტი-ლ7უ

    27:49 be careful here. Do not use this(" ") or (' ') they are not working. I spent 2 hours wondering why my code wasn't working and then realized it was the fault. Don't use them. You need to use the button on your keyboard located at the top of the tab. Just count from CTRL above, it is the 4th button. like that(` `)

    • @tulsidon2157
      @tulsidon2157 Год назад +2

      Everyone knows bro ` ` this is not like this " " ' ' symbol

    • @adhithyav9326
      @adhithyav9326 Год назад

      Thank a lot bro u saved me

  • @JaGaNezhil
    @JaGaNezhil Год назад

    Excellent work❤

  • @ErangaDewmini
    @ErangaDewmini Год назад +1

    Why my Show more button is not working? Please reply sir

  • @naveenkumar-d5k
    @naveenkumar-d5k 10 месяцев назад

    Eventhough I have chrome extension for cors...Im facing corspolicy error...Can somebody help me ?

  • @atom2076
    @atom2076 Год назад

    You deserve like

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

    Thanks 🙏

  • @emreozturk6219
    @emreozturk6219 Год назад +1

    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

    • @salemwachwacha297
      @salemwachwacha297 Год назад

      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

  • @adrianCoding
    @adrianCoding Год назад +8

    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?

  • @apaarsingh5510
    @apaarsingh5510 Год назад

    its really amazing

  • @Ernestdale13
    @Ernestdale13 Год назад +1

    If anyone does a problem with the code check your const url and input /search/ before photos in your url

  • @umardarazofficials3529
    @umardarazofficials3529 Год назад +5

    API is not fetching data
    anyone facing this problem?

  • @Mohsenkardani
    @Mohsenkardani Год назад

    perfect i am from IRAN

  • @Salman_3882
    @Salman_3882 Год назад

    Thank you SIr...!

  • @tanishsharma5440
    @tanishsharma5440 Год назад

    Thankyou so much!

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

    Amazing

  • @anizato
    @anizato Год назад +1

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

    • @earlkevinongyot8576
      @earlkevinongyot8576 Год назад +1

      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.

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

      same problem;😒😒

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

    yes api is working you can go with it

  • @_VidyaKumari
    @_VidyaKumari Год назад +3

    Images not coming after clicking search button

  • @diamondsandlipgloss
    @diamondsandlipgloss 6 месяцев назад +1

    Are these the exact steps that we need to follow every time we're using JSON to create a building an Image Search App?

    • @AnonymousPhantom
      @AnonymousPhantom 4 месяца назад

      Yes you can but in programming there are a lot of ways to create one thing if you are a beginner than build different projects just not stick to similar ones.

  • @arbindkumaryadav1221
    @arbindkumaryadav1221 Год назад +1

    hey, i am getting error ["OAuth error: The access token is invalid"]. could you help me with this

  • @tejasmete7911
    @tejasmete7911 Год назад +3

    Can anyone tell me what's wrong ,I have 0 errors still it is not loading images

    • @supriya_codes
      @supriya_codes Год назад

      samee

    • @Professor_Moreira
      @Professor_Moreira Год назад

      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

    • @nikhatnadaf2322
      @nikhatnadaf2322 Год назад

      ​@@Professor_Moreira hey could u please help me

  • @Soulfulsongss
    @Soulfulsongss Год назад +3

    having error in map function and in fetch (url)

    • @salemwachwacha297
      @salemwachwacha297 Год назад +1

      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

    • @princerawat6490
      @princerawat6490 Год назад

      Problem in map method not work and error 404

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

    Please Help, I completed The Project and Ran the Javascript code first i got reference Error formEl not defined, So i conditioned the variable declaration to if type of element !== undefined let formEl...the Javasacript runs fine now but the Webpage doesnt run it just keeps reloading the Same Page.

  • @shubhadeepsupriyo4941
    @shubhadeepsupriyo4941 Год назад +2

    can anyone telll why i am getting error 401
    and also getting errors while reading map
    please help

    • @ayushuniyal9822
      @ayushuniyal9822 Год назад +2

      results.map((result) => {
      const imageWrapper = document.createElement("div");
      imageWrapper.classList.add("searchResult");
      const image = document.createElement("img");
      image.src = result.urls.small;
      image.alt = result.alt_description;
      const imageLink = document.createElement("a");
      imageLink.href = result.links.html;
      imageLink.target = "_blank";
      imageLink.textContent = result.alt_description;
      imageWrapper.appendChild(image);
      imageWrapper.appendChild(imageLink);
      searchResults.appendChild(imageWrapper);
      });
      page++;
      if (page > 1) {
      showMore.style.display = "block";
      }
      };
      Try this......i have changed some class names so take care of it

    • @shubhadeepsupriyo4941
      @shubhadeepsupriyo4941 Год назад +1

      @@ayushuniyal9822 thanks bro but actually it was my fault as I didn't copy the API key correctly

    • @MuskanChaurasiya-rj5jm
      @MuskanChaurasiya-rj5jm Год назад +1

      ​@@ayushuniyal9822 thanks bhaiya 😊 i have got some error but your code can see I will fix this error .

    • @ayushuniyal9822
      @ayushuniyal9822 Год назад +1

      @MuskanChaurasiya-rj5jm no problem ✌️

    • @ayushuniyal9822
      @ayushuniyal9822 Год назад

      @@shubhadeepsupriyo4941 oh okay 👍

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

    its not fetching any images . what to do now

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

    i'm getting this error 👇
    script.js:38 Uncaught (in promise) TypeError: searchResults.appendChild is not a function
    please help

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

    which vs code theme is this ?

  • @crafttechindia
    @crafttechindia Год назад +1

    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

  • @jeevanpanwar1993
    @jeevanpanwar1993 Год назад

    Thank you sir

  • @jorgecabral5824
    @jorgecabral5824 Год назад

    Uncaught (in promise) TypeError: Cannot set properties of null (setting 'href') this is my problem hope u can answer

  • @kartikrameshchavan4710
    @kartikrameshchavan4710 Год назад +1

    Thanks Sir

  • @webdevelopergirl
    @webdevelopergirl Год назад

    I take help from your vedios.please teach me how to edit the whole website project in my personal portfolio

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

    waoo thanks

  • @enviableace9987
    @enviableace9987 Год назад

    Awesome, Thanks for the tutorial

  • @chilakasanthosh7441
    @chilakasanthosh7441 Год назад

    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?

  • @Joe_Alone
    @Joe_Alone Год назад

    thanks dude

  • @raksham2961
    @raksham2961 Год назад

    Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at script.js:51:10 Im getting this error

    • @rushikpatel5766
      @rushikpatel5766 Год назад

      yeah i am getting the same error. got a solution plz do share

  • @bilalmirza2838
    @bilalmirza2838 Год назад

    I couldnot understand result .map function can anyone explain

  • @rabotkx2792
    @rabotkx2792 Год назад

    i did just as you did but the photos in 'search-result' class aren't displayed in rows, like yours. it's always displayed in columns I have no clue why.

    • @leedaniels2861
      @leedaniels2861 Год назад

      Play around with flex-directions. Like columns or row.
      You'll see and figure out what is what.
      Edit:
      Make sure you put (display: flex;) on it first

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

    Teşekkürler

  • @MoonLee-y6q
    @MoonLee-y6q Год назад

    Thanks for this amazing tutorial. Can you tell me how I can get a certain numbers of pictures per request/page, thanks!

  • @ik94311
    @ik94311 Год назад +1

    Great share! ✨👏

    • @Tech2etc
      @Tech2etc  Год назад

      Thank you

    • @webdevelopergirl
      @webdevelopergirl Год назад

      ​@@Tech2etcI need your Help to link my entire website in personal portfolio

  • @webdevelopergirl
    @webdevelopergirl Год назад

    Kindly teach how to create a personal portfolio in which the entire website can be linked for web developers ... please

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

    It's not working with same code I think there are some some error which we can't see it's. 😢

  • @vishucoder6049
    @vishucoder6049 Год назад

    .value ke pass error show kr rha h how to fix it

  • @neiljohn2637
    @neiljohn2637 Год назад

    Thanks a lot for the project demo

    • @HITESHKUMAR-dv6se
      @HITESHKUMAR-dv6se Год назад +1

      may you plz help me

    • @neiljohn2637
      @neiljohn2637 Год назад

      @@HITESHKUMAR-dv6se say bro?

    • @HITESHKUMAR-dv6se
      @HITESHKUMAR-dv6se Год назад

      @@neiljohn2637 if we search any word then it return same images again and again

    • @klair009
      @klair009 Год назад

      @@HITESHKUMAR-dv6se Same thing is happening with me!

    • @HITESHKUMAR-dv6se
      @HITESHKUMAR-dv6se Год назад

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

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

    i need help mera work nhi kar rha hai error arha hai fetch problem

  • @burcuayaz4043
    @burcuayaz4043 Год назад

    It's not working for me. TypeError: Cannot read properties of undefined (reading 'map')

  • @simom275
    @simom275 Год назад +1

    Please explain const accessKey?

  • @ভোমরা
    @ভোমরা Год назад +1

    wow bro:)

  • @hayer89
    @hayer89 Год назад +9

    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

    • @NK-vb9vu
      @NK-vb9vu Год назад

      can u help me to fix this?????? {"errors":["OAuth error: The access token is invalid"]}

    • @nikhatnadaf2322
      @nikhatnadaf2322 Год назад

      Can u help me to run it

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

      3. worked for me. thank you!!

  • @Manga4u585
    @Manga4u585 Год назад

    Hi , sir its a great video but the code isn't working on my system , any suggestion?

  • @UpliftingStories523
    @UpliftingStories523 Год назад +4

    Plz Bro We want more applications project

  • @SourabhGhule
    @SourabhGhule Год назад

    I've got a problem .....after searching for the image i can see the cards , also the description but the image is not visible ...........plz help

    • @salemwachwacha297
      @salemwachwacha297 Год назад

      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

  • @leader2269
    @leader2269 Год назад

    You are rock

  • @ankityadavIITian
    @ankityadavIITian Год назад +1

    i have done same but not showing search image showing error in authencation @t

    • @salemwachwacha297
      @salemwachwacha297 Год назад

      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