Creating a Form for Task Addition in Svelte

Welcome to the third lesson of our "Building A Kanban Board" course! In our previous lessons, we set up our task store using Svelte's Runes API and created the visual components to display our tasks in a Kanban board layout. Now it's time to make our application interactive by allowing users to add new tasks.

A key feature of any task management application is the ability for users to create new tasks. Without this functionality, our Kanban board would be static and not very useful in real-world scenarios. By adding a form component, we'll transform our application from a simple display of tasks to an interactive tool that users can use to manage their work.

By the end of this lesson, you'll understand how to:

• Enhance our task store with functionality to add new tasks
• Create a form component with proper validation
• Manage form state using Svelte's Runes
• Connect user input to our application state

Let's get started by adding the necessary functionality to our task store!

In our first lesson, we created a task store that manages our application's state. Now, we need to enhance this store with the ability to add new tasks. Let's update our taskStore.svelte.js file to include this functionality:

// Create initial state with $state
export const tasks = $state([
  { id: 1, title: 'Learn Svelte 5', description: 'Study the new Runes API', status: 'todo' },
  { id: 2, title: 'Design components', description: '', status: 'todo' },
  { id: 3, title: 'Build Kanban board', description: 'Create the main layout', status: 'inprogress' },
  { id: 4, title: 'Setup project', description: 'Initialize SvelteKit', status: 'done' }
]);

// Derive filtered tasks for each column
const todoTasks = $derived(tasks.filter(task => task.status === 'todo'));
const inProgressTasks = $derived(tasks.filter(task => task.status === 'inprogress'));
const doneTasks = $derived(tasks.filter(task => task.status === 'done'));

export const getTodoTasks = () => todoTasks;
export const getInProgressTasks = () => inProgressTasks;
export const getDoneTasks = () => doneTasks;

// Function to add a new task
export function addTask(title, description = '') {
  const newTask = {
    id: Date.now(),
    title,
    description,
    status: 'todo'
  };
  
  tasks.push(newTask);
  return newTask;
}