From 7b39d53b47cffc5ecc488eb01b4e4f1ea51b8067 Mon Sep 17 00:00:00 2001 From: andyjumars Date: Thu, 2 Mar 2017 12:56:23 +0800 Subject: [PATCH 1/3] Update From 683cbfd83b54ec334e70f7869af642b298039ca3 Mon Sep 17 00:00:00 2001 From: andyjumars Date: Thu, 2 Mar 2017 13:02:25 +0800 Subject: [PATCH 2/3] update update --- index.html | 28 ++++++++++++ notetoself.css | 93 +++++++++++++++++++++++++++++++++++++++ notetoself.js | 117 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 238 insertions(+) create mode 100644 index.html create mode 100644 notetoself.css create mode 100644 notetoself.js 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/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(); +} + From ce648b9abdb2c8546b6c498ba9435d853128e161 Mon Sep 17 00:00:00 2001 From: andyjumars Date: Thu, 2 Mar 2017 13:08:53 +0800 Subject: [PATCH 3/3] update update --- _config.yml | 1 - index.md | 37 ------------------------------------- 2 files changed, 38 deletions(-) delete mode 100644 _config.yml delete mode 100644 index.md 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.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 ![Image](src) -``` - -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.