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!
⏱️ 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
Top comments (9)
OMG! this is 🔥
Thanks
Thank you for sharing this tutorial on building a recipe app with Vanilla JavaScript. It's a great resource for learning and I appreciate your effort in providing the timestamps for easy navigation!
Thanks 😊
It‘s so rare to see someone build something through vanilla js.
great work
Thanks
Building a recipe app with Vanilla JavaScript involves several steps. Here's a general outline of the process:
Set Up the Project Structure:
Create a new project folder with an index.html file.
Create a CSS file for styling (e.g., style.css).
Create a JavaScript file for your app logic (e.g., app.js).
Design the User Interface:
Determine the layout and components needed for your recipe app.
Create the necessary HTML elements to display recipes, search functionality, and other relevant features.
Apply CSS styles to enhance the visual appearance of the app.
Fetch Recipe Data:
Identify a source for your recipe data, such as an API or a local JSON file.
Use JavaScript's Fetch API or XMLHttpRequest to retrieve recipe data here keytoinfo.com/asynchronously.
Parse the JSON response and extract the relevant information.
Haidilao is a renowned Chinese hot pot restaurant chain, famous for its exceptional service and high-quality ingredients. The menu at Haidilao offers a wide variety of options to suit every taste. Diners can start with a selection of rich and flavorful broths, ranging from classic spicy Sichuan to milder tomato or mushroom bases.
haidilaos.com/
This is really awesome.