How to Build a CRUD Web Application with Vanilla JavaScript

In this tutorial, we’ll be building a CRUD application in the form of a note taking app. We’ll also explore how to use local storage to save notes in our browser.

What’s CRUD?

You may already be wondering: “what does CRUD mean?!” A CRUD application is the most common form of any software application. CRUD stands for Create, Read, Update and Delete and it applies to any software that’s capable of letting users create and view data on its interface, as well as make changes to, and delete existing data.

CRUD applications can range from a simple to-do list application to a more complex social media platform. It’s also common for developers to build CRUD applications to display their grasp of a particular framework or language.

1. Creating the Markup

For our markup, we’ll have two main elements: the new-note container that contains the input and text area field for entering the content for our notes, and the notes-wrapper container that’ll contain the created notes. We also have a form-error div for displaying error messages and a button that calls the addNote() function we’ll define later.

<main>
  <div class="new-note">
    <input type="text" name="title" id="title" placeholder="Title">
    <textarea name="content" id="content" placeholder="Start writing"></textarea>
    <div id="form-error"></div>
  </div>
  <div class="button-container">
    <button class="add-btn" onclick="addNote()">Add note</button>
  </div>
  <div id="notes-wrapper"></div>
</main>

2. Styling the Layout

This is the CSS for our initial layout:

.new-note {
  margin-bottom: 32px;
  background-color: white;
  border: 1px solid #dadada;
  border-radius: 6px;
  padding: 16px;
  position: relative;
}

.new-note input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0 0 12px;
}

.new-note textarea {
  display: block;
  width: 100%;
  min-height: 100px;
  border: none;
  resize: none;
  background: transparent;
  outline: none;
  padding: 0;
}

#form-error {
  color: #b33030;
  position: absolute;
  bottom: -32px;
  left: 0;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.add-btn {
  border: 1px solid rgb(95, 95, 95);
  background-color: transparent;
  transition: background-color 250ms, color 250ms;
  border-radius: 16px;
  cursor: pointer;
  padding: 8px 12px;
}

.add-btn:hover {
  background-color: rgb(95, 95, 95);
  color: white;
}

#notes-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.note {
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid #dadada;
  border-radius: 6px;
  padding: 16px;
}

