Create A Food Recipe App Using Vanilla JavaScript For Beginners

[@webcifar]

🔔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]

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]

Glad you enjoyed it!

[@ttty3630]

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

[@webcifar]

Thanks for subbing!

[@louiskapend4530]

Congratulations Sir, very well explained

[@unluckydude8882]

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

[@johndivine8068]

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

[@webcifar]

Thanks

[@peteryu4353]

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]

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

[@hayleyfake5649]

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

[@armankhan-wk6cv]

Wow, 🤩awesome recipe api gallery 👌

[@patriotact3729]

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]

Sure I will ♥

[@nodejs5069]

your teaching perfect

[@webcifar]

Thanks a lot

[@nodejs5069]

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]

So nice of you

[@johnm4141]

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

[@webcifar]

😆😆 lol

[@bhav2676]

Can I mention this project in my resume

[@rahilsiddique6950]

Amazing tutorial Thanks a lot bhaiya 🙏

[@webcifar]

Always welcome

[@peteryu4353]

Great video. Did you use flexbox in CSS section?

[@amenakhan7720]

Thanks bro..u jst saving my life😁

[@webcifar]

Welcome ❤

[@wendyjung4396]

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

[@RxRip01]

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

[@webcifar]

Please do! ♥

[@nikolozmacharashvili1212]

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

[@akir2759]

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

[@BlackiJ11]

I have the same problem

[@ManishSharma-fi2vr]

Your are doing great work for us.

[@webcifar]

So nice of you 🙏🏽

[@uddfeltechnologieslimited5768]

You're The BEST!

[@webcifar]

Thank you

[@TheDestinyShow]

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

[@jayapatel5251]

Same for me

[@MrStark-up6wy]

Awesome! Dont stop uploading videos

[@webcifar]

That's the plan!

[@MrStark-up6wy]

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

[@Big_1992]

Awesome job! Thank you!

[@webcifar]

Our pleasure!

[@ManishSharma-fi2vr]

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

[@webcifar]

Will try ♥

[@DailyIntern]

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]

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

[@DailyIntern]

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

[@divyasriconsultancyservices]

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]

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]

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

[@michalmiszkurka3500]

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]

Yes you can!

[@SFRGstudiowz]

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

[@ibntofajjal]

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

[@webcifar]

Thanks ❤️

[@_moxy9905]

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

[@ramendrasoni3368]

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

[@jhonsnow534]

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

[@centipedekid9824]

How would I change the amounts of result cards?

[@romuloalves9349]

Ótimo vídeo parabéns ✌.

[@webcifar]

Muito obrigado Alves 🙏

[@PriyankaPatel-gx3pj]

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

[@webcifar]

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]

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

[@Iconify]

how to luanch

[@TheDestinyShow]

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

[@paridhimalav8809]

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

[@istiakahammad7074]

Wow

[@zdarofMERGAITES]

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]

Check the description.

[@deepakbhargav7434]

Thank you

[@webcifar]

You're welcome

[@divyasriconsultancyservices]

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

[@istiakahammad7074]

Can you make some js advance project.

[@webcifar]

Sure, ♥

[@istiakahammad7074]

@@webcifar thanks sir

[@AhnafOnoy]

Vai! ARE YOU FROM BANGLADESH?

[@webcifar]

Yes ♥

[@user-kh5qw6of5r]

Sir ,this app is online or offline

[@webcifar]

Online

[@029manikandana6]

Bookmark 29:50

[@maniharika4229]

plz make a video foo receipe app in react js

[@webcifar]

Ok I will try

[@Jsmny44]

✅

[@seemesarkar2260]

👍🅽🅱🆁 1👈

[@khanmohammedrehan1566]

NEPALI??

[@rajlanjewar1570]

searchQuery = e.target.search.value;