Full-Stack Development

// Stack.js reactive counter implementation
const counterState = Stack.createState(0);
Stack.createEffect(() => {
  document.querySelector('.counter-display').textContent = counterState.value;
});
                        

// Stack.js todo component
const TodoApp = Stack.component({
  state: {
    todos: []
  },
  methods: {
    addTodo(text) {
      this.state.todos.push({ id: Date.now(), text, completed: false });
    },
    toggleTodo(id) {
      const todo = this.state.todos.find(t => t.id === id);
      todo.completed = !todo.completed;
    }
  }
});
                        

// Stack.js theme manager
const ThemeManager = Stack.service({
  state: {
    currentTheme: 'dark'
  },
  methods: {
    setTheme(theme) {
      this.state.currentTheme = theme;
      document.body.setAttribute('data-theme', theme);
    }
  }
});