Here is my store and all functions working fine for delete , update and add new task.
const store = {
todos: [
{
id: '1',
title: 'Complete Task A',
completed: false,
},
{
id: '2',
title: 'Read Book',
completed: true,
},
],
};
const storeHandler = {
get(target, property) {
return target[property];
},
set(target, property, value) {
target[property] = value;
if (property == 'todos') {
window.dispatchEvent(new Event('todoschange'));
}
localStorage.setItem('store', JSON.stringify(store));
return true;
},
};
const storeProxy = new Proxy(store, storeHandler);
function addTodo(newTodo) {
console.log(newTodo);
storeProxy.todos = [...storeProxy.todos, newTodo];
}
function deleteTodo(id) {
storeProxy.todos = storeProxy.todos.filter((todo) => todo.id !== id);
}
function markAsDone(id, status) {
storeProxy.todos = storeProxy.todos.map((todo) =>
todo.id == id ? { ...todo, completed: status } : todo
);
}
export { addTodo, deleteTodo, markAsDone };
export default store;
Below is code related to app.js.
import render from './render.js';
import { addTodo, deleteTodo, markAsDone } from './store.js';
import store from './store.js';
window.addEventListener('todoschange', () => {
console.log('todoschange triggered!!!');
render();
});
// read and write to local storage
const dataFromStorage = JSON.parse(localStorage.getItem('store'));
if (dataFromStorage?.todos.length > 0) {
console.log(dataFromStorage.todos);
store.todos = dataFromStorage.todos;
console.log(store.todos);
} else {
console.log(store);
localStorage.setItem('store', JSON.stringify(store));
render();
}
const form = document.getElementById('form');
const titleField = document.getElementById('todo-title-input');
const todoList = document.querySelector('.todos');
form.addEventListener('submit', (e) => {
e.preventDefault();
let todoTitle = titleField.value;
const newTodo = {
id: crypto.randomUUID(),
title: todoTitle,
completed: false,
};
addTodo(newTodo);
titleField.value = '';
});
todoList.addEventListener('click', (e) => {
let target = e.target;
if (target.classList.contains('delete-todo-button')) {
const id = target.closest('.todo').dataset.id;
console.log(id);
deleteTodo(id);
}
if (target.classList.contains('todo-checkbox')) {
const id = target.closest('.todo').dataset.id;
let status = target.checked;
console.log(id, status);
markAsDone(id, status);
}
});
`
Below is render functions's code
import store from './store.js';
function render() {
console.log(store.todos, 'render called');
const todoElements = store.todos
.map(
(todo) => `
<li class="todo" data-id=${todo.id}>
<span class="todo-title ${todo.completed ? 'completed' : ''}"> ${
todo.title
} </span>
<div class="toggle-delete">
<input type="checkbox" name="completed" class="todo-checkbox" ${
todo.completed ? 'checked' : ''
} />
<button class="delete-todo-button">x</button>
</div>
</li>
`
)
.join('');
let todoList = document.querySelector('.todos');
todoList.innerHTML = todoElements;
}
export default render;
after logging multiple time i noticed that
window.addEventListener('todoschange', () => {
console.log('todoschange triggered!!!');
render();
});
this block of code not worked if i have items in local storage and set them into the store. if i clear the local storage then it works fine also on initial render . what’s the problem? please the point out the issue and help me here;
