Created New To Do Example

.gitignore

@@ -1 +1,2 @@
 node_modules/
+package-lock.json

src/components/to-do/index.html

@@ -0,0 +1,24 @@
+<index:>
+  <h1>ToDo List</h1>
+  <ul>
+    <!-- Loop through tasks and display them -->
+    {{each tasks as #item, #index}}
+    <li>
+        <!-- Display task text -->
+        <span class="{{ #item.completed ? 'completed-task' : '' }}">{{#item.text}}</span>
+
+        <!-- Button to mark task as completed -->
+        <button on-click="completeTask(#index)" if="{{!item.completed}}">{{ #item.completed ? 'Completed' : 'Complete' }}</button>
+
+        <!-- Button to remove task -->
+        <button on-click="removeTask(#index)">Remove</button>
+      </li>
+      {{/each}}
+    </ul>
+
+
+  <!-- Input to add new task -->
+  <input type="text" placeholder="Add new task..." value="{{newTaskText}}">
+  <button on-click="addTask({ text: newTaskText, completed: false })">Add Task</button>
+
+

src/components/to-do/index.js

@@ -0,0 +1,45 @@
+_ = require('lodash')
+
+class ToDo {
+  create() {
+    this.$tasks = this.model.at('tasks')
+
+    // Initialize tasks data
+    this.$tasks.set([])
+    console.log("Tasks initialized:", this.$tasks.get())
+  }
+
+  addTask(task) {
+    console.log("Adding task:", task)
+    // Add a new task to the list
+    this.$tasks.push(task)
+    console.log("Tasks after adding:", this.$tasks.get())
+  }
+
+  removeTask(index) {
+    // Remove task at the given index
+    const tasks = this.$tasks.get()
+    tasks.splice(index, 1)
+    this.$tasks.set(tasks)
+  }
+
+  completeTask(index) {
+    const tasks = this.$tasks.get()
+    tasks[index].completed = !tasks[index].completed; // Toggle the completion state
+    this.$tasks.set(tasks)
+    console.log("Tasks after adding:", this.$tasks.get())
+
+  }
+
+  updateTask(index, updatedTask) {
+    // Update task at the given index
+    const tasks = this.$tasks.get()
+    tasks[index] = updatedTask
+    this.$tasks.set(tasks)
+  }
+}
+
+ToDo.prototype.name = 'to-list'
+ToDo.prototype.view = __dirname
+
+module.exports = ToDo

src/components/welcome-page/index.html

@@ -19,6 +19,7 @@ <h2>
     <!-- https://derbyjs.com/docs/derby-0.10/views/template-syntax/blocks#conditionals -->
     <ol>
         <li><a href="/hello-world">Hello World</a></li>
+        <li><a href="/to-do">To do</a></li>
         <li><a href="/racer-basics">Racer Basics</a></li>
         <li><a href="/components-in-action-demo">Components in Action Demo</a></li>
         <li><a href="/collaborative-note-editor">Collaborative Note Editor</a></li>

src/index.css

@@ -7,3 +7,7 @@ body {
 .border {
   border-color: #CCC;
 }
+
+.completed-task {
+  text-decoration: line-through;
+}

src/index.js

@@ -6,6 +6,7 @@ const derby = require('derby')
 const CollaborativeNoteEditor = require('./components/collaborative-note-editor')
 const ComponentsInActionDemo = require('./components/components-in-action-demo')
 const HelloWorld = require('./components/hello-world')
+const ToDo = require('./components/to-do')
 const PersistenceDemo = require('./components/persistence-demo')
 const PetDisplayComponent = require('./components/components-in-action-demo/pet-display-component')
 const RacerBasics = require('./components/racer-basics')
@@ -28,6 +29,7 @@ app.use(require('derby-debug'))
 app.component(CollaborativeNoteEditor)
 app.component(ComponentsInActionDemo)
 app.component(HelloWorld)
+app.component(ToDo)
 app.component(PersistenceDemo)
 app.component(PetDisplayComponent)
 app.component(RacerBasics)
@@ -47,6 +49,10 @@ app.get('/hello-world', (page) => {
   page.render(HelloWorld.prototype.name)
 })
 
+app.get('/to-do', (page) => {
+  page.render(ToDo.prototype.name)
+})
+
 app.get('/racer-basics', (page) => {
   page.render(RacerBasics.prototype.name)
 })