📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
31 Days of ObservableInteractive StoryPixel DoodleAdopt an EmojiMaterial Design IconsTime for CatsSpace RaceEtch-a-scapeRun Some Code on Button ClickHow to Center a DivMy RPG Persona3D Pixel Art with three-elementsHello, maze generatorRPG PaintWeb Component TestSelf Referential NotebookRandom Recursive HTMLXP Level CalcEmbedding An Observable Notebook in ObservableHow to: Rendering HTML from a Github gistSimple IconsBusiness CardIdea CollectorIsland AdventureMy Pinned TweetMagic SwordSliding Back and ForthTiny Tools viewer
Hello Userbase
html`
<!-- Auth View -->
<!-- Loading View -->
<div id="loading-view">Loading...</div>
<div id="auth-view">
<h1>Login</h1>
<form id="login-form">
<input id="login-username" type="text" required placeholder="Username">
<input id="login-password" type="password" required placeholder="Password">
<input type="submit" value="Sign in">
</form>
<div id="login-error"></div>
<h1>Create an account</h1>
<form id="signup-form">
<input id="signup-username" type="text" required placeholder="Username">
<input id="signup-password" type="password" required placeholder="Password">
<input type="submit" value="Create an account">
</form>
<div id="signup-error"></div>
</div>
`
html`
<!-- To-dos View -->
<div id="todo-view">
<div id="username"></div>
<input type="button" value="Logout" id="logout-button">
<div id="logout-error"></div>
<h1>To-Do List</h1>
<div id="todos"></div>
<div id="db-loading">Loading to-dos...</div>
<div id="db-error"></div>
<form id="add-todo-form">
<input id="add-todo" type="text" required placeholder="To-Do">
<input type="submit" value="Add">
</form>
<div id="add-todo-error"></div>
</div>
`
{
userbase.init({appId: "56baf746-de7a-4c42-8ce8-6f05b791820a"}).then((session) => session.user ? showTodos(session.user.username) : showAuth())
.catch(() => showAuth())
.finally(() => document.getElementById('loading-view').style.display = 'none')
function handleLogin(e) {
e.preventDefault()
const username = document.getElementById('login-username').value
const password = document.getElementById('login-password').value
userbase.signIn({ username, password, rememberMe: 'local' })
.then((user) => showTodos(user.username))
.catch((e) => document.getElementById('login-error').innerHTML = e)
}
function handleSignUp(e) {
e.preventDefault()
const username = document.getElementById('signup-username').value
const password = document.getElementById('signup-password').value
userbase.signUp({ username, password, rememberMe: 'local' })
.then((user) => showTodos(user.username))
.catch((e) => document.getElementById('signup-error').innerHTML = e)
}
function handleLogout() {
userbase.signOut()
.then(() => showAuth())
.catch((e) => document.getElementById('logout-error').innerText = e)
}
function showAuth() {
document.getElementById('todo-view').style.display = 'none'
document.getElementById('auth-view').style.display = 'block'
document.getElementById('login-username').value = ''
document.getElementById('login-password').value = ''
document.getElementById('login-error').innerText = ''
document.getElementById('signup-username').value = ''
document.getElementById('signup-password').value = ''
document.getElementById('signup-error').innerText = ''
}
function showTodos(username) {
document.getElementById('auth-view').style.display = 'none'
document.getElementById('todo-view').style.display = 'block'
// reset the todos view
document.getElementById('username').innerHTML = username
document.getElementById('todos').innerText = ''
document.getElementById('db-loading').style.display = 'block'
document.getElementById('db-error').innerText = ''
userbase.openDatabase({ databaseName: 'todos', changeHandler })
.catch((e) => document.getElementById('db-error').innerText = e)
}
function changeHandler(items) {
document.getElementById('db-loading').style.display = 'none'
const todosList = document.getElementById('todos')
if (items.length === 0) {
todosList.innerText = 'Empty'
} else {
// clear the list
todosList.innerHTML = ''
// render all the to-do items
for (let i = 0; i < items.length; i++) {
// build the todo delete button
const todoDelete = document.createElement('button')
todoDelete.innerHTML = 'X'
todoDelete.style.display = 'inline-block'
todoDelete.onclick = () => {
userbase.deleteItem({ databaseName: 'todos', itemId: items[i].itemId })
.catch((e) => document.getElementById('add-todo-error').innerHTML = e)
}
// build the todo checkbox
const todoBox = document.createElement('input')
todoBox.type = 'checkbox'
todoBox.id = items[i].itemId
todoBox.checked = items[i].item.complete ? true : false
todoBox.onclick = (e) => {
e.preventDefault()
userbase.updateItem({ databaseName: 'todos', itemId: items[i].itemId, item: {
'todo': items[i].item.todo,
'complete': !items[i].item.complete
}})
.catch((e) => document.getElementById('add-todo-error').innerHTML = e)
}
// build the todo label
const todoLabel = document.createElement('label')
todoLabel.innerHTML = items[i].item.todo
todoLabel.style.textDecoration = items[i].item.complete ? 'line-through' : 'none'
// append the todo item to the list
const todoItem = document.createElement('div')
todoItem.appendChild(todoDelete)
todoItem.appendChild(todoLabel)
todoItem.appendChild(todoBox)
todosList.appendChild(todoItem)
}
}
}
function addTodoHandler(e) {
e.preventDefault()
const todo = document.getElementById('add-todo').value
userbase.insertItem({ databaseName: 'todos', item: { 'todo': todo }})
.then(() => document.getElementById('add-todo').value = '')
.catch((e) => document.getElementById('add-todo-error').innerHTML = e)
}
document.getElementById('signup-form').addEventListener('submit', handleSignUp)
document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
document.getElementById('login-form').addEventListener('submit', handleLogin)
document.getElementById('todo-view').style.display = 'none'
document.getElementById('logout-button').addEventListener('click', handleLogout)
document.getElementById('auth-view').style.display = 'none'
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
