How to make an HTML5 Note Taking Program

HTML5 is amazing to me it and I have fun to do coding with JavaScript because it runs on web browser just like that, so we don’t have to install anything, its just running on web browser.

In this tutorial I will share with you how to create a web program, this time, a note taking program.

By watching this tutorial you will know how to store note data, how to retrieve it back and how to delete each one of notes we saved.

We don’t use any database to make this note taking program, we only use what so-called Local Storage on web browser, so our notes are saved on web browser.

Check out the video and let me know if you have any issue with this.

Below is the source code of this tutorial:

<!DOCTYPE html>
<html>
	<head>
		<title>LightWeightNoteTaker</title>
		<script
		  src="https://code.jquery.com/jquery-3.4.1.min.js"
		  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
		  crossorigin="anonymous"></script>
	</head>
	<body>
		<input placeholder="Enter your note" id="note"><br>
		<button onclick="savethenote()">Save</button>
		
		<div id="mynotes"></div>
		
		<script>
			
			var appname = "lightweightnotetaker";
			var notedata = [];
			
			if(localStorage.getItem(appname) === null){
				savedata();
			}else{
				notedata = JSON.parse(localStorage.getItem(appname));
			}
			
			function savedata(){
				localStorage.setItem(appname, JSON.stringify(notedata))
			}
		
			function savethenote(){
				var note = $("#note").val();
				notedata.push(note);
				savedata();
				$("#note").val("");
				listthenotes();
			}
			
			function listthenotes(){
				$("#mynotes").html("");
				for(var i = 0; i < notedata.length; i++){
					$("#mynotes").prepend("<p>" + notedata[i] + " | <a href='#' onclick='deletenote("+i+")'>X</a></p>");
				}
			}
			
			function deletenote(index){
				notedata.splice(index, 1);
				savedata();
				listthenotes();
			}
			
			listthenotes();
			
		</script>
	</body>
</html>

Post Views: 191