Build a Recipe App with Vanilla JavaScript

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: https://www.edamam.com/
Starter file: https://drive.google.com/file/d/1-4SclwXjU–uMAq4gur-ZbSDAwsm-4dk/view?usp=share_link
Source code link 1: https://www.patreon.com/posts/cook-io-recipe-82796976?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Source code link 2: https://www.buymeacoffee.com/codewithsadee/e/153057
Figma UI: https://www.patreon.com/posts/cook-io-recipe-82797993?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Join our Discord community: https://discord.com/invite/r3R6HmZXQv

Host your website with upto 75% off
🌟 Hostinger: https://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: https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g
🔔 Subscribe: https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1

⏱️ 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: https://twitter.com/codewithsadee
Github: https://github.com/codewithsadee
Facebook: https://www.facebook.com/codewithsadeefan
Instagram: https://www.instagram.com/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