.note-title {
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 12px;
  width: 100%;
  display: inline-block;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.note-title:last-child {
  margin-bottom: 0;
}

.note-text {
  margin-bottom: 16px;
  background-color: white;
  width: 100%;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  background-color: white;
  overflow: hidden;
  width: 100%;
}

.note-date {
  font-size: 0.75em;
  text-align: right;
  border-top: 1px solid #dadada;
  padding-top: 16px;
  width: 100%;
  margin-top: auto;
}

.note-controls {
  position: absolute;
  right: 0;
  top: 0;
  background-color: white;
  font-size: 0.75rem;
  column-gap: 8px;
  padding: 8px;
  display: flex;
  opacity: 0;
  transition: opacity 350ms;
}

.note:hover .note-controls,
.note-controls:focus-within {
  opacity: 1;
}

.note-controls button {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0.5rem;
}

.note-controls button:hover {
  filter: brightness(0.85)
}

.note-delete {
  color: #bb0000;
}

.note-edit {
  color: #00bb00;
}

.note-save {
  color: #0000bb;
}

.note-save[disabled="true"] {
  color: #dfdfdf;
  pointer-events: none;
  user-select: none;
  cursor: not-allowed;
}

In this demo, we’ve removed the outline styling on our input and textarea fields to avoid interfering with the styling. However, if you wish, you can leave the outline styling for accessibility purposes.

This is what our layout looks like currently:

3. Creating and Reading Data

Now we can start working on the logic of our application!

Global Elements

First, let’s get all the global elements we’ll need.

1	const notesWrapper = document.getElementById("notes-wrapper");
2	const title = document.getElementById("title");
3	const content = document.getElementById("content");
4	const error = document.getElementById("form-error");

Then we’ll define a global variable to store our notes data.

Creating and Storing Data

In order to create the data, we’ll define an addNote() function to be called when the button is clicked. This is what will handle taking the data from the input field and putting them into a new note element in a readable format.

To begin with, we’ll include a condition to check if there’s any content to be added in a new note. If both the title and content field are empty, we’ll display an error message.

const addNote = () => {
  if (title.value.trim().length == 0 && content.value.trim().length == 0) {
    error.innerText = "Note cannot be empty";
    return;
  }
};

Next, we create an object to contain the date for a new note. In this tutorial, we’ll be generating a unique id (uid) value for each note using the date.getTime() method. This returns the exact millisecond the note was created and is used to make sure that no two notes have the same id.

We’ll also be including the date value of when the note was created using the date.toLocaleDateString() method. This is what our updated function looks like:

const noteObj = {
    uid: new Date().getTime().toString(),
    title: title.value,
    text: content.value,
    date: new Date().toLocaleDateString()
};

Now that we have the note object, we can store that data in the notesData array and also in the browser localStorage.

1	notesData.push(noteObj);
2	localStorage.setItem("notes", JSON.stringify(notesData));

localStorage only supports data in string format so we use the JSON.stringify() method to convert our array into a suitable format.

Displaying Data

Let’s define a function createNote() to handle appending the new note to the notesWrapper container. The note element will display the title, content and date based on user input. It will also have an edit, save and delete button for carrying out the corresponding functions based on the note unique id.

const createNote = (uid, title, text, date) => {
  const note = document.createElement("div");
  note.className = "note";
  note.id = uid;
  note.innerHTML = `
    <div class="note-title">${title}</div>
    <div class="note-controls">
      <button class="note-edit" onclick="editNote(${uid})">
        Edit
      </button>
      <button class="note-save" style="display:none" onclick="saveNote(${uid})">
        Save
      </button>
      <button class="note-delete" onclick="deleteNote(${uid})">
        Delete
      </button>
    </div>
    <div class="note-text">${text}</div>
    <div class="note-date">${date}</div>
  `;

  notesWrapper.insertBefore(note, notesWrapper.firstChild);
};

In this function, we use the .insertBefore() method to make sure that the newest note in placed at the top of the notesWrapper container.

Reset the Title and Content for Next Note

Finally, we can update our addNote() function to create a new note and also reset the title, content and error elements when the button is clicked.

const addNote = () => {
  if (title.value.trim().length == 0 && content.value.trim().length == 0) {
    error.innerText = "Note cannot be empty";
    return;
  }

  const noteObj = {
    uid: new Date().getTime().toString(),
    title: title.value,
    text: content.value,
    date: new Date().toLocaleDateString()
  };
  
  createNote(noteObj.uid, noteObj.title, noteObj.text, noteObj.date);

  error.innerText = "";
  content.value = "";
  title.value = "";
};

Check for Existing Data

Since we’re using localStorage, we can also include a condition to check if there’s already existing data for our notes in localStorage and display that on the page once the page loads. The JSON.parse() method is used to convert our stringified data back to its original format.

window.addEventListener("load", () => {
  notesData = localStorage.getItem("notes")
    ? JSON.parse(localStorage.getItem("notes"))
    : [];
    
  notesData.forEach((note) => {
    createNote(note.uid, note.title, note.text, note.date);
  });
});

4. Updating Data

At this point, we’ve handled the “C” and “R” parts of CRUD, having managed to successfully create notes based on user input, and display existing notes. Now let’s turn our attention to “U” by defining a function that lets us edit and save (update) an existing note.

Editing..

When we defined out createNote() function, we included two button elements to handle editing and saving a note based on a unique id so now we can create the editNote() and saveNote() functions. When the edit button is clicked, we’ll hide the edit button and display the save button:

const editNote = (uid) => {
  const note = document.getElementById(uid);

  const noteTitle = note.querySelector(".note-title");
  const noteText = note.querySelector(".note-text");
  const noteSave = note.querySelector(".note-save");
  const noteEdit = note.querySelector(".note-edit");

  noteTitle.contentEditable = "true";
  noteText.contentEditable = "true";
  noteEdit.style.display = "none";
  noteSave.style.display = "block";
  noteText.focus();
};

In this function, we use the uid to find the note element in the DOM. Then we target the title and text elements inside the target note and use the contentEditable method to allow us make changes to the content. contentEditable is an inbuilt browser attribute that allows a user change the content of any element if set to true.

We can update our CSS to include styling on the note element when editing.

.note > *[contenteditable="true"] {
  color: #5f5f5f;
  width: 100%;
  outline: none;
}

..and Resaving

For our saveNote() function, we’ll need to update our notesData value and localStorage data. We can do this using the .forEach() method to find the note that has the corresponding uid and update the content. Then we’ll push our updated array into localStorage to replace the old value.

  notesData.forEach((note) => {
    if (note.uid == uid) {
      note.title = noteTitle.innerText;
      note.text = noteText.innerText;
    }
  });

  localStorage.setItem("notes", JSON.stringify(notesData));

Then we’ll use the same logic as the editNote() function, only this time we’ll be setting the contentEditable attributes to false and hiding the save button while displaying the edit button. We’ll also use the same condition we used in our addNote() function to make sure users can’t save a blank note.

const saveNote = (uid) => {
  const note = document.getElementById(uid);

  const noteTitle = note.querySelector(".note-title");
  const noteText = note.querySelector(".note-text");
  const noteSave = note.querySelector(".note-save");
  const noteEdit = note.querySelector(".note-edit");

  if (
    noteTitle.innerText.trim().length == 0 &&
    noteText.value.trim().length == 0
  ) {
    error.innerHTML = "Note cannot be empty";
    return;
  }

  notesData.forEach((note) => {
    if (note.uid == uid) {
      note.title = noteTitle.innerText;
      note.text = noteText.innerText;
    }
  });

  localStorage.setItem("notes", JSON.stringify(notesData));

  noteTitle.contentEditable = "false";
  noteText.contentEditable = "false";
  noteEdit.style.display = "block";
  noteSave.style.display = "none";
  error.innerText = "";
};

5. Deleting Data

And lastly, the “D” part of CRUD.

For the final implementation of our application, we’ll be handling deleting data. For this function, we’ll remove the note element from the DOM and also delete the note object from our notesData array. We can handle removing the object from the array by using the .filter() method.

const deleteNote = (uid) => {
  let confirmDelete = confirm("Are you sure you want to delete this note?");
  if (!confirmDelete) {
    return;
  }

  const note = document.getElementById(uid);
  note.parentNode.removeChild(note);
  
  notesData = notesData.filter((note) => {
    return note.uid != uid;
  });
  localStorage.setItem("notes", JSON.stringify(notesData));
};

One of the benefits of building a web application is that we can take advantage of existing browser features. This function uses the confirm() method to display an inbuilt modal that can handle confirming user input, without the need to built a custom modal and detect a response ourselves.

Conclusion

And that’s that! What we’ve just coded was complex enough to be challenging, yet simple enough to understand, and the perfect demonstration of CRUD. We’ve implemented the basic operations of a software application using vanilla JavaScript (well done).

<br />

Source link

1	.new-note {
2	margin-bottom: 32px;
3	background-color: white;
4	border: 1px solid #dadada;
5	border-radius: 6px;
6	padding: 16px;
7	position: relative;
8	}
9
10	.new-note input {
11	width: 100%;
12	background: transparent;
13	border: none;
14	outline: none;
15	font-size: 1.5rem;
16	font-weight: 700;
17	padding: 0 0 12px;
18	}
19
20	.new-note textarea {
21	display: block;
22	width: 100%;
23	min-height: 100px;
24	border: none;
25	resize: none;
26	background: transparent;
27	outline: none;
28	padding: 0;
29	}
30
31	#form-error {
32	color: #b33030;
33	position: absolute;
34	bottom: -32px;
35	left: 0;
36	}
37
38	.button-container {
39	display: flex;
40	justify-content: center;
41	margin-bottom: 32px;
42	}
43
44	.add-btn {
45	border: 1px solid rgb(95, 95, 95);
46	background-color: transparent;
47	transition: background-color 250ms, color 250ms;
48	border-radius: 16px;
49	cursor: pointer;
50	padding: 8px 12px;
51	}
52
53	.add-btn:hover {
54	background-color: rgb(95, 95, 95);
55	color: white;
56	}
57
58	#notes-wrapper {
59	display: flex;
60	flex-direction: column;
61	gap: 32px;
62	}
63
64	.note {
65	position: relative;
66	overflow: hidden;
67	background: white;
68	border: 1px solid #dadada;
69	border-radius: 6px;
70	padding: 16px;
71	}
72
73	.note-title {
74	font-size: 1.5em;
75	font-weight: 700;
76	margin-bottom: 12px;
77	width: 100%;
78	display: inline-block;
79	overflow-wrap: break-word;
80	white-space: pre-wrap;
81	}
82
83	.note-title:last-child {
84	margin-bottom: 0;
85	}
86
87	.note-text {
88	margin-bottom: 16px;
89	background-color: white;
90	width: 100%;
91	overflow-wrap: break-word;
92	white-space: pre-wrap;
93	background-color: white;
94	overflow: hidden;
95	width: 100%;
96	}
97
98	.note-date {
99	font-size: 0.75em;
100	text-align: right;
101	border-top: 1px solid #dadada;
102	padding-top: 16px;
103	width: 100%;
104	margin-top: auto;
105	}
106
107	.note-controls {
108	position: absolute;
109	right: 0;
110	top: 0;
111	background-color: white;
112	font-size: 0.75rem;
113	column-gap: 8px;
114	padding: 8px;
115	display: flex;
116	opacity: 0;
117	transition: opacity 350ms;
118	}
119
120	.note:hover .note-controls,
121	.note-controls:focus-within {
122	opacity: 1;
123	}
124
125	.note-controls button {
126	padding: 0;
127	border: none;
128	background-color: transparent;
129	cursor: pointer;
130	padding: 0.5rem;
131	}
132
133	.note-controls button:hover {
134	filter: brightness(0.85)
135	}
136
137	.note-delete {
138	color: #bb0000;
139	}
140
141	.note-edit {
142	color: #00bb00;
143	}
144
145	.note-save {
146	color: #0000bb;
147	}
148
149	.note-save[disabled="true"] {
150	color: #dfdfdf;
151	pointer-events: none;
152	user-select: none;
153	cursor: not-allowed;
154	}

News WeekMagazine PRO

Company