Create A Food Recipe App Using Vanilla JavaScript For Beginners

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 พ.ย. 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!

  • @unluckydude8882
    @unluckydude8882 2 ปีที่แล้ว +1

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

  • @ttty3630
    @ttty3630 4 ปีที่แล้ว +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  4 ปีที่แล้ว

      Thanks for subbing!

  • @louiskapend4530
    @louiskapend4530 3 หลายเดือนก่อน

    Congratulations Sir, very well explained

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

  • @akir2759
    @akir2759 3 ปีที่แล้ว +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

  • @johndivine8068
    @johndivine8068 4 ปีที่แล้ว +2

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

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

  • @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 2 ปีที่แล้ว

    Wow, 🤩awesome recipe api gallery 👌

  • @nodejs5069
    @nodejs5069 3 ปีที่แล้ว +2

    your teaching perfect

    • @webcifar
      @webcifar  3 ปีที่แล้ว

      Thanks a lot

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Sure I will ♥

  • @bhav2676
    @bhav2676 2 ปีที่แล้ว +1

    Can I mention this project in my resume

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

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

  • @a_basic_sheep_1993
    @a_basic_sheep_1993 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...

  • @wendyjung4396
    @wendyjung4396 ปีที่แล้ว

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

  • @SFRGstudiowz
    @SFRGstudiowz 2 ปีที่แล้ว

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

  • @johnm4141
    @johnm4141 3 ปีที่แล้ว +3

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

    • @webcifar
      @webcifar  3 ปีที่แล้ว

      😆😆 lol

  • @rahilsiddique6950
    @rahilsiddique6950 2 ปีที่แล้ว +1

    Amazing tutorial
    Thanks a lot bhaiya 🙏

    • @webcifar
      @webcifar  2 ปีที่แล้ว

      Always welcome

  • @ManishSharma-fi2vr
    @ManishSharma-fi2vr 4 ปีที่แล้ว +1

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Will try ♥

  • @_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!

  • @amenakhan7720
    @amenakhan7720 4 ปีที่แล้ว +1

    Thanks bro..u jst saving my life😁

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Welcome ❤

  • @RxRip01
    @RxRip01 4 ปีที่แล้ว

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Please do! ♥

  • @ramendrasoni3368
    @ramendrasoni3368 4 ปีที่แล้ว

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

  • @ibntofajjal
    @ibntofajjal 3 ปีที่แล้ว

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

    • @webcifar
      @webcifar  3 ปีที่แล้ว

      Thanks ❤️

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

  • @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 🙏🏽

  • @TheDestinyShow
    @TheDestinyShow 2 ปีที่แล้ว

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

  • @centipedekid9824
    @centipedekid9824 3 ปีที่แล้ว

    How would I change the amounts of result cards?

  • @jhonsnow534
    @jhonsnow534 ปีที่แล้ว

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

  • @paridhimalav8809
    @paridhimalav8809 3 ปีที่แล้ว

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

  • @TheDestinyShow
    @TheDestinyShow 2 ปีที่แล้ว +1

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

  • @michalmiszkurka3500
    @michalmiszkurka3500 4 ปีที่แล้ว

    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?

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Yes you can!

  • @uddfeltechnologieslimited5768
    @uddfeltechnologieslimited5768 4 ปีที่แล้ว +1

    You're The BEST!

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Thank you

  • @unchart_d
    @unchart_d 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. ♥🤘

    • @unchart_d
      @unchart_d 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!

    • @webcifar
      @webcifar  3 ปีที่แล้ว

      Our pleasure!

  • @Iconify
    @Iconify 4 ปีที่แล้ว +1

    how to luanch

  • @divyasriconsultancyservices
    @divyasriconsultancyservices 2 ปีที่แล้ว

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

  • @zdarofMERGAITES
    @zdarofMERGAITES 4 ปีที่แล้ว

    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  4 ปีที่แล้ว

      Check the description.

  • @සපුමල්පැපිලියාන
    @සපුමල්පැපිලියාන 3 ปีที่แล้ว +1

    Sir ,this app is online or offline

  • @AhnafOnoy
    @AhnafOnoy 4 ปีที่แล้ว +1

    Vai! ARE YOU FROM BANGLADESH?

    • @webcifar
      @webcifar  4 ปีที่แล้ว +3

      Yes ♥

  • @029manikandana6
    @029manikandana6 3 ปีที่แล้ว

    Bookmark
    29:50

  • @romuloalves9349
    @romuloalves9349 4 ปีที่แล้ว +1

    Ótimo vídeo parabéns ✌.

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Muito obrigado Alves 🙏

  • @istiakahammad7074
    @istiakahammad7074 4 ปีที่แล้ว +1

    Can you make some js advance project.

  • @deepakbhargav7434
    @deepakbhargav7434 4 ปีที่แล้ว

    Thank you

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      You're welcome

  • @maniharika4229
    @maniharika4229 3 ปีที่แล้ว

    plz make a video foo receipe app in react js

    • @webcifar
      @webcifar  3 ปีที่แล้ว

      Ok I will try

  • @istiakahammad7074
    @istiakahammad7074 4 ปีที่แล้ว +1

    Wow

  • @khanmohammedrehan1566
    @khanmohammedrehan1566 3 ปีที่แล้ว

    NEPALI??

  • @Jsmny44
    @Jsmny44 2 ปีที่แล้ว

  • @seemesarkar2260
    @seemesarkar2260 4 ปีที่แล้ว +1

    👍🅽🅱🆁 1👈

  • @rajlanjewar1570
    @rajlanjewar1570 2 ปีที่แล้ว

    searchQuery = e.target.search.value;