jayeshkattar · satyadurgakasa · Feb 17, 2018 · Feb 17, 2018 · Feb 17, 2018 · Feb 18, 2018
diff --git a/Participant Names/quicknote/README.md b/Participant Names/quicknote/README.md
@@ -0,0 +1,27 @@
+# Quicknote
+
+A persistent note/to-do list application — click a button in your browser and record notes, which will persist even after browser restarts.
+
+Works in Firefox 47+.
+
+## Running with web-ext
+
+[web-ext](https://developer.mozilla.org/en-US/Add-ons/WebExtensions) generates a new profile on each run, meaning your data is not persisted between Firefox runs. To use web-ext and preserve this information, you will need an existing or new Firefox profile. Then run:
+
+web-ext run --firefox-profile [A PATH TO A FIREFOX PROFILE] --keep-profile-changes
+
+## What it does
+
+This extension includes:
+
+* A browser action that creates a popup — within the popup is:
+	* Two form elements for entering title and body text for a new note, along with a button to add a note, and a button to clear all notes.
+	* A list of the notes that have been added to the extension — each note includes a delete button to delete just that note. You can also click on the note title and body to edit them. In edit mode, each note includes:
+		* An update button to submit an update.
+		* A cancel button to cancel the update.
+
+Quicknote uses the WebExtensions [Storage API](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage) to persist the notes.
+
+## What it shows
+
+* How to persist data in a WebExtension using the Storage API.
diff --git a/Participant Names/quicknote/icons/quicknote-32.png b/Participant Names/quicknote/icons/quicknote-32.png
diff --git a/Participant Names/quicknote/icons/quicknote-48.png b/Participant Names/quicknote/icons/quicknote-48.png
diff --git a/Participant Names/quicknote/manifest.json b/Participant Names/quicknote/manifest.json
@@ -0,0 +1,30 @@
+{
+
+  "manifest_version": 2,
+  "name": "Quicknote",
+  "version": "1.1",
+
+  "description": "Allows the user to make quick notes by clicking a button and entering text into the resulting popup. The notes are saved in storage. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#quicknote",
+  "icons": {
+    "48": "icons/quicknote-48.png"
+  },
+
+  "permissions": [
+    "storage"
+  ],
+
+  "browser_action": {
+    "default_icon": {
+     "32" : "icons/quicknote-32.png"
+    },
+    "default_title": "Quicknote",
+    "default_popup": "popup/quicknote.html"
+  },
+
+  "applications": {
+    "gecko": {
+      "id": "[email protected]"
+    }
+  }
+
+}
diff --git a/Participant Names/quicknote/popup/quicknote.css b/Participant Names/quicknote/popup/quicknote.css
@@ -0,0 +1,120 @@
+/* General styling */
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  font-size: 10px;
+  background: rgb(240,240,240);
+  height: 300px;
+  margin: 0;
+}
+
+body {
+  width: 300px;
+  background: rgb(240,240,240);
+  margin: 0 auto;
+  padding: 2px;
+  height: inherit;
+}
+
+.outer-wrapper {
+  overflow: auto;
+  width: 100%;
+  height: 290px;
+  background: rgb(240,240,240);
+}
+
+.clearfix {
+  clear: both;
+}
+
+/* form control styling */
+
+input, textarea, button {
+  border: 1px solid rgb(218,218,218);
+  padding: 4px;
+  background: white;
+  border-radius: 3px;
+}
+
+button {
+  background: #ccc;
+  box-shadow: inset -2px -2px 1px rgba(0,0,0,0.2);
+  transition: 0.1s all;
+}
+
+button:hover, button:focus {
+  background: #ddd;
+}
+
+button:active {
+  box-shadow: inset -2px -2px 1px rgba(0,0,0,0.05);
+}
+
+input, textarea {
+  font-family: sans-serif;
+  box-shadow: inset 2px 2px 1px rgba(0,0,0,0.10);
+}
+
+/* Typography */
+
+h2 {
+  font-size: 1.3rem;
+}
+
+p, input, textarea {
+  font-size: 1.2rem;
+  line-height: 1.5;
+}
+
+/* New notes entry box */
+
+.new-note {
+  width: 100%;
+  margin-bottom: 5px;
+  padding: 2px;
+}
+
+input {
+  width: 100%;
+  margin-bottom: 2px;
+}
+
+textarea {
+  width: 100%;
+  margin-bottom: 4px;
+  resize: none;
+}
+
+.clear {
+  float: left;
+}
+
+.add {
+  float: right;
+}
+
+/* Notes display box(es) */
+
+.note {
+  padding: 2px;
+}
+
+.delete {
+  float: right;
+}
+
+p {
+  margin: 0;
+}
+
+.cancel {
+  float: left;
+}
+
+.update {
+  float: right;
+}
diff --git a/Participant Names/quicknote/popup/quicknote.html b/Participant Names/quicknote/popup/quicknote.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="quicknote.css"/>
+  </head>
+
+<body>
+  <div class="outer-wrapper">
+    <div class="new-note">
+      <input type="text">
+      <textarea></textarea>
+      <button class="clear">Clear notes</button>
+      <button class="add">Add note</button>
+      <div class="clearfix"></div>
+    </div>
+
+    <div class="note-container">
+
+    </div>
+  </div>
+
+  <script src="quicknote.js"></script>
+</body>
+
+</html>
diff --git a/Participant Names/quicknote/popup/quicknote.js b/Participant Names/quicknote/popup/quicknote.js
@@ -0,0 +1,177 @@
+/* initialise variables */
+
+var inputTitle = document.querySelector('.new-note input');
+var inputBody = document.querySelector('.new-note textarea');
+
+var noteContainer = document.querySelector('.note-container');
+
+
+var clearBtn = document.querySelector('.clear');
+var addBtn = document.querySelector('.add');
+
+/*  add event listeners to buttons */
+
+addBtn.addEventListener('click', addNote);
+clearBtn.addEventListener('click', clearAll);
+
+/* generic error handler */
+function onError(error) {
+  console.log(error);
+}
+
+/* display previously-saved stored notes on startup */
+
+initialize();
+
+function initialize() {
+  var gettingAllStorageItems = browser.storage.local.get(null);
+  gettingAllStorageItems.then((results) => {
+    var noteKeys = Object.keys(results);
+    for (let noteKey of noteKeys) {
+      var curValue = results[noteKey];
+      displayNote(noteKey,curValue);
+    }
+  }, onError);
+}
+
+/* Add a note to the display, and storage */
+
+function addNote() {
+  var noteTitle = inputTitle.value;
+  var noteBody = inputBody.value;
+  var gettingItem = browser.storage.local.get(noteTitle);
+  gettingItem.then((result) => {
+    var objTest = Object.keys(result);
+    if(objTest.length < 1 && noteTitle !== '' && noteBody !== '') {
+      inputTitle.value = '';
+      inputBody.value = '';
+      storeNote(noteTitle,noteBody);
+    }
+  }, onError);
+}
+
+/* function to store a new note in storage */
+
+function storeNote(title, body) {
+  var storingNote = browser.storage.local.set({ [title] : body });
+  storingNote.then(() => {
+    displayNote(title,body);
+  }, onError);
+}
+
+/* function to display a note in the note box */
+
+function displayNote(title, body) {
+
+  /* create note display box */
+  var note = document.createElement('div');
+  var noteDisplay = document.createElement('div');
+  var noteH = document.createElement('h2');
+  var notePara = document.createElement('p');
+  var deleteBtn = document.createElement('button');
+  var clearFix = document.createElement('div');
+
+  note.setAttribute('class','note');
+
+  noteH.textContent = title;
+  notePara.textContent = body;
+  deleteBtn.setAttribute('class','delete');
+  deleteBtn.textContent = 'Delete note';
+  clearFix.setAttribute('class','clearfix');
+
+  noteDisplay.appendChild(noteH);
+  noteDisplay.appendChild(notePara);
+  noteDisplay.appendChild(deleteBtn);
+  noteDisplay.appendChild(clearFix);
+
+  note.appendChild(noteDisplay);
+
+  /* set up listener for the delete functionality */
+
+  deleteBtn.addEventListener('click',(e) => {
+    const evtTgt = e.target;
+    evtTgt.parentNode.parentNode.parentNode.removeChild(evtTgt.parentNode.parentNode);
+    browser.storage.local.remove(title);
+  })
+
+  /* create note edit box */
+  var noteEdit = document.createElement('div');
+  var noteTitleEdit = document.createElement('input');
+  var noteBodyEdit = document.createElement('textarea');
+  var clearFix2 = document.createElement('div');
+
+  var updateBtn = document.createElement('button');
+  var cancelBtn = document.createElement('button');
+
+  updateBtn.setAttribute('class','update');
+  updateBtn.textContent = 'Update note';
+  cancelBtn.setAttribute('class','cancel');
+  cancelBtn.textContent = 'Cancel update';
+
+  noteEdit.appendChild(noteTitleEdit);
+  noteTitleEdit.value = title;
+  noteEdit.appendChild(noteBodyEdit);
+  noteBodyEdit.textContent = body;
+  noteEdit.appendChild(updateBtn);
+  noteEdit.appendChild(cancelBtn);
+
+  noteEdit.appendChild(clearFix2);
+  clearFix2.setAttribute('class','clearfix');
+
+  note.appendChild(noteEdit);
+
+  noteContainer.appendChild(note);
+  noteEdit.style.display = 'none';
+
+  /* set up listeners for the update functionality */
+
+  noteH.addEventListener('click',() => {
+    noteDisplay.style.display = 'none';
+    noteEdit.style.display = 'block';
+  })
+
+  notePara.addEventListener('click',() => {
+    noteDisplay.style.display = 'none';
+    noteEdit.style.display = 'block';
+  }) 
+
+  cancelBtn.addEventListener('click',() => {
+    noteDisplay.style.display = 'block';
+    noteEdit.style.display = 'none';
+    noteTitleEdit.value = title;
+    noteBodyEdit.value = body;
+  })
+
+  updateBtn.addEventListener('click',() => {
+    if(noteTitleEdit.value !== title || noteBodyEdit.value !== body) {
+      updateNote(title,noteTitleEdit.value,noteBodyEdit.value);
+      note.parentNode.removeChild(note);
+    } 
+  });
+}
+
+
+/* function to update notes */
+
+function updateNote(delNote,newTitle,newBody) {
+  var storingNote = browser.storage.local.set({ [newTitle] : newBody });
+  storingNote.then(() => {
+    if(delNote !== newTitle) {
+      var removingNote = browser.storage.local.remove(delNote);
+      removingNote.then(() => {
+        displayNote(newTitle, newBody);
+      }, onError);
+    } else {
+      displayNote(newTitle, newBody);
+    }
+  }, onError);
+}
+
+/* Clear all notes from the display/storage */
+
+function clearAll() {
+  while (noteContainer.firstChild) {
+      noteContainer.removeChild(noteContainer.firstChild);
+  }
+  browser.storage.local.clear();
+}
diff --git a/Participant Names/sampleaddon/borderify.js b/Participant Names/sampleaddon/borderify.js
@@ -0,0 +1 @@
+document.body.style.border="5px solid red";