We Keep Coding

Cannot read properties of null (reading 'forEach') problem

I was working on the todo list project, but while transferring the values ​​written to the local storage to the UI, I encountered this error. I tried all the suggestions, but I could not do anything. What should I do?
Here is my code:
const form = document.querySelector("#todo-form");
const todoInput = document.querySelector("#todo");
const todoList = document.querySelector(".list-group");
const firstCard = document.querySelectorAll(".card-body")[0];
const secondCard = document.querySelectorAll(".card-body")[1];
const filter = document.querySelector("#filter");
const clearButton = document.querySelector("#clear-todos");
eventListeners();
function eventListeners() {
form.addEventListener("submit", addTodo);
document.addEventListener("DOMContentLoaded", loadAllTodosToUI);
}
function loadAllTodosToUI() {
let todos = getTodosFromStorage();
todos.forEach(function (todo) {
addTodoToUI(todo)
});
}
function addTodo(e) {
const newTodo = todoInput.value.trim();
if (newTodo === "") {
showAlert("danger", "bir todo gir");
} else {
addTodoToUI(newTodo);
addTodoToStorage(newTodo);
showAlert("success", "başarıyla eklendi");
}
e.preventDefault();
}
function getTodosFromStorage() {
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem(todos));
}
return todos;
}
function addTodoToStorage(newTodo) {
let todos = getTodosFromStorage();
todos.push(newTodo);
localStorage.setItem("todos", JSON.stringify(todos));
}
function showAlert(type, message) {
const alert = document.createElement("div");
alert.className = `alert alert-${type}`;
alert.textContent = message;
firstCard.appendChild(alert);
setTimeout(() => {
alert.remove();
}, 1000);
}
function addTodoToUI(newTodo) {
const listItem = document.createElement("li");
const link = document.createElement("a");
link.href = "#";
link.className = "delete-item";
link.innerHTML = "<i class = 'fa fa-remove'></i>";
listItem.className = "list-group-item d-flex justify-content-between";
listItem.appendChild(document.createTextNode(newTodo));
listItem.appendChild(link);
todoList.appendChild(listItem);
todoInput.value = "";
}
The console says that there is an error directly related to forEach, but the value I entered in the local storage is not null, but I get this error

LocalStorage Clearing when trying to remove a single item

I'm having an issue with localStorage. Whenever the X (e.target.tagName === 'I') icon is clicked to remove one single item from localStorage, all of localStorage is cleared. What's going on? Any suggestions will be appreciated.
Javascript File
const todoInput = document.querySelector('#todo-item')
const todoList = document.querySelector('.todo-list')
const form = document.querySelector('form')
const todos = []
const savedTodos = JSON.parse(localStorage.getItem('todos')) || []
for (let i = 0; i < savedTodos.length; i++) {
let newTodo = document.createElement('LI')
newTodo.innerText = savedTodos[i]
newTodo.classList.add('todo-item')
const deleteBtn = document.createElement('I')
deleteBtn.classList.add('fa-sharp', 'fa-solid', 'fa-square-xmark')
newTodo.append(deleteBtn)
todoList.appendChild(newTodo)
}
form.addEventListener('submit', function (e) {
// e.preventDefault()
const newTodo = document.createElement('li')
newTodo.innerText = todoInput.value
newTodo.classList.add('todo-item')
const deleteBtn = document.createElement('i')
deleteBtn.classList.add('fa-sharp', 'fa-solid', 'fa-square-xmark')
newTodo.append(deleteBtn)
todoList.appendChild(newTodo)
todoInput.value = ''
todos.push(newTodo.innerText)
console.log(newTodo.innerText)
localStorage.setItem('todos', JSON.stringify(todos))
})
function removeFromStorage(itemToRemove) {
for (let i = 0; i < todos.length; i++) {
if (todos[i] === itemToRemove) {
todos.splice(i, 1)
}
}
localStorage.setItem('todos', JSON.stringify(todos))
}
todoList.addEventListener('click', function (e) {
// When this line of code is run all local storage is deleted
if (e.target.tagName === 'I') {
e.target.parentElement.remove()
removeFromStorage(e.target.parentElement.innerText)
} else if (e.target.tagName === 'LI') {
e.target.classList.toggle('todo-complete')
}
console.log(e.target.innerText)
})

Getting Duplicates on To Do List, yet local storage unaffected

I'm new to javascript and I am trying to use local storage to save user input. With the code as it is right now, I get the user input saved to local storage, but the list does not save when refreshing the page. Also, the user input appends to the to do list multiple times. Thanks for taking a look.
window.addEventListener('load', () => {
const form = document.querySelector('#new-task-form');
const input = document.querySelector('#new-task-input');
const listElement = document.querySelector('#tasks');
todos = JSON.parse(localStorage.getItem('todos')) || [];
console.log(todos)
form.addEventListener('submit', (e) => {
e.preventDefault();
const task = input.value;
if(!task) {
alert('You definitely have something to do...')
return
}
const todo = {
content: task,
id: Math.floor(Math.random() * 100000)
}
todos.push(todo);
localStorage.setItem('todos', JSON.stringify(todos));
todos.forEach(todo => {
const taskElement = document.createElement('div');
taskElement.classList.add('task');
const taskContentElement = document.createElement('div');
taskContentElement.classList.add("content");
taskElement.appendChild(taskContentElement);
const taskInputElement = document.createElement("input")
taskInputElement.classList.add("text");
taskInputElement.type = "text";
taskInputElement.value = task;
taskInputElement.setAttribute('readonly', 'readonly');
taskContentElement.appendChild(taskInputElement);
const taskActionsElement = document.createElement('div');
taskActionsElement.classList.add("actions");
const taskEditElement = document.createElement('button');
taskEditElement.classList.add('edit');
taskEditElement.innerHTML = "Edit";
const taskDeleteElement = document.createElement('button');
taskDeleteElement.classList.add('delete');
taskDeleteElement.innerHTML = "Delete";
taskActionsElement.appendChild(taskEditElement);
taskActionsElement.appendChild(taskDeleteElement);
taskElement.appendChild(taskActionsElement);
listElement.appendChild(taskElement);
input.value = '';
taskEditElement.addEventListener('click', () => {
if (taskEditElement.innerText.toLowerCase() == 'edit') {
taskInputElement.removeAttribute('readonly');
taskInputElement.focus();
taskEditElement.innerText = "Save";
localStorage.setItem("todos", JSON.stringify(todos));
} else {
taskInputElement.setAttribute('readonly', 'readonly');
taskEditElement.innerText = 'Edit';
}
});
taskDeleteElement.addEventListener('click', () => {
todos = todos.filter(t => t != todo);
localStorage.setItem('todos', JSON.stringify(todos));
listElement.removeChild(taskElement);
});
});
});
});
The user input comes up multiple times when added to the list, depending on when added to the array. I was hoping for it to come up one time, and for it to be a normal list.

Local storage not deleting data until page is refreshed

I am pretty much new to Javascript and working on this simple ToDo app that uses local storage to persist data. However, the Delete function can only delete from local storage when refreshed the page. What could be causing this bug? I have attached my code below
I tried commenting on the e.preventDefault() on the form but the page kept on reloading when a task is submitted.
// Selectors
const ul = document.querySelector('.todo-list');
const todoContainer = document.querySelector('.todo-container');
const clearButton = document.createElement('button');
clearButton.classList.add('clear-button');
clearButton.textContent = 'Clear all Completed';
const form = document.querySelector('.form');
const taskInput = document.querySelector('.todo-input');
let todoTasks = JSON.parse(localStorage.getItem('todo')) || [];
let id = todoTasks.length + 1;
const createElement = ({ description, completed = true, index }) => {
const todoItem = document.createElement('li');
todoItem.classList.add('todo-list-item');
todoItem.setAttribute('id', index);
todoItem.innerHTML = `
<input type="checkbox" class="check" value="${completed}">
<button class="hidden" name="${index}"></button>
<span class="todo-item">${description}</span>
<button name='eclips'><i class="fas fa-ellipsis-v"></i></button>
<button name='delete'><i class="fas fa-trash"></i></button>
`;
ul.appendChild(todoItem);
todoContainer.appendChild(ul);
todoContainer.appendChild(clearButton);
};
// get each todo task
todoTasks.forEach(createElement);
// Function that add todo
const addTask = (description, completed, ind) => {
const input = taskInput.value;
todoTasks.push({
description: input,
completed: false,
index: ind,
});
localStorage.setItem('todo', JSON.stringify(todoTasks));
return { description, completed, ind };
};
const checkTodo = (e) => {
const lineText = e.target.nextElementSibling.nextElementSibling.nextElementSibling;
if (lineText.style.textDecoration === 'line-through') {
lineText.style.textDecoration = 'none';
} else {
lineText.style.textDecoration = 'line-through';
lineText.classList.toggle('completed');
}
};
// Function that delete todo
const handleDeleteAndCheck = (e) => {
const item = e.target;
if (e.target.classList[1] === 'fa-trash') {
const todo = item.parentElement.parentElement;
const targetId = item.parentElement.parentElement.id;
todoTasks = todoTasks.filter((task) => task.index !== +targetId);
localStorage.setItem('todo', JSON.stringify(todoTasks));
todo.remove();
}
if (e.target.classList === 'check') {
checkTodo();
}
};
// Function that Edit todo
const editTask = (e) => {
const item = e.target;
if (item.classList[0] === 'todo-item') {
item.contentEditable = true;
item.style.display = 'block';
}
};
const check = document.querySelectorAll('.fa-check-square');
const index = document.querySelectorAll('#index');
form.addEventListener('submit', (e) => {
e.preventDefault();
const input = taskInput.value;
const checkValue = check.value;
// const indexValue = index.value;
const newTask = addTask(input, checkValue, id);
createElement(newTask);
// location.reload();
taskInput.value = '';
id += 1;
});
ul.addEventListener('click', handleDeleteAndCheck);
ul.addEventListener('click', editTask);

