const todos = [];
// selecting :
const todoInput = document.querySelector(".todo-input");
const todoForm = document.querySelector(".todo-form");
const todoList = document.querySelector(".todoList");
const selectFilter = document.querySelector(".filter-todos");
// events
todoForm.addEventListener("submit",addNewTodo);
selectFilter.addEventListener("change", filterTodos);
// functions
function addNewTodo(e) {
e.preventDefault();
if (!todoInput.value) return null;
const newTodo = {
id: Date.now(),
createdAt: new Date().toISOString(),
title: todoInput.value,
isCompleted: false,
};
todos.push(newTodo);
createTodos(todos);
// create todos in DOM
todoList.innerHTML = result;
todoInput.value = "";
}
let result = "";
function createTodos(todos) {
todos.forEach((todo) => {
result+=`<li class="todo">
<p class="todo__title">${todo.title}</p>
<span class="todo__createdAt">${new Date(todo.createdAt).toLocaleDateString}</span>
<button data-todo-id="${todo.id}><i class="todo__check far fa-check-square"></i></button>
<button data-todo-id="${todo.id}><i class="todo__remove far fa-trash-alt"></i></button>
</li>`;
});
};
function filterTodos(e) {
const filter = e.target.value;
switch (filter) {
case "all" : {
createTodos(todos);
break;
}
case "completed" : {
const filteredTodos = todos.filter(t => t.isCompleted);
createTodos(filteredTodos);
break;
}
case "uncompleted" : {
const filteredTodos = todos.filter(t => !t.isCompleted);
createTodos(filteredTodos);
break;
}
default:
createTodos(todos);
}
}
type here
my program wont work and gives me this error ,Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at HTMLFormElement.addNewTodo (todo.js:33:24)
i tried chat-GPT and wasnt helpful
i tried declaring 'result' variable in foreach or outside of 'addNewTodo' function and didnt help