How to Build a Recipe App with JavaScript

Learn how to Build a Recipe App with JavaScript | JavaScript Project for beginners
In this JavaScript recipe app tutorial, you will learn how to build a recipe app with JavaScript. Discover how to incorporate a Food Recipe API into your project, allowing you to fetch and display real-time recipe data.
Suggested Projects :
✔ Build a Weather App:
👉 • Weather App using HTML...
✔ Dictionary app using HTML CSS JavaScript:
👉 • How to Build a Diction...
If you like this video, don't forget to Subscribe 🙂.
Video Content :
00:00 - Preview
04:30 - HTML Coding
07:28 - CSS Styles Coding
18:37 - JavaScript Coding
23:40 - Fetch Recipes using API
38:30 - Adding Styling to Fetched Recipes
54:00 - Adding Recipe Details
01:05:10 - Fetch Recipe Ingredients
01:16:30 - Adding Scrollbar
01:35:00 - Final Result
✔ Follow Code Traversal on Instagram :
/ codetraversal
✔ Follow Code Traversal on GitHub :
github.com/CodeTraversal
#javascriptprojectsforbeginners

[@sarfrajjula659]

Bhuutt hi easily achhe se each point explain kiyaa h jiske wajah se meraa achha project bann gaya...Thank you ma'am ...❤❤

[@easyslim9800]

This is the best course about Api and improve your skills about javascript that I have ever seen. Thanks soo muuch from Iran , Tehran 💙

[@nirajanolivlogs7647]

I love your video bcz you explain each steps very nicely❤ need more videos

[@arnabjana4959]

Exactly... She explains every line... Awesome❤

[@memer_sigma]

aapka bhoot bhoot dhynawad maam great explaination

[@ShaikhZahid349]

Amazing project super

[@user-hw8rh9xw2f]

thank you so much ma'am , way of telling wonderful

[@rahuldebnath7187]

Jitni sweet se ap bolte ho itni hi sweet apki project hain , how sweet

[@aryaadityaa7676]

Thanks Every Helpful

[@kunilamanika2825]

Thank you so much ma'am ❤

[@Chronicles123]

oohh you are too good yaar - realy I love all videos of yours....

[@englishwithshizzy]

27:04 you are so sweet. I am learning a lot from you. Thank you explaining everything while coding.

[@MindsetMastery550]

Thank you so much ❤❤

[@yogitasaroha2151]

Thanku so much

[@prashlovessamosa]

Thank you Di

[@abhishekaanand9646]

i have good knowledge of front-end but when i saw your video literally my head is about to explode....😇😇😇😇😇

[@user-zr2gf1pm2z]

Thank you didi.

[@aaronstone8729]

keep up the great work love your videos

[@mdfarhan2047]

This project is more of css than JavaScript.. Learned a lot....

[@codetraversal]

Yeah

[@priyanshutyagi_02001]

thankyou so much mam..

[@karansingh-op9zw]

amazing yr...

[@ankitharsh6779]

I was planning to make it thank you so much for this highly appreciated

[@codetraversal]

Glad to know that.

[@Ayush37262]

​@@codetraversal 35:22 Ma'am is there any function similar to this repeat(auto-fit) in flexbox??

[@Ayush37262]

​@@codetraversalMa'am pls solve the doubt 🙏🙏

[@codetraversal]

You can use flex-wrap : wrap property in flexbox.

[@mr.nishantawasthi4402]

Nice explain ❤❤

[@swikrutipadhi7356]

Your video's are very helpful👍, good explanation. Make one for E-Commerce Website.

[@Not_Yours_Princess976]

Good work aik kami mujhe is mein yeh lagi he k jab user view recipe per click kre tu tu card ata he uske pehce ka background dark hojay or jab user ingredients parhlle ya tu cross per click krke ya phir overlayper click krke card hatjana chahiye next project faq esection per lao animated accordion using html css and javascript

[@chetan_rajputt]

Hello Mem ,i am confused I have Java knowledge for back-end without spring boot and I have knowledge front-end without framework. I am very very confused which are choice for my career starting.

[@user-sy9kc2tl6m]

