DEV Community

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

Posted on

39 4 3 3 4

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

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 !

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs