andyjumars · andyjumars · Mar 2, 2017 · Mar 2, 2017 · Mar 2, 2017 · Mar 2, 2017
diff --git a/_config.yml b/_config.yml
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+<head>
+<title>Note to Self</title>
+<meta charset="utf-8">
+<link rel="stylesheet" href="notetoself.css">
+<script src="notetoself.js"></script>
+</head>
+<body>
+<form>
+<label for="note_color">Color:</label>
+<select id="note_color">
+<option value="LightGoldenRodYellow">yellow</option>
+<option value="PaleGreen">green</option>
+<option value="LightPink">pink</option>
+<option value="LightBlue">blue</option>
+</select>
+	<input type="text" id="note_text">
+	<input type="button" id="add_button"
+	value="加入便利貼">
+</form>
+<ul id="stickies">
+</ul>
+</body>
+</html>
+
+
+
diff --git a/index.md b/index.md
diff --git a/notetoself.css b/notetoself.css
@@ -0,0 +1,93 @@
+/* 
+   notetoself.css
+
+Tested in: Firefox4RC, Safari 5, Opera 11, Chrome 10
+Transition (ease-in) doesn't work in Firefox 3.
+
+*/
+
+
+body {
+	background-color: #dbdbdb;
+	font-size: 100%;
+}
+
+form input#note_text {
+	width: 350px;
+}
+
+/* sticky note */
+
+ul#stickies li {
+	display: block;
+	list-style: none;
+	z-index: 1;
+	float: left; 
+	margin: 30px;
+	padding: 15px 15px 50px 15px;
+	width: 200px;
+	height: 200px;
+	border: 1px solid #bfbfbf;
+    background-color: LightGoldenRodYellow;  /* use #fafad2 if name doesn't work */
+	color: black;
+	text-decoration: none;
+	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
+	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
+	-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
+	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
+	-webkit-transition: all 0.5s ease-in;
+	-moz-transition: all 0.5s ease-in;
+	-o-transition: all 0.5s ease-in;
+	-ms-transition: all 0.5s ease-in;
+	transition: all 0.5s ease-in;
+	overflow: hidden;
+} 
+
+ul#stickies li span.sticky {
+	font-family: Verdana, Helvetica, sans-serif;
+	font-size: 200%;
+}
+
+/* 
+ * rotation
+ */
+ul#stickies li:nth-child(even) {
+	-webkit-transform: rotate(2deg);
+	-moz-transform: rotate(2deg);
+	-o-transform: rotate(2deg);
+	-ms-transform: rotate(2deg);
+	transform: rotate(2deg);
+}
+
+ul#stickies li:nth-child(odd) {
+	-webkit-transform: rotate(-1deg);
+	-moz-transform: rotate(-1deg);
+	-o-transform: rotate(-1deg);
+	-ms-transform: rotate(-1deg);
+	transform: rotate(-1deg);
+}
+
+ul#stickies li:nth-child(3n) {
+	-webkit-transform: rotate(1deg);
+	-moz-transform: rotate(1deg);
+	-o-transform: rotate(1deg);
+	-ms-transform: rotate(1deg);
+	transform: rotate(1deg);
+}
+
+/* 
+   Transform demo 
+   Uses the transition (defined above) to ease in.
+*/
+ul#stickies li:hover {
+	-webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);
+	-moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);
+	-o-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);
+	-webkit-transform: rotate(0deg) scale(1.25);
+	-moz-transform: rotate(0deg) scale(1.25);
+	-o-transform: rotate(0deg) scale(1.25);
+	-ms-transform: rotate(0deg) scale(1.25);
+	transform: rotate(0deg) scale(1.25);
+	z-index: 10;
+}
+
diff --git a/notetoself.js b/notetoself.js
@@ -0,0 +1,117 @@
+/* notetoself.js
+ * 
+ * This version uses the array and adds the color JSON
+ */
+
+
+window.onload = init;
+
+function init() {
+	var button = document.getElementById("add_button");
+	button.onclick = createSticky;
+/*
+	var clearButton = document.getElementById("clear_button");
+	clearButton.onclick = clearStickyNotes;
+*/
+
+	var stickiesArray = getStickiesArray();
+
+	for (var i = 0; i < stickiesArray.length; i++) {
+		var key = stickiesArray[i];
+		var value = JSON.parse(localStorage[key]);
+		addStickyToDOM(key, value);
+	}	
+}
+function getStickiesArray() {
+	var stickiesArray = localStorage.getItem("stickiesArray");
+	if (!stickiesArray) {
+		stickiesArray = [];
+		localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
+	} else {
+		stickiesArray = JSON.parse(stickiesArray);
+	}
+	return stickiesArray;
+}
+
+function createSticky() {
+	var stickiesArray = getStickiesArray();
+	var value = document.getElementById("note_text").value;
+	var colorSelectObj = document.getElementById("note_color");
+	var index = colorSelectObj.selectedIndex;
+	var color = colorSelectObj[index].value;
+
+	// create sticky note using JSON to hold value and color
+	var currentDate = new Date();
+	var key = "sticky_" + currentDate.getTime();
+	var stickyObj = {
+			"value": value,
+			"color": color
+	};
+	localStorage.setItem(key, JSON.stringify(stickyObj));
+
+	// add new sticky note key to array and update notes array in localStorage
+	stickiesArray.push(key);
+	localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
+
+	addStickyToDOM(key, stickyObj);
+}
+
+function deleteSticky(e) {
+	var key = e.target.id;
+	if (e.target.tagName.toLowerCase() == "span") {
+		key = e.target.parentNode.id;
+	}
+	var stickiesArray = getStickiesArray();
+	if (stickiesArray) {
+		for (var i = 0; i < stickiesArray.length; i++) {
+			if (key == stickiesArray[i]) {
+				stickiesArray.splice(i,1);
+			}
+		}
+		localStorage.removeItem(key);
+		localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
+		removeStickyFromDOM(key);
+	}
+}
+
+function addStickyToDOM(key, stickyObj) {
+	var stickies = document.getElementById("stickies");
+
+	var sticky = document.createElement("li");
+	// set the id attribute to the key so we can find it using
+	// the ids stored in the stickies array
+	sticky.setAttribute("id", key);
+	// use the stickyObj color, and set the background-color CSS style
+	sticky.style.backgroundColor = stickyObj.color;
+
+	var span = document.createElement("span");
+	span.setAttribute("class", "sticky");
+
+	// use the stickyObj value as the text for the sticky note 
+	span.innerHTML = stickyObj.value;
+
+	// add everything to the DOM
+	sticky.appendChild(span);
+	stickies.appendChild(sticky);
+
+	// add an event listener so when you click on a sticky note it can be deleted
+	sticky.onclick = deleteSticky;
+}
+
+function removeStickyFromDOM(key) {
+	var sticky = document.getElementById(key);
+	sticky.parentNode.removeChild(sticky);
+}
+
+function clearStickyNotes() {
+	localStorage.clear();
+	var stickyList = document.getElementById("stickies");
+	var stickies = stickyList.childNodes;
+	for (var i = stickies.length-1; i >= 0; i--) {
+		stickyList.removeChild(stickies[i]);
+	}
+
+	// reset stickies array
+	var stickiesArray = getStickiesArray();
+}
+