Thanks sister for information of coding......sister..... tools website banaye

[@kiraeditx1534]

hello! mam i get error while adding img (23:40 - Fetch Recipes using APi)in this portion

[@saurabhsinha7043]

api not working,image not loading ????

[@badakuti123]

Goodsister

[@happyji2624]

Mam please help me into this that my string literals are not working after despite of applying backticks and doller.

[@mingle2034]

Ma'am you should start building react project

[@satyamjatt6385]

Mam aapko kitna experience hai full stack web developement

[@chandrashekaryakala4462]

Madam, How can I add save option to Each Recipe to add into user database

[@yousufrumi5587]

therre is no repositor of recipe app in github you mentioned, i cn access pop up link button

[@comingtomorrow]

The video is amazing but i here is the point. If you are able to create this project then this is the time you should learn react. Because while using react u can create this type of in under 15 mins

[@codetraversal]

Yeah, I know

[@kvspraveen1999]

my images are not showing according to weather showing only clouds what should i do

[@sagarchaurasia-vw4pu]

i've one dought why you write ${query} in api link , could you tell me how to knowing this things while using api pls reply

[@mobagamerofficial1639]

Subscribed dear sister.

[@knowmore7852]

nice project mam i learned very much

[@codetraversal]

Glad to know that

[@poonamhake1777]

​@@codetraversalCan you please help why I am getting meals: null array as response

[@apshorts6121]

👍👍🙏🙏

[@arshadraza1909]

college men ho bro boht acha explain krete ho

[@user-zr2gf1pm2z]

Make a video how to choose best api for web app. Please didi.

[@jhonsnow534]

❤

[@rohitroykapoor8907]

It's a request to make a full playlists on JavaScript And React Js Technology Plzzz ma'am !!!!!!

[@shubhamuniyal9047]

Very addictive videos🎉🎉, please make a mini game also

[@codetraversal]

Sure

[@nirajanolivlogs7647]

@@codetraversal yes one game as well

[@danishmasoodshaikh7669]

Please share the GIT repository for this Project.

[@vitthalgadekar3034]

Mam lahile aap aapko introduce to karo aap kon ho kya karti ho Very nice video

[@yogeshmishra41]

Didi maat project tha 👌, can make a project on portfolio website?

[@codetraversal]

Sure

[@satyamjatt6385]

Mam in next video please must design website only usinf tailwind css Or make a video on tailwind css

[@codetraversal]

Not sure for next video but definitely in coming videos.

[@legendary2006.]

hello mam mai apki video bohot dino se dekh raha hu jisase meri css kafi achhi hogae hai but java script n hi agli bar se jab ap video banana to js script achhe se use karna batana mai phone me coding karta hu spck editor par thank u mam 🥰🥰

[@codetraversal]

For coding on phone, you can also try replit app.

[@mhcreation858]

Hi 👋 Plz one tuturial for beginners ❤

[@codetraversal]

Okay

[@sakshimishra3916]

inter bank payment system ... make this project

[@user-hb8zp9dq6e]

How to get cdl link please help

[@keshavkekane6508]

Very nice explanation. I usually follow all your videos. For this project, can you suggest, how it can be deployed on windows hosting server? Thanks in advance

[@chandrashekaryakala4462]

it is showing null array in console can you explain

[@danishmasoodshaikh7669]

