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)
Create, read , update, and delete. 😁 I have just learned about C.R.U.D. 🥴
Great work Sadee .. you are a pro !