hannalaakso/Web Storage App

## Web Storage App
JS:

var notes = [];
var key = "webDesignerNotes";

window.onload = function() {
  var submitButton = document.getElementById("submit");
	submitButton.onclick = createNote;
	if (!window.localStorage) {
		alert("The Web Storage API is not supported.");
	} else {
		loadNotes();
	}
}

function createNote() {
	var noteText = document.getElementById("note");
	text = noteText.value;
	if (text == null || text == "" || text.length == 0) {
		alert("Please enter a note!");
		return;
	}
	var colorSelect = document.getElementById("color");
	var index = colorSelect.selectedIndex;
	var color = colorSelect[index].value;
	var note = {};
	note.text = text;
	note.color = color;
	notes.push(note);
	storeNotes();
	addNoteToPage(note);
}

function storeNotes() {
	var jsonNotes = JSON.stringify(notes);
	localStorage.setItem(key, jsonNotes);
}

function loadNotes(){
	var jsonNotes = localStorage.getItem(key);
	if (jsonNotes != null) {
		notes = JSON.parse(jsonNotes);
		for (var i = 0; i < notes.length; i++) {
			addNoteToPage(notes[i]);
		}
	}
}

function addNoteToPage (note) {
	var notesUl = document.getElementById("notes");
	var li = document.createElement("li");
	li.innerHTML = note.text;
	li.style.backgroundColor = note.color;
	if (notesUl.childElementCount > 0) {
		notesUl.insertBefore(li, notesUl.firstChild);
	} else {
		notesUl.appendChild(li);
	}
}


HTML:

<!doctype html>
<html>
<head>
<title>JSON</title>
<meta charset="utf-8">
<link rel="stylesheet" href="notes.css">
<script src="notes.js"></script>
</head>
<body>
<form>
<label for="note">Enter a note: </label><br>
<textarea id="note">
</textarea>
<br>
<select id="color">
<option value="white">pick a color:</option>
<option value="pink">pink</option>
<option value="LightGrey">grey</option>
<option value="lightyellow">yellow</option>
</select>
<input type="button" id="submit" value="save note!">
</form>

<ul id="notes">
</ul>

</body>
</html>

CSS:

ul {
  margin: 5px 0px 0px 0px;
	padding: 0;
	border: 1px dotted black;
}

ul li {
	list-style-type: none;
	padding: 10px;
	border-bottom: 1px dotted black;
}

ul li:last-child {
	border-bottom: none;
}
	JS:

	var notes = [];
	var key = "webDesignerNotes";

	window.onload = function() {
	var submitButton = document.getElementById("submit");
	submitButton.onclick = createNote;
	if (!window.localStorage) {
	alert("The Web Storage API is not supported.");
	} else {
	loadNotes();
	}
	}

	function createNote() {
	var noteText = document.getElementById("note");
	text = noteText.value;
	if (text == null \|\| text == "" \|\| text.length == 0) {
	alert("Please enter a note!");
	return;
	}
	var colorSelect = document.getElementById("color");
	var index = colorSelect.selectedIndex;
	var color = colorSelect[index].value;
	var note = {};
	note.text = text;
	note.color = color;
	notes.push(note);
	storeNotes();
	addNoteToPage(note);
	}

	function storeNotes() {
	var jsonNotes = JSON.stringify(notes);
	localStorage.setItem(key, jsonNotes);
	}

	function loadNotes(){
	var jsonNotes = localStorage.getItem(key);
	if (jsonNotes != null) {
	notes = JSON.parse(jsonNotes);
	for (var i = 0; i < notes.length; i++) {
	addNoteToPage(notes[i]);
	}
	}
	}

	function addNoteToPage (note) {
	var notesUl = document.getElementById("notes");
	var li = document.createElement("li");
	li.innerHTML = note.text;
	li.style.backgroundColor = note.color;
	if (notesUl.childElementCount > 0) {
	notesUl.insertBefore(li, notesUl.firstChild);
	} else {
	notesUl.appendChild(li);
	}
	}


	HTML:

	<!doctype html>
	<html>
	<head>
	<title>JSON</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="notes.css">
	<script src="notes.js"></script>
	</head>
	<body>
	<form>
	<label for="note">Enter a note: </label><br>
	<textarea id="note">
	</textarea>
	<br>
	<select id="color">
	<option value="white">pick a color:</option>
	<option value="pink">pink</option>
	<option value="LightGrey">grey</option>
	<option value="lightyellow">yellow</option>
	</select>
	<input type="button" id="submit" value="save note!">
	</form>

	<ul id="notes">
	</ul>

	</body>
	</html>

	CSS:

	ul {
	margin: 5px 0px 0px 0px;
	padding: 0;
	border: 1px dotted black;
	}

	ul li {
	list-style-type: none;
	padding: 10px;
	border-bottom: 1px dotted black;
	}

	ul li:last-child {
	border-bottom: none;
	}