From 60a62d867c7fae9fecbe95ac7089362bf8f28b82 Mon Sep 17 00:00:00 2001
From: estebanrfp <estebanrfp@gmail.com>
Date: Tue, 7 Apr 2020 18:55:57 +0200
Subject: [PATCH] update todo.html - keep it simple

---
 examples/vanilla/todo.html | 99 ++++++++++++++++++++------------------
 1 file changed, 53 insertions(+), 46 deletions(-)
diff --git a/examples/vanilla/todo.html b/examples/vanilla/todo.html
index 7087f529..7dbeab97 100644
--- a/examples/vanilla/todo.html
+++ b/examples/vanilla/todo.html
@@ -1,53 +1,60 @@
 <html>
 
 <body>
-    <h1>Thoughts</h1>
+	<h1>Thoughts</h1>
 
-    <form id="form">
-        <input id="input">
-        <button>Add</button>
-    </form>
+	<form id="form">
+		<input id="input">
+		<button>Add</button>
+	</form>
 
-    <ul id="parentList"></ul>
-    <!-- <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> -->
-    <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
-    <link href="style.css" rel="stylesheet">
-    <script>
-        var gun = Gun().get('thoughts');
-        document.getElementById('form').addEventListener('submit', function (e) {
-            e.preventDefault(); // attaches event listener and prevent default form action
-            var data = document.getElementById('input').value;
-            gun.set(data);
-            document.getElementById('input').value = "";
-        });
-        gun.map().on(function (thought, id) {
-            var li = document.getElementById(id) || document.getElementById('parentList').insertAdjacentHTML('beforeend', '<li id =' + id + '> ' + thought + '</li>');
-            var $ = function (selector) {
-                return document.querySelector(selector);
-            };
-            // attach the event listener to the selected li items
-            var links = $('#parentList').getElementsByTagName('li');
-            for (var i = 0; i < links.length; i++) {
-                var link = links[i];
-                // console.log(link.innerHTML);
-                link.ondblclick = dynamicEvent;
-                if (link.innerHTML === " null" || link.innerHTML === " " || link.innerHTML === "") {
-                    link.style.display = "none";
-                } else {
-                    link.style.display = "list-item";
-                };
-            };
-        });
-        function dynamicEvent() {
-            gun.get(this.id).put(null);
-            this.innerHTML = document.getElementById(this.id.innerHTML);
-            if (this.innerHTML === " null" || this.innerHTML === " " || this.innerHTML === "") {
-                this.style.display = "none";
-            } else {
-                this.style.display = "list-item";
-            };
-        };
-    </script>
+	<ul id="parentList"></ul>
+
+	<script src="../../../gun/gun.js"></script>
+
+	<script>
+		const gun = Gun().get('thoughts')
+
+		const parentList = document.getElementById('parentList')
+		const input = document.getElementById('input')
+
+		const dynamicEvent = e => {
+			const target = e.target
+
+			gun.get(target.id).put(null)
+
+			target.innerHTML = document.getElementById(target.innerHTML)
+
+			if (target.innerHTML === ' null' || target.innerHTML === ' ' || target.innerHTML === '') {
+				target.style.display = 'none'
+			} else {
+				target.style.display = 'list-item'
+			}
+		}
+
+		gun.map().on((thought, id) => {
+			parentList.insertAdjacentHTML('beforeend', `<li id =${id}> ${thought}</li>`)
+
+			const links = parentList.getElementsByTagName('li')
+
+			for (const link of links) {
+				if (link.innerHTML === ' null' || link.innerHTML === ' ' || link.innerHTML === '') {
+					link.style.display = 'none'
+				} else {
+					link.style.display = 'list-item'
+				}
+				link.ondblclick = dynamicEvent
+			}
+		})
+
+		document.getElementById('form').addEventListener('submit', e => {
+			e.preventDefault()
+			const data = input.value
+			gun.set(data)
+			input.value = ''
+		})
+
+	</script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
