diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index c419263..0000000
--- a/_config.yml
+++ /dev/null
@@ -1 +0,0 @@
-theme: jekyll-theme-cayman
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6dc8e5d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,28 @@
+
+
+
+Note to Self
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.md b/index.md
deleted file mode 100644
index 49868c9..0000000
--- a/index.md
+++ /dev/null
@@ -1,37 +0,0 @@
-## Welcome to GitHub Pages
-
-You can use the [editor on GitHub](https://github.com/andyjumars/stick/edit/master/index.md) to maintain and preview the content for your website in Markdown files.
-
-Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files.
-
-### Markdown
-
-Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
-
-```markdown
-Syntax highlighted code block
-
-# Header 1
-## Header 2
-### Header 3
-
-- Bulleted
-- List
-
-1. Numbered
-2. List
-
-**Bold** and _Italic_ and `Code` text
-
-[Link](url) and 
-```
-
-For more details see [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/).
-
-### Jekyll Themes
-
-Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/andyjumars/stick/settings). The name of this theme is saved in the Jekyll `_config.yml` configuration file.
-
-### Support or Contact
-
-Having trouble with Pages? Check out our [documentation](https://help.github.com/categories/github-pages-basics/) or [contact support](https://github.com/contact) and we’ll help you sort it out.
diff --git a/notetoself.css b/notetoself.css
new file mode 100644
index 0000000..0e87edd
--- /dev/null
+++ 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
new file mode 100644
index 0000000..22d29c1
--- /dev/null
+++ 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();
+}
+