app.js

// App Data
const todos = [
    { title: 'Todo 1', completed: false },
    { title: 'Todo 2', completed: false },
    { title: 'Todo 3', completed: false },
    { title: 'Todo 4', completed: false },
    { title: 'Todo 5', completed: false }
]

// AlpineJS App
const app = document.getElementById('app')

app.innerHTML = `
    <div class="container">
        <h1>Todo List</h1>
        <ol>
            <li v-for="todo in todos" x-transition>
                <Checkbox v-model="todo.completed" @toggle="completeTodo(todo)" />
                {{ todo.title }}
                {{ todo.completed ? 'done' : 'to-do' }}
            </li>
        </ol>
        <div class="footer">
            <p>{{ countdown }} seconds left</p>
        </div>
        <button x-data="{ show: true }" x-show="show" x-on:click="show = false">Stop Timer</button>
    </div>
`

// Completed Todo List
const completedTodos = todos.filter((todo) => todo.completed)
const completedTodosList = document.getElementById('completedTodos')

completedTodosList.innerHTML = `
    <div class="container">
        <h1>Completed Todos</h1>
        <ol>
            <li v-for="todo in completedTodos" x-transition>
                <Checkbox v-model="todo.completed" @toggle="completeTodo(todo)" />
                {{ todo.title }}
                {{ todo.completed ? 'done' : 'to-do' }}
            </li>
        </ol>
    </div>
`

// Start Timer
const timer = 10
const countdown = document.getElementById('countdown')

countdown.innerHTML = `
    <div class="container">
        <h1>Timer</h1>
        <p>${timer} seconds left</p>
    </div>
`