Реализация блокнотика для сохранения записей на JavaScript

В данном видео я покажу вам, как на JavaScript сделать блокнот для хранения записей. Записи можно будет добавлять, просматривать и редактировать.

Исходники кода

#wrapper {
	width: 600px;
}

#textarea {
	width: 400px;
	height: 500px;
	padding: 10px;
}

#list {
	float: right;
	margin-top: 0;
	padding-left: 0;
}

#list li {
	margin-bottom: 10px;
}

<div id="wrapper">
	<ul id="list"></ul>
	<textarea id="textarea"></textarea>
</div>

let list = document.querySelector('#list');
let textarea = document.querySelector('#textarea');

let notes = [];

let state = {edit: false, key: undefined};

textarea.addEventListener('blur', function() {
	if (state.edit) {
		notes[state.key].text = this.value;
		this.value = '';
		
		state = {edit: false, key: undefined};
	} else {
		let date = new Date;
		let now =
			addZero(date.getHours()) + ':' + 
			addZero(date.getMinutes()) + ':' +
			addZero(date.getSeconds()) + ' ' +
			addZero(date.getDate()) + '.' +
			addZero(date.getMonth() + 1) + '.' +
			date.getFullYear();
		
		notes.push({text: this.value, time: now});
		
		this.value = '';
		
		let li = document.createElement('li');
		li.dataset.num = notes.length - 1;
		li.innerHTML = now;
		list.appendChild(li);
		
		let self = this;
		li.addEventListener('click', function() {
			let num = this.dataset.num;
			self.value = notes[num].text;
			
			state = {edit: true, key: num};
		});
	}
});

function addZero(num) {
	if (num >= 0 && num <= 9) {
		return '0' + num;
	} else {
		return num;
	}
}