How to Build Note Taking Application using Node.js?
Last Updated :
24 Jul, 2024
Building a note-taking application using Node.js involves several steps, from setting up the server to managing the application logic and user interface. This guide will walk you through the process of creating a simple note-taking application using Node.js, Express, and a few other key technologies.
Features
We will create a basic note-taking application where users can:
- Create Notes: Add new notes with a title and content.
- View Notes: See a list of existing notes.
- Edit Notes: Modify the content of existing notes.
- Delete Notes: Remove notes from the list.
Approach
We are going to use Body Parser by which we can capture user input values from the form such as Notes' Content, and Notes' Id, and store them in a collection. Then we are going to send the Notes to the web page using EJS. EJS is a middleware that makes it easy to send data from your server file (app.js or server.js) to a web page. We are also going to create the Delete Route for deleting notes, and an Update Route for updating the notes.
Steps to Setup Project to Build Note
Step 1: Create Project Directory
Make a new folder with project name and navigate to it using below commands
mkdir myapp
cd myapp
Step 2: Initialize React Project
Initialize the NodeJs project inside the myapp folder.
npm init -y
Step 3: Install required Modules
Install the necessary packages/libraries in your project using the following commands.
npm install express ejs body-parser
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"body-parser": "^1.20.2",
"ejs": "^3.1.10",
"express": "^4.19.2",
}
Step 4: Create Server File
Create an 'app.js' file, inside this file require the Express Module, and create a constant 'app' for creating an instance of the express module, then set the EJS as the default view engine.
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
Step 5: Rearrange Your Directories
It is required to use '.ejs' as an extension for the HTML file instead of '.html' for using EJS inside it. Then you have to move every '.ejs' file in the views directory inside your root directory. EJS is by default looking for '.ejs' files inside the views folder.
Step 6: Use EJS variable
Inside your updated .ejs file, you have to use EJS Variables to receive values from your server file. You can declare variables in EJS like
<%= variableName %>
Example: Implementation to write the code for building note taking application.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<%= variableName %>
</body>
</html>
Step 7: Send data to a variable
Inside your server file ( app.js or index.js ), you can send an EJS file along with some data by using the render method.
app.get("/", (req, res) => {
res.render("home",
{ variableName: "Hello Geeks!" })
})
Example: Implementation to write the code for to create server.
Node
// app.js
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello Geeks!" })
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
Step 8: Require body-parser module
const bodyParser = require('body-parser')
And then:
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({
extended: true
}));
Then we can handle form data using the request object.
Step 9: Fetch Notes
We have an array of notes with two properties content and id.
const notes = [{
noteId: 1,
noteContent: "Hey, Geeks you can add your important notes here."
}
]
Let's send the array to our web page. In the previous step, we just sent a value to the variable, now we are sending the complete array.
app.get("/", function (req, res) {
res.render("home", {
data: notes
})
})
Step 10: Create Form
Since it is common to have so many elements(notes) inside our array and we have to print each of them, we have to use For Each Loop to loop through every single element inside our collection and display the details in the text area field of the update form. We will display the details inside the text area of the update form, this way we can show the notes, and same time we can use it to update notes.
<form action="/https/www.geeksforgeeks.org/update" method="post">
<input type="number" style="display: none;"
name="noteId" value="<%= element.noteId %>">
<textarea type="text" rows="6" cols="30"
placeholder="Type Here..." name="noteContent"
value="<%= element.noteContent %>">
<%= element.noteContent %></textarea>
<br>
<button type="submit">Update</button>
</form>
Step 11: Update Notes
Now, let's see how we can handle this update form in our update route inside the server file(app.js).
app.post('/update', (req, res) => {
var noteId = req.body.noteId;
var noteContent = req.body.noteContent;
notes.forEach(note => {
if (note.noteId == noteId) {
note.noteContent = noteContent;
}
})
res.render("home", {
data: notes
})
})
For updating a note, we have to create an updated route where we are going to fetch the requested note id and search for the element which has the same note id, and change the element content property to the 'noteContent' which we get from the update form.
Step 12: Delete Notes
Updating Web Page giving a delete option: We have to create a form that sends the note id which we want to delete to the server file 'app.js'.
<form action="/https/www.geeksforgeeks.org/delete" method="post">
<input type="number" style="display: none;"
name="noteId" value="<%= element.noteId %>">
<button type="submit"
style="margin: 0px 4px;">✕</button>
</form>
For deleting a note, we have to create a delete route where we are going to fetch the requested note id and search for the element which has the same note id, and delete the element.
app.post('/delete', (req, res) => {
let noteId = req.body.noteId;
var j = 0;
notes.forEach(note => {
j = j + 1;
if (note.noteId == noteId) {
notes.splice((j - 1), 1)
}
})
res.render("home", {
data: notes
})
})
Example: Below is the complete code to build Note Taking Application using Node.js:
HTML
<!-- home.ejs -->
<!DOCTYPE html>
<html>
<head>
<title>Note Keeper</title>
</head>
<body>
<h1>Note Keeper</h1>
<div style="display: flex;">
<% data.forEach(element=> { %>
<form action="/update" method="post">
<input type="number" style="display: none;"
name="noteId" value="<%= element.noteId %>">
<textarea type="text" rows="6" cols="30"
placeholder="Type Here..." name="noteContent"
value="<%= element.noteContent %>">
<%= element.noteContent %></textarea>
<br>
<button type="submit">Update</button>
</form>
<form action="/delete" method="post">
<input type="number" style="display: none;"
name="noteId" value="<%= element.noteId %>">
<button type="submit"
style="margin: 0px 4px;">✕</button>
</form>
<% }) %>
</div>
<h1>Add Note</h1>
<form action="/" method="post">
<input type="number" style="display: none;"
name="noteId">
<textarea type="text" rows="6" cols="30"
placeholder="Type Here..."
name="noteContent"></textarea>
<br>
<button type="submit">Add</button>
</form>
</body>
</html>
JavaScript
// app.js
const express = require('express')
const bodyParser = require('body-parser')
const notes = [{
noteId: 1,
noteContent: "Hey, Geeks you can add your important notes here."
}
]
const app = express()
app.set('view engine', 'ejs')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}))
app.get("/", function (req, res) {
res.render("home", {
data: notes
})
})
app.post("/", (req, res) => {
const noteContent = req.body.noteContent
const noteId = notes.length + 1;
notes.push({
noteId: noteId,
noteContent: noteContent
})
res.render("home", {
data: notes
})
})
app.post('/update', (req, res) => {
var noteId = req.body.noteId;
var noteContent = req.body.noteContent;
notes.forEach(note => {
if (note.noteId == noteId) {
note.noteContent = noteContent;
}
})
res.render("home", {
data: notes
})
})
app.post('/delete', (req, res) => {
var noteId = req.body.noteId;
var j = 0;
notes.forEach(note => {
j = j + 1;
if (note.noteId == noteId) {
notes.splice((j - 1), 1)
}
})
res.render("home", {
data: notes
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
Output:
Similar Reads
JavaScript Tutorial
JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
Web Development
Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De
5 min read
React Interview Questions and Answers
React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
JavaScript Interview Questions and Answers
JavaScript (JS) is the most popular lightweight, scripting, and interpreted programming language. JavaScript is well-known as a scripting language for web pages, mobile apps, web servers, and many other platforms. Both front-end and back-end developers need to have a strong command of JavaScript, as
15+ min read
React Tutorial
React is a JavaScript Library known for front-end development (or user interface). It is popular due to its component-based architecture, Single Page Applications (SPAs), and Virtual DOM for building web applications that are fast, efficient, and scalable.Applications are built using reusable compon
8 min read
Domain Name System (DNS)
DNS is a hierarchical and distributed naming system that translates domain names into IP addresses. When you type a domain name like www.geeksforgeeks.org into your browser, DNS ensures that the request reaches the correct server by resolving the domain to its corresponding IP address.Without DNS, w
8 min read
REST API Introduction
REST API stands for REpresentational State Transfer API. It is a type of API (Application Programming Interface) that allows communication between different systems over the internet. REST APIs work by sending requests and receiving responses, typically in JSON format, between the client and server.
7 min read
NodeJS Interview Questions and Answers
NodeJS is one of the most popular runtime environments, known for its efficiency, scalability, and ability to handle asynchronous operations. It is built on Chromeâs V8 JavaScript engine for executing JavaScript code outside of a browser. It is extensively used by top companies such as LinkedIn, Net
15+ min read
HTML Interview Questions and Answers
HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML
14 min read
What is an API (Application Programming Interface)
In the tech world, APIs (Application Programming Interfaces) are crucial. If you're interested in becoming a web developer or want to understand how websites work, you'll need to familiarize yourself with APIs. Let's break down the concept of an API in simple terms.What is an API?An API is a set of
10 min read