mirror of
https://github.com/amark/gun.git
synced 2025-03-30 15:08:33 +00:00
37 lines
1.5 KiB
HTML
37 lines
1.5 KiB
HTML
<html>
|
|
<body>
|
|
<h2>ToDo List</h2>
|
|
|
|
<form id="add"><input id="todo"/><button>Add</button></form>
|
|
<ul id="todos"></ul>
|
|
|
|
<script src="../../gun.js"></script>
|
|
<script> // minimal jQuery polyfill
|
|
var $ = document.querySelector.bind(document);
|
|
function clean(text){ return String(text).replace(/\</ig, '<') }
|
|
</script>
|
|
<script> // by Forrest Tait! Edited by Mark Nadal.
|
|
var gun = Gun(location.origin + '/gun');
|
|
var todo = gun.get('example/todo/data');
|
|
$("#add").onsubmit = function(){
|
|
todo.path(Gun.text.random()).put(clean($("#todo").value)); // add the HTML input's value to a random ID in the todo.
|
|
$("#todo").value = ""; // clear out the input's value so we can add more.
|
|
return false; // prevent the browser from reloading.
|
|
};
|
|
todo.on(function(list){ // subscribe and listen to all updates on the todo.
|
|
var html = ''; // old school HTML strings! You should probably use a real template system.
|
|
for(field in list) { // iterate over the list to generate the HTML.
|
|
if(!list[field] || field == '_') continue; // ignore nulled out values and metadata.
|
|
html += '<li>'
|
|
+ clean(list[field])
|
|
+ '<button style="float:right;" onclick=todone("'+field+'")>X</button>'
|
|
+ '</li>';
|
|
}
|
|
$("#todos").innerHTML = html; // set the HTML to our new list.
|
|
});
|
|
window.todone = function(field){
|
|
todo.path(field).put(null); // null out the todo item on this field ID.
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |