appblocks
Version:
A lightweight javascript library for building micro apps for the front-end.
140 lines (126 loc) • 3.66 kB
HTML
<html lang="en">
<head>
<title>My First AppBlock</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
#app { max-width: 400px; margin: 0 auto; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
</style>
<style>
.field-valid { border-color: green; background: #e8f5e9; }
.field-invalid { border-color: red; background: #ffebee; }
</style>
</head>
<body>
<div id="app"></div>
<template id="appTemplate">
<div class="todo-app">
<h1>My Todos</h1>
<div class="add-todo">
<input
id="new-todo"
type="text"
placeholder="What needs to be done?"
value="{data.newTodoText}">
<button id="add-btn">Add</button>
</div>
<div class="filters">
<button class="filter-btn" data-filter="all">All</button>
<button class="filter-btn" data-filter="active">Active</button>
<button class="filter-btn" data-filter="completed">Completed</button>
</div>
<ul class="todo-list">
<li c-for="todo in getFilteredTodos()">
<input
type="checkbox"
class="toggle-btn"
data-id="{todo.id}"
c-if="todo.done"
checked>
<input
type="checkbox"
class="toggle-btn"
data-id="{todo.id}"
c-ifnot="todo.done">
<span class="todo-text">{todo.text}</span>
<button class="remove-btn" data-id="{todo.id}">×</button>
</li>
</ul>
<p c-if="getFilteredTodos().length == 0">No todos to display!</p>
</div>
</template>
<script src="../dist/appblocks.min.js"></script>
<script>
var app = new AppBlock({
el: document.getElementById('app'),
template: document.getElementById('appTemplate'),
data: {
todos: [
{ id: 1, text: 'Learn AppBlocks', done: false },
{ id: 2, text: 'Build an app', done: false }
],
newTodoText: '',
filter: 'all' // 'all', 'active', 'completed'
},
methods: {
addTodo(self) {
if (!self.data.newTodoText.trim()) return;
var newTodo = {
id: Date.now(),
text: self.data.newTodoText,
done: false
};
self.setData({
todos: self.data.todos.concat(newTodo),
newTodoText: ''
});
},
toggleTodo(self, id) {
var updated = self.data.todos.map(function(todo) {
if (todo.id === id) {
return { ...todo, done: !todo.done };
}
return todo;
});
self.setData({ todos: updated });
},
removeTodo(self, id) {
var updated = self.data.todos.filter(function(todo) {
return todo.id !== id;
});
self.setData({ todos: updated });
},
getFilteredTodos(self) {
if (self.data.filter === 'active') {
return self.data.todos.filter(function(todo) { return !todo.done; });
}
if (self.data.filter === 'completed') {
return self.data.todos.filter(function(todo) { return todo.done; });
}
return self.data.todos;
}
},
events: {
'click #add-btn': function() {
this.Parent.methods.addTodo(this.Parent);
},
'input #new-todo': function(e, el) {
this.Parent.setData({ newTodoText: el.value });
},
'click .toggle-btn': function(e, el) {
var id = parseInt(el.dataset.id);
this.Parent.methods.toggleTodo(this.Parent, id);
},
'click .remove-btn': function(e, el) {
var id = parseInt(el.dataset.id);
this.Parent.methods.removeTodo(this.Parent, id);
},
'click .filter-btn': function(e, el) {
this.Parent.setData({ filter: el.dataset.filter });
}
}
});
</script>
</body>
</html>