@@chandrashekaryakala4462 use ` instead of inverted comma

[@M.A.A123]

Apki voice eta cute kiu he🙃 Muje acca lagtahe apki voice

[@vanshthakur1007]

Mam please do a full javascript series. And when is your another js project video coming😅

[@codetraversal]

Will make it. Next video on sunday.

[@satty_boy]

Nice website 🎉😊

[@codetraversal]

Thanks

[@satty_boy]

You r are osama❤😊🎉

[@AviralGupta-um9wq]

mam image kese load hogi api se

[@user-xg4lu2ft8x]

please i m stucj in this porject as my API IS NOT WORKING

[@shyampant4362]

jse app js Likte ho us par ki series bnao. so hum log bi js vse likh ske.

[@vijaykumarhajela4086]

Please provide the code

[@adarshsrivastava2927]

Can you please share me a source code for this project

[@saitejabommali6621]

32:10 time ka pass strMealThumb kyu use kiya. api may strMeal hai lekin Thumb nahi hai

[@RahilKhan-zn1dn]

Why you don't add login , home and contact us page

[@rosamariamontero3770]

I'm a student and I have been experiencing persistent issues with CORS requests when attempting to access API from the browser. I have tried various solutions, including the use of online proxy services, but have not been able to resolve the problem... any suggestion?

[@sushanksawant]

i am currently facing same problem did you got the solution

[@TanviShahhh]

Source code plz the api is not working showing error for value.trim

[@user-zs9if1uf1x]

Kya ye site deploy ho jaegi?, anyone who deployed this?

[@arisz1065]

where to get cdn link for wrong icon can someone tell me? I am not not able to get wrong mark in my output

[@randomchannel5024]

Font awesome* or w3schools

[@kaverihuple2836]

hello mam, this api are not working?

[@vishnusingh2300]

33:47

[@motivationalhub6118]

.value.trim me error kyu aa rha hai

[@wantcrown]

can you please create a web development full course mam?

[@codetraversal]

Yes, if you guys want.

[@wantcrown]

@@codetraversal we want mam🥲. Please create a web development full course🥺,

[@codetraversal]

Sure

[@dearprogrammer3455]

Mam pic aa to rha hai but vo poori tarah se dikh nhi rha hai actually mam console prr net::ERR_FILE_NOT_FOUND show ho rha hai ☹️

[@satyamjatt6385]

I can make also movie application app just same as

[@codetraversal]

Great

[@vaishalisaini4565]

Image not loading

[@randomvideos9765]

Which technology is used in backend

[@codetraversal]

This is made using frontend only. There is no backend used.

[@itsme_Babu]

api not working what to do

[@gamerad6934]

source code kaha pr hai mam iska

[@arshadraza1909]

error arah add eventlistner ka console men

[@vivekviradiya4955]

mam code file nai he image bhi nai he kese banaye

[@rachitmathur1486]

How to reach her???

[@AshikRahman-fw3sv]

Full Stack online marketplace make video 2023

[@NoobGamer-du1ip]

please provide its github link

[@dikshapant9254]

"Ma'am, where I can find the code?"

[@Samruddhinik231]

Mam apne jo link diya hai fetch karne ke liye wo thik se output nahi ya raha output me meal ki value null dikha rahe hai

[@OmPrakash-kt9iy]

yes ma'am.... PLzz help us out

[@OmPrakash-kt9iy]

did someone find the way out?

[@MusicLoveEditz]

mam aapne jo link api k liye fetch kiya hai uska code thik se output nai dikha raha I mean " meals ka null dikha raha jab cake search karte hain toh"

[@codetraversal]

Search for different meal and use console to debug the problem. I'll provide the source code also.

[@itsme_Babu]

can u give the source code plz @@codetraversal

[@user-vz2vx4cp5v]

How to reach you

[@anjalijain364]

Code chaiya mam

[@prafuljoshii]

27.40 console m meals: null show hora. Array is not show...???

[@poonamhake1777]

Exactly I am also getting the same, did you get the solution?

[@javedkhan0142]

Ma'am source code nahi milega kita

[@user-yf7vb1cv8s]

Mam source code dal dijiye

[@SufiyaChudigar]

Source code Didi ..plzz

[@5minupsc723]

where is the source code

[@saraswathibandaru3843]

Explanation is tol good will you please provide original wibsite pls

[@chandrashekaryakala4462]

I can't fetch the api it is showing null in console can you explain why

[@rohicoder2080]

error arhi hay aap please source code upload krden

[@adityayede1386]

Can we put this project in resume for on campus placement of tcs digital?

[@user-xg4lu2ft8x]

Ye API TOU MERI CHAL HI NHI RAHI H A

[@randomchannel5024]

I can not see ingredients of the recipes

[@randomchannel5024]

1:11:10 stucked here.

[@GauravKumar-dl2xs]

provide the source code

[@dattadigambar4038]

It's in description

[@mr.nishantawasthi4402]

E commerce website