Build a Recipe App with Vanilla JavaScript
HTML-код
- Опубликовано: 13 июл 2024
- In this video, I'll show you how to build a recipe app using API and JavaScript. We'll use a dark and light theme and responsive design so that your app looks great on any device.
If you're looking to learn how to build a web application using API, then this is the video for you! We'll show you everything you need to know to build a real world web application. This is a great beginner's guide to web development and working with API. so be sure to watch it!
🔗 Essential links
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Edamam: www.edamam.com/
Starter file: drive.google.com/file/d/1-4Sc...
Source code link 1: www.patreon.com/posts/cook-io...
Source code link 2: www.buymeacoffee.com/codewith...
Figma UI: www.patreon.com/posts/cook-io...
Join our Discord community: / discord
Host your website with upto 75% off
🌟 Hostinger: www.hostg.xyz/SHCGm
HI 👋
I'm Sadee(web dev)
In this channel, I make videos about the Complete Responsive website.
You can check out my channel 👇
📺 My Channel: / @codewithsadee
🔔 Subscribe: / @codewithsadee
⏱️ Timestamps
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
0:00 - Demo
14:02 - File structure
15:16 - Project initial
35:10 - Home page - Header
47:10 - Light and dark mode
52:35 - Mobile nav
59:17 - Home page - Hero section
1:06:58 - Home page - Tab section
1:46:24 - Home page - Slider section
1:53:40 - Home page - Tag section
2:04:46 - Footer
2:08:01 - Setup API
2:15:19 - JavaScript - Tab section
2:40:34 - JavaScript - Slider section
2:51:17 - Snackbar
2:58:24 - Recipe page
4:25:18 - Recipe page - Rander recipe
4:40:48 - Detail page
2:37:26 - Detail page - Randar recipe detail
5:16:33 - Bookmark page
5:26:31 - Media queries
👍 Like - Follow & Support
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Twitter: / codewithsadee
Github: github.com/codewithsadee
Facebook: / codewithsadeefan
Instagram: / codewithsadee
⚠️ Disclaimer
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Disclaimer video is for educational purposes only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favour of fair use
#codewithsadee
#recipeapp
#recipe
Brother very cool web app but my suggestion is please teach with explanation for better understanding, public understands by explanation not by just watching. Please this web app is really awesome just loved it and all public loved it.. please make similar webapp with explanation.
I haven't watched the whole video yet, but I have seen the demo, and I'm sure I will get alot to learn
Your projects require an Oscar, because you are providing it for free, I am literally serious
Amazing web application, your hard work and dedication is inspiring
you are so awesome and so talented. you really are the GOAT. please never stop making videos. much love man
Thank you for your kind words and support! I appreciate it a lot. I won't stop making videos. Much love!
This is the best RUclips channel I have found to learn JavaScript (+css) before starting any framework such as Next.js and others. It has good quality content, many tricks, a great structure, and all resources are available and well-organized. I plan to follow one of your videos each weekend. Thanks ❤
Thanks, and good luck
Bro I appreciate you for existing on the planet as a developer I'm broke as shit and in need of a better job but most employers want the best of the best work and the fact that you do that consistency for free I think you should charge more for the code files you can pay your bills on time respect ❤❤❤🔥🔥🔥😁😁
Thanks brother ❤
You are the best. Keep it up bro
Another master piece ❤️
Thanks
What an incredible project, more than a programmer, you are also an artist!
Thanks man!
Bro, you are the best developer I've ever found in this "universe" of RUclips. I believe that it is impossible for there to be another professional who surpasses you. I feel honored to have access professional content like the one available on this magnificent channel. I need to start receiving KWD to pay for a million cups of coffee, for you, as a way of saying thank you...
Thank you MQ ❤
Factz best one out here worth millions put respect on sadee name
i totally agree
Once i saw your video and i feel like it's just basic then i saw another and i got shocked by your creativity now I'm your top fan thank you so much for such amazing portfolio projects 🎉
Thanks for your comment! I'm glad you enjoyed the portfolio projects and became a top fan. Your support means a lot to me. Thank you! 🎉
You are amazing brother. Bless you
Thanks ❤
Thank you so much for sharing, Sir.
You're most welcome 😊
Just amazing !! ❤❤
Thank you for your amazing support! ❤
Beatiful project ❤
Thanks 💜
I just finished this application and I learned a lot. The code is so beautiful that it doesn't even need an explanation. I wish you lots luck. Directly from Brazil
Thank you so much for your kind words!
I'm thrilled to hear that you found the application helpful and that you appreciated the beauty of the code.
Your encouragement means a lot to me. Sending warm regards back to Brazil! 🇧🇷 Good luck with your future endeavors!
can you please share me your github link so i can solve the error in my code
Can you send me the source code pls
Your are The Best👏👏👏👏
Thanks
from beautiful design to perfectly implimentation.... everything was just awesome 🌟🔥
Thank you Sadee Sir ❤
My pleasure dear! ❤
Super!!!
Thanks Mikhail
awesome ❤❤
Thanks
you the best bro god bless u
I deeply appreciate your generous words of praise! Your support means a lot to me, and I am grateful for your blessings.
Awesome design! From where you learned coding and web development, I also want to learn html CSS and js..
Nice Bhaiya❤🇧🇩
Thanks, can you make video on oil and gas website and features?
Dammm this man eats html , css and js , he knows what he is doing ✅
Yeah I'm trying to eat 😂
By the way Thanks 😊
Legendary
This is impressive.
Thanks Dave
Too bad I can only give one like, it deserved 1000 likes
Kudos to your work sadee 🙏🙏, can I know which extension you are using to stick tht google tab to vs code tab, Please reply if u seen this comment 😊😊
Once again the King is Back with a Bang💥💥
Thanks
Wouldn't it be more correct to create an "data-slider-wrapper-${index}" attribute instead of just "data-slider-wrapper" on 2:43:09 and select it then as "document.querySelector(`[data-slider-wrapper-${index}]`)"? Because otherwise, the second slider will simply select the data-slider-wrapper from the first slider, which is already in the DOM, and overwrite it with second slider data.
Thank you very much for your amazing tutorials!
Well done sadee
Did you use api in this video before i dive deep into a 5hrs video long😊
Brother which software you use for your keyboard sound is it mechvive ?
What extension do you use that gives you does feedback in your css
good man! Does it have any backend
king is back !!
Bro great job. But I want to hear you ... Speak all you do . That makes you perfect teacher .
Thanks ❤
Very soon 😊
Yess
How you did this thumbnail, using which app or website?
.svg image is not rendering...Any suggestion to solve this issue??
Long time no see sadeee sir. You are one of the finest developer. Can you share the resources, which you referred while learning frontend development ?
Hey there! It's great to hear from you! Thank you so much for your kind words; I truly appreciate it. When it comes to learning frontend development, I found several resources extremely helpful. Here are a few that I recommend:
FreeCodeCamp (www.freecodecamp.org/): This platform offers an interactive curriculum with hands-on projects covering HTML, CSS, JavaScript, and more. It's a fantastic resource for beginners.
MDN Web Docs (developer.mozilla.org/): This website provides comprehensive documentation on web technologies, including HTML, CSS, and JavaScript. It's an excellent reference for both beginners and experienced developers.
Codecademy (www.codecademy.com/): Codecademy offers interactive coding exercises and tutorials for various programming languages, including HTML, CSS, and JavaScript. It's a great way to practice and reinforce your skills.
Frontend Masters (frontendmasters.com/): This platform offers in-depth video courses taught by industry experts. It covers a wide range of frontend development topics, from foundational concepts to advanced techniques.
CSS-Tricks (css-tricks.com/): CSS-Tricks is a blog that provides valuable tutorials, articles, and resources related to CSS. It's a fantastic place to enhance your CSS skills and stay up-to-date with the latest trends.
Remember, practice is key! Don't hesitate to work on personal projects or participate in coding challenges to apply what you've learned. Best of luck on your frontend development journey! Let me know if you have any more questions.
thanks sadee sir
Thanks sir but I request you make a website involve Frontend + backend
how can I improve my html css and js like you?
if we want to open the program without live server than api is not responding for that what should i do? in live server its completly running but directly through the index.html file api is not responding please help sir
🙏🙏🙏🙏🙏
Bro please upload with audio and teach us with explanation.. it help us
can i make copy of same website and publish it is it copyright
Make one of movies only for blogger please 🙏
Hi, at 2:13:40, line 21, when I put the backticks around `&${query}` I have an error "Cannot redeclare block-scoped variable 'query'"
i think the variable that you're trying to access is block scoped and you're trying to access it outside that block.
hy I want to get membership but my card is getting declined can you add upi option.
dude you make great websites and i really love it and i want to ask you if i can code this sites and edit the design and some function and show it on my portofolio if thats okay with you ^.^ please answer me and if it not ok i wont put it
keep it upp :D
It's okay, you can use 😊
@@codewithsadee much love mate 💙
Can i know which font you are using in Vscode?
cascadia code
reat hope yu create many website
Very good project. But Im afraid in the end API will be 403..error.
can you please tell me the theme and font name of vs-code ??
Noctis
Mrin5 times ye code liha hai but khuch to khush problem aa raha hai to kya app ye source code de sakte hai kya
Your videos are amazing but again it will be difficult to understand if you don’t speak because most of your viewers are beginners who will need to understand why you use certain styles and so on
Thanks
In at 2:39:46, if you delete that saved recipe and then go to the Lunch tab, it gives you this error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')
Does anyone have the same error?
Join our discord community if you get stuck or need help
Discord: discord.gg/DhhydBpPFp
Please make webs that can display alquran api, prayer time api using html css js
Noted
may ı use this project on my github ?
I will do some changes on this project
Yes u can
if possible can u build bet365 clone
in detail.js I am getting error 'detail.js:40 Uncaught (in promise) ReferenceError: cuisineType is not defined' . Anyone has any idea how to solve this??
Sure, join our discord community to discuss about it
Can you send me the source code of the project for the education and study or practice purpose
All the source code are available on my patreon and buymeacoffee
Please new tour booking website... making
the figma link is broken
Hey can you join discord server and share screenshot.
when do you going to be online I want to meet you
You are really one of the best front end developer I have seen on RUclips. But PLEASE ADD AUDIO!!! Without audio it's just copy and paste and we won't know why some stuff work or why you did it that way. PLEASE FOR THE LOVE OF GOD PUT AUDIO!!! 😂😂😂😂
Thanks for the feedback! I'll try to add audio to my videos. If that's not possible, I'll find alternative ways to explain the content effectively. Your support is greatly appreciated! 😊
This is TOO good. But can you add a external thing for showing how to make the recipe (Like some tuto)+ can you provide source codes for free. Because some people cannot even afford that. I know that you set the price by thinking that most of the people can buy. But what for students. I am from India and I know almost every student cant afford it but I can afford and I will buy it. But I want to ask 1 thing that can I share source code to students who want that for free because I want that all students afford that thing. Because I believe in "Equality = Kindness"
i want source code
can i get the source code
.btn-primary:where(:hover, :focus-visible):not(:active){
background-color: var(--primary-hover);
}
what does this do :where(:hover, :focus-visible):not(:active) what is this plz reply shadee sir 😉
i learn this from your video
.btn-primary:is(:hover, :focus-visible){
background-color: var(--primary-hover);
}
:is concept in css what is :where :not(:active)
@@vision_lc This mean any "btn-primary" that hovered or focused (using keyboard) but not in active (mouse click or hold) state,
On that situation btn-primary background color will be "primary-hover".
hey i have buy your membership so can i cancel after 1 month ??? please answer me sir
Yes, you can.
@@codewithsadee thanks 🙏 but i won't do it ( just want the information ) coz i like your content.
Talanted
Thanks
the (home) javascript is not working i tried 100 times to fix it but im done with it
Hey Mohamad, join our discord channel to discuss about this issue: discord.gg/DhhydBpPFp
try to make a space related website
Edited:- Please like guys
Full Stack online marketplace make video 2023
Brother make a social media clone like facebook with free source code Please
This is not beginner friendly videos
A great video 👍👍👍👍🌸🌸🌸
hello, I also have an art channel if you are interested
Project is too good, but this way way you write project is very bad🙂🙂
As a beginner, I would like to know what exactly is bad. Could you explain it thoroughly?
Actually unsubscribed when I realized that there is no volume
Brother, I just started looking and I'm writing code while watching your videos, will this cause a problem? and how was your learning
If you get any problem during the project, then you can join our Discord community to discuss about the error.
@@codewithsadee thanks, I can't get any problems during the project, but when I try to make it from scratch, I can't. I asked this :/
Yeah I got this.
First of all, always start with a easiest project and breakdown all problems into sub problem, and then fix them all step by step.
And remember that you have to complete the project, it doesn't matter how your code looks like or how you fix the problem, gradually your coding skill will be improve.
Brother very cool web app but my suggestion is please teach with explanation for better understanding, public understands by explanation not by just watching. Please this web app is really awesome just loved it and all public loved it.. please make similar webapp with explanation.
Full Stack online marketplace make video 2023