Everything 🚀

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_Store

index.html

@@ -0,0 +1,15 @@
+<meta name="viewport" content="width=device-width" initial-scale=1></meta>
+<link rel="stylesheet" href="style.css"></link>
+<toggle>☰</toggle>
+<sidebar>
+    .
+</sidebar>
+<textarea autofocus></textarea>
+<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>
+<script src="store.js"></script>
+<script src="interface.js"></script>
+
+<buttons>
+    <button onclick="location.reload(true)">reload</button>
+    <button onclick="reset()">reset</button>
+</buttons>

interface.js

@@ -0,0 +1,112 @@
+const textarea = document.getElementsByTagName('textarea')[0]
+const sidebar = document.getElementsByTagName('sidebar')[0]
+const toggle = document.getElementsByTagName('toggle')[0]
+
+const emptyNotes = {
+    '_new note': ''
+}
+
+const activeNote = {
+    title: Object.keys(emptyNotes)[0]
+}
+
+const renderSidebar = (notes) => {
+    let titles = Object.keys(notes).sort()
+    let html = ''
+    for (let title of titles) html += `<div onclick="changeNote(event)">${title}</div>`
+    sidebar.innerHTML = html
+}
+
+const changeNote = (event) => {
+    let title = event.target.innerHTML
+    renderNote(title)
+}
+
+const renderNote = (title) => {
+    activeNote.title = title
+    textarea.value = notes[title]
+    if (!textareaVisible) toggleSidebar();
+    textarea.focus()
+}
+
+const saveNote = () => {
+    let content = textarea.value
+    if (!content) return
+
+    let title = getTitle(content)
+
+    if (activeNote.title !== '_new note') delete notes[activeNote.title]
+    activeNote.title = title
+
+    notes[title] = content
+
+    saveNotes()
+}
+
+const saveNotes = () => {
+    saveLocally(notes)
+    persist(notes)
+    renderSidebar(notes)
+}
+
+const saveLocally = (notes) => {
+    localStorage.setItem('notes', JSON.stringify(notes))
+}
+
+const getTitle = (note) => {
+    return note.split('\n')[0].replace('#', '')
+}
+
+const debounce = (func) => {
+	let timeout
+	return () => {
+		let context = this
+		let later = () => {
+			timeout = null
+			func.apply(context)
+		}
+		clearTimeout(timeout)
+		timeout = setTimeout(later, 500)
+	}
+}
+
+/* Get local copy first */
+let notes = Object.assign({}, emptyNotes, JSON.parse(localStorage.getItem('notes')))
+renderSidebar(notes)
+
+/* Overwrite with remote copy = source of truth */
+getNotes().then(data => {
+    notes = Object.assign({}, emptyNotes, data)
+    renderSidebar(notes)
+    sync(data => {
+        notes = data
+        renderSidebar(notes)
+
+        /* Syncs notes between devices as long as the title doesn't change */
+        if (notes[activeNote.title]) renderNote(activeNote.title)
+    })
+})
+
+const reset = () => {
+    notes = emptyNotes
+    saveNotes()
+    location.reload(true)
+}
+
+let textareaVisible = true;
+const toggleSidebar = () => {
+    sidebar.style.display = sidebar.style.display === 'block' ? 'none': 'block'
+    textarea.style.display = textarea.style.display === 'none' ? 'block': 'none'
+    textareaVisible = !textareaVisible
+    if (textareaVisible) {
+        toggle.innerHTML = '☰';
+        toggle.style.float = 'left';
+        textarea.focus();
+    } else {
+        toggle.innerHTML = '✕';
+        toggle.style.float = 'right';
+    }
+}
+
+textarea.addEventListener('keyup paste', debounce(saveNote))
+toggle.addEventListener('click', toggleSidebar);

package.json

@@ -0,0 +1,9 @@
+{
+  "name": "notes",
+  "scripts": {
+    "start": "serve -p 7711"
+  },
+  "dependencies": {
+    "serve": "2.0.0"
+  }
+}

store.js

@@ -0,0 +1,24 @@
+const config = {
+    apiKey: "AIzaSyC3yBT7RUgr7rqpcKaIIoKQxIdbVy5_c1Q",
+    authDomain: "notes-65612.firebaseapp.com",
+    databaseURL: "https://notes-65612.firebaseio.com",
+    storageBucket: "notes-65612.appspot.com",
+    messagingSenderId: "241953144431"
+}
+firebase.initializeApp(config)
+const database = firebase.database().ref('/siddharthkp')
+
+const persist = (notes) => {database.set({notes})}
+
+const getNotes = () => {
+    return database.once('value').then(snapshot => {
+        if (snapshot.val()) return snapshot.val().notes
+        else return {}
+    })
+}
+
+const sync = (callback) => {
+    database.on('value', snapshot => {
+        if (snapshot.val()) callback(snapshot.val().notes)
+    })
+}

style.css

@@ -0,0 +1,65 @@
+body {
+    margin: 0;
+    padding: 25px;
+    width: calc(100% - 50px);
+    height: calc(100% - 50px);
+}
+* {
+    font-family: monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    border: none;
+    outline: none;
+}
+textarea {
+    float: left;
+    width: 80%;
+    height: 100%;
+}
+sidebar {
+    float: left;
+    width: 15%;
+    min-width: 100px;
+    height: 100%;
+    margin-right: 5%;
+    white-space: nowrap;
+    overflow: hidden;
+    color: grey;
+}
+sidebar div {
+    margin-bottom: 10px;
+}
+toggle {
+    display: none;
+}
+
+@media (max-width: 800px) {
+    toggle {
+        display: block;
+        color: grey;
+        position: relative;
+        font-size: 16px;
+        padding: 5px;
+        float: left;
+        height: 20px;
+        cursor: pointer;
+        top: -7px;
+        left: -5px;
+    }
+    sidebar {
+        display: none;
+
+    }
+    textarea {
+        float: none;
+        width: 100%;
+        height: calc(100% - 30px);
+    }
+}
+
+
+buttons {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+}