Editing notes in a notepad in JavaScript

In the previous lesson, we made it so that you can view already created notes. Let's now make that the note you are viewing can be edited.

Of course, even now you can edit our entry in textarea, but these changes will not be saved in the notes object. That is, the next time you view the note, it will still have the outdated text.

What will we have now if we press the save button while viewing the note? A new entry will simply be created with this text.

So, let's change the situation so that you can both save new entries and edit already created ones.

Solution algorithm

Let's make it so that clicking on the button in the view mode edits the note, and clicking on the button in the creation mode creates a new note.

Let the mode be set by the data-mode attribute for our button. Let if this attribute has the value 'create' - the button saves a new note:

<div id="text">
	<textarea></textarea>
	<button data-mode="create">save</button>
</div>

And if this attribute has the value 'update' - let the button edit the opened note. In this case, the number of the opened note will be stored in the data-key attribute:

<div id="text">
	<textarea></textarea>
	<button data-mode="update" data-key="3">save</button>
</div>

I will present your JavaScript code for the button click handler:

button.addEventListener('click', function() {
	let mode = this.dataset.mode;
	
	if (mode == 'create') {
		// your code to create a new note
	}
	
	if (mode == 'update') {
		let key = this.dataset.key;
		
		// your code to edit the note with number 'key'
	}
});

Change of modes

Obviously, there will be no saved notes upon entering the page. This means that initially the button must be in creation mode.

Then, when you click to view any note, the button mode should change to update and the number of the opened note should be written to data-key.

How will the mode change from editing back to creating? I would suggest that clicking on the button during edit mode should update the note and change to creation mode.

This, however, is not enough. After all, we can simply want view the note without editing it. And then we may want to return to creation. In this case, we need another button that will return us to creation mode.

Let's insert this button into our layout:

<div id="wrapper">
	<div id="menu">
		<div id="notes">
			<ul id="notes">
				<li data-key="1">note 1</li>
				<li data-key="2">note 2</li>
				<li data-key="3">note 3</li>
			</ul>
		</div>
		<div id="create">
			<button>new note</button>
		</div>
	</div>
	<div id="text">
		<textarea></textarea>
		<button>save</button>
	</div>
</div>

Implementation

Implement described editing the note.

Make the screen display the mode we are currently in.