gun
Version:
A realtime, decentralized, offline-first, graph data synchronization engine.
66 lines (49 loc) • 1.6 kB
HTML
<html>
<head>
<title>Think</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<body>
<h1>Thoughts</h1>
<form id="form">
<input id="input">
<button>Add</button>
</form>
<ul id="parentList"></ul>
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script>
const gun = Gun(`${window.location.origin}/gun`).get('thoughts')
const parentList = document.getElementById('parentList')
const input = document.getElementById('input')
const form = document.getElementById('form')
const dynamicEvent = e => {
const target = e.target;
gun.get(target.id).put(null);
target.innerHTML = document.getElementById(target.id);
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;
}
})
form.addEventListener('submit', e => {
e.preventDefault();
gun.set(input.value);
input.value = '';
})
</script>
</body>
</html>