JSFiddle - React, Tailwind, and code Playground

HTML

<form>
		<input type="text" id="note_text">
		<input type="button" id="add_button" value="Add Sticky Note to Self">
		<input type="button" id="clear_button" value="Clear The Notes">

	</form>
	<ul id="stickyList">
		
	</ul>

CSS

#stickyList li
		{
			font-size:22px;
			font-weight:bold;
			margin-top:10px;
			margin-bottom:10px;
			font-family:helvetica;

		}
		#stickyList li:hover
		{
			background-color:rgb(228, 228, 228);
		}

JavaScript

function init()
{


	var button = document.getElementById("add_button");
	button.onclick = createSticky;
	for (var i = 0; i < localStorage.length; i++) {
		var key = localStorage.key(i);
		if (key.substring(0, 6) == "sticky") {
			var value = localStorage.getItem(key);
			addStickyToDOM(value);
		}
	}
}


function addStickyToDOM(value) {
	var sticky = document.createElement("li");
	sticky.setAttribute("class", "sticky");
	var t = document.createTextNode(value);
	sticky.appendChild(t);
	document.getElementById("stickyList").appendChild(sticky);

}


function createSticky() {
	var value = document.getElementById("note_text").value;
	var key = "sticky_" + localStorage.length;
	localStorage.setItem(key, value);
	addStickyToDOM(value);
}


function clearStorage() {
	localStorage.clear();
	cleart('cleaded THe Stoegae');
}

var clearBtn=document.getElementById("clear_button");
clearBtn.onclick=clearStorage;


window.onload = init;