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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

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 !

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay