Добавлять конкретную задачу в конкретный список в тудушке

Question

Пишу тудушку, на данный момент могу добавлять новые задачи (справа на скрине), удалять их и зачеркивать их, если задача уже решена, также слева есть сайдбар в котором я могу создавать разные списки для будущего хранения в них задач, и вот вопрос как раз состоит в этом: как сделать так чтобы при выбранном списке слева (список загорается розоватым) задачи которые я создаю справа добавлялись именно в этот список и хранились в нем, соответственно если я выбираю какой то список, то справа должны высвечиваться задачи которые в этом списке находятся.

Разметка HTML

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ToDoApp</title>
    <link rel="stylesheet" href="styles/style.css" />
    <link rel="stylesheet" href="styles/sidebar.css">
  </head>
  <body>
    <main>

  <aside class="sidebar">
         <div class="sidebar-list-container">
        <h1 class="todoapp-header">ToDoApp</h1>
        <div class="sidebar-list">
        </div>
      </div>
        <button class="sidebar-button">New List</button>
  </aside>

  <div class="container">
      
    <h1 class="todolist-header">ToDo List</h1>

    <div class="wrapper">
      <input class="task-input" type="text" placeholder="New Task" />
      <button type="button" class="adding-button">Add</button>
    </div> 
    
    <div class="items-list"></div>

    <script src="app.js"></script>
    <script src="sidebar.js"></script>
  </div>
</main>
  </body>
</html>

Код JS для добавления задач справа


const list = document.querySelector(".items-list");
const button = document.querySelector(".adding-button");
const input = document.querySelector(".task-input");


const Task = (id, text, checked, onDelete, onCheckboxChange) => {
    const task = document.createElement('div')
    const textContainer = document.createElement('div');
    const elementContainer = document.createElement('div');
    const deleteButton = document.createElement('button')
    const checkbox = document.createElement('input');

    checkbox.setAttribute('type', 'checkbox');
    checkbox.classList.add('checkbox-style');
    checkbox.onclick = onCheckboxChange;
    checkbox.checked = checked;

    textContainer.innerHTML += text;
    if (checked) {
        textContainer.classList.add('checkbox-checked');
    }
    textContainer.classList.add('task-text');

    elementContainer.appendChild(checkbox);
    elementContainer.appendChild(textContainer);
    elementContainer.classList.add('element-container');

    deleteButton.classList.add('delete-button');
    deleteButton.onclick = onDelete;

    task.classList.add('task');
    task.id = id;
    task.appendChild(elementContainer);
    task.appendChild(deleteButton);

    return task;
}

let tasks = [];

const addTask = (id, text) => {
    tasks.push({ id, text, checked: false });
    tasksRender();
}

const deleteTask = (id) => {
    tasks = tasks.filter(task => task.id !== id);
    tasksRender();
}

const toggleTask = (id) => {
    tasks.forEach(task => {
        if (task.id === id) {
            task.checked = !task.checked;
        }
    })
    tasksRender();
}


const tasksRender = () => {
    list.innerHTML = '';
    tasks.forEach(task => list.appendChild(Task(task.id, task.text, task.checked, () => deleteTask(task.id), () => toggleTask(task.id))));
};


button.addEventListener('click', (e) => {
    e.preventDefault();
    if (input.value) addTask(Math.random(), input.value);
    input.value = '';
})

input.addEventListener('keydown', function(e) {
    if (e.keyCode === 13 && input.value) 
      {
        addTask(Math.random(), input.value);
        input.value = '';
      }
    });

tasksRender();

Код JS для добавления списков в сайдбаре слева

let sidebarList = document.querySelector('.sidebar-list');
const sidebarButton = document.querySelector('.sidebar-button');

const List = (id, name, selected, onDelete, onChange, onSelect) => {
    const listElement = document.createElement('div');
    const listElementText = document.createElement('div');
    const listButtonContainer = document.createElement('div');
    const listEditButton = document.createElement('button');
    const listDeleteButton = document.createElement('button');

    listElement.classList.add('sidebar-list-element');
    listElementText.classList.add('sidebar-list-element-text');
    listButtonContainer.classList.add('sidebar-list-button-container');
    listEditButton.classList.add('edit-list-button');
    listDeleteButton.classList.add('delete-list-button');

    if (selected) {
        listElement.classList.add('sidebar-list-element-active');
    }

    listButtonContainer.appendChild(listEditButton);
    listButtonContainer.appendChild(listDeleteButton);
    listElement.appendChild(listElementText);
    listElement.appendChild(listButtonContainer);
    sidebarList.appendChild(listElement);


    listElementText.textContent += name;

    listDeleteButton.onclick = onDelete;

    listElement.id = id;

    listElement.addEventListener('click', onSelect);
    
    listEditButton.onclick = (e) => {

        e.stopPropagation()
        const buffer = listElementText.innerText;
        const editInput = document.createElement('input');

        listElementText.innerText = '';
        listElementText.appendChild(editInput);

        editInput.setAttribute('type', 'text');
        editInput.value = buffer;
        editInput.focus();

        editInput.onclick = (e) => {
            e.stopPropagation();
        }


        editInput.addEventListener('keydown', function(e) {
            if (e.keyCode === 13) {
                onChange(editInput.value);
            }
        })

        editInput.addEventListener('blur', () => {
            onChange(editInput.value);
        })

    }

    return listElement;

}

let lists = [];
let selectedList = [];


const addList = (id, name = 'New list') => {
    lists.push({id, name});
    listsRender();
}

const deleteList = (id) => {
    lists = lists.filter(list => list.id !== id);
    listsRender();
}

const changeList = (id, name = 'New list') => {
    lists.forEach(list => {
        if (list.id === id) {
            list.name = name;
        }
    })
    listsRender();
}

const selectList = (id) => {
    lists.forEach(list => {
        if (list.id === id) {

            selectedList = list;
        }
    })
    listsRender();
}

const listsRender = () => {
    sidebarList.innerHTML = '';
    lists.forEach(list => {
        let isListSelected = selectedList.id === list.id;
        sidebarList.appendChild(List(list.id, list.name, 
            isListSelected,

            () => deleteList(list.id), 
        
            (name) => changeList(list.id, name),

            () => selectList(list.id)

            ));
    }
        
        );
};

sidebarButton.addEventListener('click', (e) => {
    e.preventDefault();
    addList(Math.random());

     listsRender();
    
})

listsRender();

Answer 1

Помещаем переменную в глобальную область видимости (в html.head)

<script>
    let selectedList = [];
</script>

Файл sidebar.js. Удаляем let selectedList = []; и дописываем/меняем:

const listListener = document.querySelector(".items-list");

const addList = (id, name = 'New list') => {
  lists.push({id, name});
  listsRender();
  selectList();
}

const event = new Event('listSelect');

const selectList = (id) => {
  lists.forEach(list => {
    if (list.id === id) {
      selectedList = list;
    }
  });
  listListener.dispatchEvent(event);
  listsRender();
}

Файл app.js

const addTask = (id, text) => {
  tasks.push({ id, text, checked: false, taskList: selectedList.id });
  tasksRender();
}

const tasksRender = () => {
  list.innerHTML = '';
  const taskFilter = tasks.filter((item) => {
    return item.taskList === selectedList.id;
  })
  taskFilter.forEach(task => list.appendChild(Task(task.id, task.text, task.checked, () => deleteTask(task.id), () => toggleTask(task.id))));
};

list.addEventListener('listSelect', function () {
  tasksRender();
})

БЛОГ НА HUSL

Добавлять конкретную задачу в конкретный список в тудушке

Ответы (1 шт):