Scribd Logo
Upload

Welcome to Scribd!

  • MVC Constructor

    Uploaded by

    Desarrollo Indutanpas
    2 views2 pages
    This document defines a TaskView class that manages the display and interaction of tasks. The class constructor gets elements from the DOM and binds event handlers for adding, completing, and deleting tasks. The displayTasks method takes a tasks array and generates the list items, setting properties and classes for each task. Event handlers call functions passed into methods like bindAddTask to handle user interactions with tasks.

    Original Description:

    Original Title

    Mvc Constructor

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document defines a TaskView class that manages the display and interaction of tasks. The class constructor gets elements from the DOM and binds event handlers for adding, completing, and deleting tasks. The displayTasks method takes a tasks array and generates the list items, setting properties and classes for each task. Event handlers call functions passed into methods like bindAddTask to handle user interactions with tasks.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views2 pages

    MVC Constructor

    Uploaded by

    Desarrollo Indutanpas
    This document defines a TaskView class that manages the display and interaction of tasks. The class constructor gets elements from the DOM and binds event handlers for adding, completing, and deleting tasks. The displayTasks method takes a tasks array and generates the list items, setting properties and classes for each task. Event handlers call functions passed into methods like bindAddTask to handle user interactions with tasks.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    class TaskView {

    constructor() {

    this.taskList = document.getElementById('task-list');

    this.taskInput = document.getElementById('task-input');

    this.addTaskForm = document.getElementById('add-task-form');

    bindAddTask(handler) {

    this.addTaskForm.addEventListener('submit', event => {

    event.preventDefault();

    const taskName = this.taskInput.value;

    handler(taskName);

    this.taskInput.value = '';

    });

    bindCompleteTask(handler) {

    this.taskList.addEventListener('click', event => {

    if (event.target.tagName === 'LI') {

    const taskId = event.target.dataset.taskId;

    handler(taskId);

    });

    bindDeleteTask(handler) {

    this.taskList.addEventListener('click', event => {

    if (event.target.classList.contains('delete-button')) {

    const taskId = event.target.parentElement.dataset.taskId;


    handler(taskId);

    });

    displayTasks(tasks) {

    this.taskList.innerHTML = '';

    tasks.forEach(task => {

    const li = document.createElement('li');

    li.dataset.taskId = task.id;

    li.innerHTML = `

    <span>${task.name}</span>

    <button class="delete-button">Eliminar</button>

    `;

    if (task.completed) {

    li.classList.add('completed');

    this.taskList.appendChild(li);

    });

    You might also like