DEV Community

Cover image for How to Make CRUD app in JavaScript
Sadee
Sadee

Posted on

How to Make CRUD app in JavaScript


In this tutorial, we'll be creating a CRUD (Create, Read, Update, Delete) note taking app using vanilla JavaScript. This app will allow users to enter notes, view them, and delete them.

If you're looking to learn the basics of CRUD apps in JavaScript, then this tutorial is for you! By the end of this tutorial, you'll have created a basic CRUD app that you can use in your own projects. We'll walk you through the entire process, from scratch, so you'll understand every step of the way. Let's get started!

⏱️ Timestamps
0:00 - Demo
6:58 - Starter file
08:25 - Initial HTML CSS
22:24 - Setting typography
27:47 - Sidebar section
54:43 - Header section
1:02:15 - Notelist
1:14:27 - Modal
1:27:56 - Tooltip
1:32:57 - Media queries
1:38:31 - Basic javascript functionality
1:44:47 - Light & dark theme
1:58:07 - Tooltip functionality
2:06:01 - Create notebook (JS)
2:40:08 - Render existed notebook (JS)
2:46:56 - Update notebook (JS)
2:59:40 - Delete notebook (JS)
2:22:48 - Create note (JS)
3:52:46 - Render note (JS)
4:07:36 - Read & update note (JS)
4:16:26 - Delete note (JS)

🔗Source Code 1
🔗Source Code 2
🔗Join our discord community to get help

Top comments (2)

Collapse
 
nathanmcl profile image
Nathan McLaughlin

Create, read , update, and delete. 😁 I have just learned about C.R.U.D. 🥴

Collapse
 
samantrags profile image
Raghavendra Samant

Great work Sadee .. you are a pro !