How to Build a Recipe App with Vanilla JavaScript

#css #javascript #tutorial #beginners

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!

Starter file

⏱️ 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 (8)

Sabiha Samha • May 21 '23

OMG! this is 🔥

Sadee • May 21 '23

Thanks

Bryan King Pecho • May 22 '23

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!

Sadee • May 22 '23

Thanks 😊

dongdongzhang • May 26 '23 • Edited

It‘s so rare to see someone build something through vanilla js.
great work

Sadee • May 26 '23

Thanks

smith76432 • Jun 14 '23

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.