Here please change the statement with this in your handleDeleteAndCheck() method. It will remove the local storage at that time.
localStorage.removeItem('todo');

Writing tests with Jest for vanilla JS

I followed Dev Eds course on creating a todo list, but now I want to write some tests to test the code. I want to use Jest but I'm not sure how to write a test to make sure that a todo is created, and deleted.
I've added the app.js file below (there is are html/css files as well). My attempt at writing a test is under the app.js file.
//Selectors
const todoInput = document.querySelector('.todo-input');
const todoButton = document.querySelector('.todo-button');
const todoList = document.querySelector('.todo-list');
const filterOption = document.querySelector('.filter-todo');
//Event Listeners
todoButton.addEventListener('click', addTodo);
todoList.addEventListener('click', deleteCheck);
filterOption.addEventListener('change', filterTodo);
//Functions
function addTodo(event){
//console.log(event.target);
// prevent form from submitting
event.preventDefault();
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//create LI
const newTodo = document.createElement('li');
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo-item');
todoDiv.appendChild(newTodo);
// Checkmark button
const completedButton = document.createElement('button');
completedButton.innerHTML = '<i class="fas fa-check"></i>'
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
// Delete button
const deleteButton = document.createElement('button');
deleteButton.innerHTML = '<i class="fas fa-trash"></i>'
deleteButton.classList.add("delete-btn");
todoDiv.appendChild(deleteButton);
// Append to list
todoList.appendChild(todoDiv);
// clear todo input value
todoInput.value = "";
}
function deleteCheck(e){
//console.log(e.target);
const item = e.target;
if(item.classList[0] === 'delete-btn'){
const todo = item.parentElement;
// animation
todo.classList.add("fall");
todo.addEventListener("transitionend", function() {
todo.remove();
});
}
// check mark
if(item.classList[0] === "complete-btn"){
const todo = item.parentElement;
todo.classList.toggle('completed');
}
}
function filterTodo(e) {
const todos = todoList.childNodes;
todos.forEach(function(todo) {
switch (e.target.value) {
case "all":
todo.style.display = "flex";
break;
case "completed":
if (todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "uncompleted":
if (!todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
}
});
}
The first test I created was to check if a todo is created
const todo = require('./app')
test('add a todo', () => {
expect(todo("buy milk".toBe("buy milk")))
})
But the test failed.

First you need to decide whether you're testing the UI or the system/engine the UI wraps around. Besides the missing ) after todo("buy milk", you are trying to test the engine not the UI.
In your case you should look into splitting the actual to do engine code from the UI layer. Then you can test CRUD of the to do.
Lets take a basic example:
const Todo = function() {
let list = [];
let items = {};
return {
create: function(task) {
let id = Date.now();
items[id] = { id, task };
list.push(id);
return id;
},
read: function(id) {
return items[id];
},
readAll: function() {
return list.map(id => items[id]);
},
delete: function(id) {
list = list.filter(itemId => itemId !== id);
delete items[id];
return true;
}
}
}
This is a testable todo engine and tests would look like this (using mocha and chai):
const { expect } = require("chai");
const Todo = require("./Todo.js"); // replace with your file
describe("Todo", function() {
const todo = Todo();
it("should create a todo item and return an ID", function() {
let id = todo.create("My first todo");
expect(id).to.be.a("integer");
});
it("should create a todo item with text 'My second todo'", function() {
let id = todo.create("My second todo");
let text = todo.read(id);
expect(text).to.equal("My second todo");
});
it("should return an array with two todo items", function() {
let items = todo.readAll();
// you can also test for exact strings
expect(items.length).to.equal(2);
});
it("should delete first item", function() {
let items = todo.readAll();
let id = items[0].id;
todo.delete(id);
items = todo.readAll();
expect(items.length).to.equal(1);
});
});
When you get to front-end testing, you will use a tool like Cypress or Puppeteer