Это видео недоступно.
Сожалеем об этом.

Create A Food Recipe App Using Vanilla JavaScript For Beginners

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

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

  • @webcifar
    @webcifar  4 года назад +2

    🔔subscribe and turn on the notification bell.
    👉 source code: codepen.io/Web_Cifar/pen/oNxLYRY
    👉 API website : www.edamam.com/
    👉 #30days30submits : github.com/ShaifArfan/30days30submits

  • @ashinabbasi1758
    @ashinabbasi1758 3 года назад +9

    One of the cleanest tutorial I have seen in a while, the process was well thought of be it designing or the functionalities. Loved it.👏🏻

    • @webcifar
      @webcifar  3 года назад

      Glad you enjoyed it!

  • @ttty3630
    @ttty3630 3 года назад +3

    Thank you for making an easy-to-follow recipe app. Very helpful and great instructions! Subscribing now and please more vlogs like this 😁

    • @webcifar
      @webcifar  3 года назад

      Thanks for subbing!

  • @johndivine8068
    @johndivine8068 3 года назад +2

    I wish I can like this video more than once.
    Thanks a lot @CIFAR

  • @louiskapend4530
    @louiskapend4530 19 дней назад

    Congratulations Sir, very well explained

  • @akir2759
    @akir2759 2 года назад +3

    I get "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." when access api?

    • @BlackiJ11
      @BlackiJ11 2 года назад

      I have the same problem

  • @unluckydude8882
    @unluckydude8882 2 года назад +1

    Ur tutorial really helped me to learn how can i use API's

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

    I was able to follow along with this video and make an exercise library in the same format but used a different API :)

  • @peteryu4353
    @peteryu4353 3 года назад +3

    Just finished this tutorial and it's amazing! You explained everything very well. Can you tell me how I can add next and previous page arrows to see more recipes?

    • @webcifar
      @webcifar  3 года назад +1

      I explained it in the video JavaScript section (36:00). With the "from" and "to" you can create the pagination.

  • @patriotact3729
    @patriotact3729 4 года назад +2

    Thanks for new video. It's very helpful. 👌
    Please, don't forget my request : a tutorial on how to do responsive and automatic slider images with text, buttons controls and indicators. Please.
    Thanks

  • @bhav2676
    @bhav2676 2 года назад +1

    Can I mention this project in my resume

  • @TheDestinyShow
    @TheDestinyShow 2 года назад +1

    33:57 that doesn't work for me and I did exactly the same

  • @nodejs5069
    @nodejs5069 3 года назад

    hello sir, it is very useful for young seekers for web design.
    I can only help you by watching ads from your videos.
    thank you so much for describe every part of web designing

    • @webcifar
      @webcifar  3 года назад +1

      So nice of you

  • @armankhan-wk6cv
    @armankhan-wk6cv Год назад

    Wow, 🤩awesome recipe api gallery 👌

  • @johnm4141
    @johnm4141 3 года назад +2

    So no one is going to talk about that chicken feet 0:27 lol

  • @SFRGstudiowz
    @SFRGstudiowz 2 года назад

    event listener submit not working on click mouse event only when i hit enter query will work.

  • @peteryu4353
    @peteryu4353 3 года назад +1

    Great video. Did you use flexbox in CSS section?

  • @divyasriconsultancyservices
    @divyasriconsultancyservices 2 года назад

    Excellent sir, very clear explanation, sir how can I keep demo recipes on home page and without api how can I search inner web site like we are searching in e-commerce website, please do that video also , thanking you sir.

  • @nikolozmacharashvili1212
    @nikolozmacharashvili1212 2 года назад

    I understood everything, thank you. I subscribed and am looking forward to more videos like this. By the way, do you have a tip on how to become better at JavaScript ? Thank you. Asking this question everywhere I can...

  • @RxRip01
    @RxRip01 4 года назад

    thank you so much. i am recommending your channel to my friends.

  • @ramendrasoni3368
    @ramendrasoni3368 3 года назад

    Sir isme kuch items ki keval photo hi aati hai unpar view recipe ka button gayab ho jata hai... content gayab rahta hai...

  • @_moxy9905
    @_moxy9905 3 года назад

    It would be nice if you explain how to display some kind of error message if recipe doesn't exist. Thanks alot!

  • @TheDestinyShow
    @TheDestinyShow 2 года назад

    I cant change the size of the image and I did the same as you did in the video:(

  • @rahilsiddique6950
    @rahilsiddique6950 2 года назад +1

    Amazing tutorial
    Thanks a lot bhaiya 🙏

  • @amenakhan7720
    @amenakhan7720 3 года назад +1

    Thanks bro..u jst saving my life😁

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

    I want to use some Indian meals API how to use???

  • @lelafetaj1901
    @lelafetaj1901 3 года назад +1

    Hello!
    I was doing this project and at 40:30 in the console appears an error : Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
    at generateHTML (main.js:23)
    at fetchAPI (main.js:18)
    Can you please help me fix it

    • @webcifar
      @webcifar  3 года назад

      Check the results prop that we are mapping through. Check you are the results properly. It the error, results is undefined.

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

    I love you,,,, so nice app!! thank you .. ❤

  • @centipedekid9824
    @centipedekid9824 3 года назад

    How would I change the amounts of result cards?

  • @paridhimalav8809
    @paridhimalav8809 2 года назад

    sir when we click on view recipe, will it show the whole recipe?

  • @ManishSharma-fi2vr
    @ManishSharma-fi2vr 4 года назад +1

    Sir, kindly make a CSS playlist from beginning to advanced like slice box, animations, 3D box, etc

  • @michalmiszkurka3500
    @michalmiszkurka3500 3 года назад

    Great tutorial, really helpful, Just wondering if you can implement another Api to this app or you can retrieve data form current api so you can calculate nutritional values for examples carbs protein, fats etc?

  • @PriyankaPatel-gx3pj
    @PriyankaPatel-gx3pj 3 года назад +1

    I am getting error " inner html can not be null"....i have my JavaScript at end still this error plz help

    • @webcifar
      @webcifar  3 года назад

      Check the inner HTML line where we are inserting html. If you still can't solve it, join the community group and post your problem there.

    • @PriyankaPatel-gx3pj
      @PriyankaPatel-gx3pj 3 года назад

      I did resolved the error and this website works fine thank you...it turned out really well

  • @ManishSharma-fi2vr
    @ManishSharma-fi2vr 4 года назад +1

    Your are doing great work for us.

    • @webcifar
      @webcifar  4 года назад

      So nice of you 🙏🏽

  • @nodejs5069
    @nodejs5069 3 года назад +2

    your teaching perfect

  • @divyasriconsultancyservices
    @divyasriconsultancyservices 2 года назад

    Sir nothing is coming for me even i provide my own api

  • @Iconify
    @Iconify 3 года назад +1

    how to luanch

  • @zdarofMERGAITES
    @zdarofMERGAITES 3 года назад

    Thanks for this recipe app! One thing though, if i want to make view recipe button functional and provide user with ingredients and etc, how can i target particular meal? Do i have to use some id? Could you provide the code? Would be very thankful!

    • @webcifar
      @webcifar  3 года назад

      Check the description.

  • @DailyIntern
    @DailyIntern 4 года назад +1

    Am here thank you brother for this. I will take this project to the next level. Thank you so much and how to make a specific website without API? I really need help with this.

    • @webcifar
      @webcifar  4 года назад +1

      Fantastic! and for that you need a database of recipe content. ♥🤘

    • @DailyIntern
      @DailyIntern 4 года назад

      Hmmm and am not into database for now. Will you be able to help maybe?

  • @Big_1992
    @Big_1992 3 года назад

    Awesome job! Thank you!

  • @uddfeltechnologieslimited5768
    @uddfeltechnologieslimited5768 4 года назад +1

    You're The BEST!

  • @MrStark-up6wy
    @MrStark-up6wy 4 года назад

    Awesome! Dont stop uploading videos

    • @webcifar
      @webcifar  4 года назад

      That's the plan!

    • @MrStark-up6wy
      @MrStark-up6wy 4 года назад +1

      @@webcifar yeah bro definitely one day you'll reach million subscribers! But it takes time! Everything takes time!

  • @istiakahammad7074
    @istiakahammad7074 4 года назад +1

    Wow

  • @romuloalves9349
    @romuloalves9349 4 года назад +1

    Ótimo vídeo parabéns ✌.

    • @webcifar
      @webcifar  4 года назад

      Muito obrigado Alves 🙏

  • @ibntofajjal
    @ibntofajjal 3 года назад

    সোজা বাংলায় অসাধারণ ব্রো 🧡💛

  • @istiakahammad7074
    @istiakahammad7074 4 года назад +1

    Can you make some js advance project.

  • @029manikandana6
    @029manikandana6 3 года назад

    Bookmark
    29:50

  • @user-kh5qw6of5r
    @user-kh5qw6of5r 3 года назад +1

    Sir ,this app is online or offline

  • @deepakbhargav7434
    @deepakbhargav7434 3 года назад

    Thank you

  • @maniharika4229
    @maniharika4229 3 года назад

    plz make a video foo receipe app in react js

  • @AhnafOnoy
    @AhnafOnoy 4 года назад +1

    Vai! ARE YOU FROM BANGLADESH?

  • @Jsmny44
    @Jsmny44 2 года назад

  • @seemesarkar2260
    @seemesarkar2260 4 года назад +1

    👍🅽🅱🆁 1👈

  • @khanmohammedrehan1566
    @khanmohammedrehan1566 3 года назад

    NEPALI??

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

    searchQuery = e.target.search.value;