Create a simple To-Do List application using Lightning Web Components (LWC). The application should consist of two LWCs: one for adding tasks and one for displaying the list of tasks. Use a component event to pass data (tasks) from the task addition component to the task list component. 
The task is not getting updated in the tasklist
task addition.html
 
<template>
    <lightning-card title="Add Task">
        <div class="slds-m-around_medium">
            <lightning-input label="Task Name" value={taskName} onchange={handleTaskNameChange}></lightning-input>
            <lightning-button label="Add" onclick={addTask}></lightning-button>
        </div>
    </lightning-card>
</template>
task addition .js
import { LightningElement, track } from 'lwc';
export default class TaskAddition extends LightningElement {
    @track taskName = '';
    handleTaskNameChange(event) {
        this.taskName = event.target.value;
    }
    addTask() {
        if (this.taskName) {
            // Fire a custom event with the task name as the detail
            const taskEvent = new CustomEvent('taskadded', {
                detail: this.taskName
            });
            this.dispatchEvent(taskEvent);
            this.taskName = ''; // Clear the input field
        }
    }
}
 
Taks addition .xml
 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
 
pubsub.js
const listeners = {};
export function registerListener(eventName, callback, thisArg) {
    if (!listeners[eventName]) {
        listeners[eventName] = [];
    }
    listeners[eventName].push({ callback, thisArg });
}
export function unregisterAllListeners(thisArg) {
    for (const eventName in listeners) {
        listeners[eventName] = listeners[eventName].filter(listener => listener.thisArg !== thisArg);
    }
}
export function fireEvent(eventName, eventData) {
    if (listeners[eventName]) {
        listeners[eventName].forEach(listener => {
            try {
                listener.callback.call(listener.thisArg, eventData);
            } catch (error) {
                console.error(`Error in handling event ${eventName}: ${error}`);
            }
        });
    }
}
task added event js
import { LightningElement } from 'lwc';
export default class TaskAddedEvent extends LightningElement {}
const taskAddedEvent = new Event('taskadded');
export { taskAddedEvent };
Tasklist.html
<template>
    <lightning-card title="Task List">
        <div class="slds-m-around_medium">
            <ul class="slds-list_ordered">
                <!-- Loop through tasks and display them -->
                <template for:each={tasks} for:item="task">
                    <li key={task.id}>{task.name}</li>
                </template>
            </ul>
        </div>
    </lightning-card>
</template>
tasklist.js
 
import { LightningElement, track } from 'lwc';
import { registerListener, unregisterAllListeners } from 'c/pubsub';
export default class TaskList extends LightningElement {
    @track tasks = [];
    connectedCallback() {
        // Subscribe to the custom event 'taskadded'
        registerListener('taskadded', this.handleTaskAdded, this);
    }
    disconnectedCallback() {
        // Unsubscribe from the custom event when the component is destroyed
        unregisterAllListeners(this);
    }
    handleTaskAdded(event) {
        const newTask = event.detail;
        console.log('Received task:', newTask);
        // Add the new task to the list
        this.tasks = [this.tasks, newTask];
}
}
tasklist.xml
 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
Show Less