Add files via upload

Updated codebase so page doesn't need to be refreshed when notes are created or deleted.

Added edit functionality.

README.md

@@ -1,6 +1,6 @@
 # js-notes 📝
 
-A simple notes application, saving notes in the user's browser storage to prevent loss on page refresh.
+A simple notes application that allows you to edit and delete notes, saving them in the browser storage to prevent loss on page refresh.
 
 ## Demo
 

index.html

@@ -11,12 +11,11 @@
 			<h1 class="mb-5">Notes</h1>
 			<div class="card mb-5">
 				<div class="card-body">
-					<form>
-						<div class="mb-3">
-							<textarea class="form-control" placeholder="Enter Note Contents..." id="contents"></textarea>
-						</div>
-						<button class="btn btn-primary" onclick="createNote();">Create</button>
-					</form>
+					<div class="mb-3">
+						<textarea class="form-control" placeholder="Enter Note Contents..." id="contents"></textarea>
+					</div>
+					<button class="btn btn-primary" onclick="addNote();" id="action">Create</button>
+					<!--<button class="btn btn-primary" onclick="updateNote(id);">Update</button>-->
 				</div>
 			</div>
 			<div class="mb-5" id="notes"></div>

js/script.js

@@ -1,46 +1,79 @@
 output = document.getElementById('notes');
+input = document.getElementById('contents');
+action = document.getElementById('action');
 
-if (typeof(Storage) !== 'undefined') {
-
-	notes = JSON.parse(localStorage.getItem('notes'));
-
-	if (notes && notes.length > 0) {
-		for (i = notes.length - 1; i >= 0; i--) {
-			output.innerHTML += '<div class="card mb-3"><div class="card-header">'+ notes[i]['timestamp'] + '</div><div class="card-body">' + notes[i]['contents'] + '<button class="btn btn-danger float-end" onclick="deleteNote(' + i + ');">Delete</button></div></div>';
-		}
-	}
-	else {
-		output.innerHTML += '<div class="alert alert-danger">You have no notes yet!</div>';
-	}
-
-	function reloadNotes() {
-		newNotes = JSON.stringify(notes);
-		localStorage.setItem('notes', newNotes);
-		location.reload();
+function getNotes() {
+	return JSON.parse(localStorage.getItem('notes')) || [];
+}
+
+function setNotes(notes) {
+	newNotes = JSON.stringify(notes);
+	localStorage.setItem('notes', newNotes);
+}
+
+function noteLayout(id, timestamp, text) {
+	layout = '<div class="card mb-3" id="' + id + '">';
+	layout += '<div class="card-header">' + timestamp + '</div>';
+	layout += '<div class="card-body"><span>' + text + '</span>';
+	layout += '<div class="btn-group float-end">';
+	layout += '<button class="btn btn-primary" onclick="editNote(this);">Edit</button>';
+	layout += '<button class="btn btn-danger" onclick="deleteNote(this);">Delete</button>';
+	layout += '</div></div></div>';
+	return layout;
+}
+
+function addNote() {
+	noteText = input.value;
+	input.value = "";
+	notes = getNotes();
+	if (noteText) {
+		timestamp = new Date().toLocaleString();
+		output.innerHTML += noteLayout(notes.length, timestamp, noteText);
+		notes = getNotes();
+		notes.push({'timestamp': timestamp, 'text': noteText});
+		setNotes(notes);
 	}
-
-	function deleteNote(id) {
-		for (i = 0; i < notes.length; i++) {
-			if (id == i) {
-				notes.splice(i, 1);
-				reloadNotes();
-			}
-		}
+}
+
+function editNote(note) {
+	id = note.closest('.card').id;
+	input.value = note.closest('.card-body').firstChild.innerText;
+	action.className = 'btn btn-success';
+	action.innerText = 'Update';
+	action.setAttribute('onclick', 'updateNote(' + id + ');');
+}
+
+function updateNote(id) {
+	noteText = input.value;
+	input.value = "";
+	notes = getNotes();
+	if (noteText) {
+		document.getElementById(id).lastChild.firstChild.innerText = noteText;
+		notes = getNotes();
+		notes[id]['text'] = noteText;
+		setNotes(notes);
 	}
-
-	function createNote() {
-		contents = document.getElementById('contents').value;
-		if (contents) {
-			if (!notes) {
-				notes = [];
-			}
-			timestamp = new Date().toLocaleString();
-			notes.push({'timestamp': timestamp, 'contents': contents});
-			reloadNotes();
-		}
+	action.className = 'btn btn-primary';
+	action.innerText = 'Create';
+	action.setAttribute('onclick', 'addNote();');
+}
+
+function deleteNote(note) {
+	note = note.closest('.card');
+	id = note.id;
+	note.remove();
+	notes = getNotes();
+	delete notes[id];
+	setNotes(notes);
+}
+
+notes = getNotes();
+layout = '';
+
+for (i = 0; i < notes.length; i++) {
+	if (notes[i]) {
+		layout += noteLayout(i, notes[i]['timestamp'], notes[i]['text']);
 	}
-
 }
-else {
-	output.innerHTML = '<div class="alert alert-danger">Sorry, your browser doesn\'t support Local Storage!</div>';
-}
+
+output.innerHTML = layout;