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