hannalaakso · August 28, 2013 06:52
diff --git a/Web Storage App b/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;
	}