Hola buena tarde, reaice los pasos del video y no logro visualizar el id, ya estoy implementando el cdn uuid.v4(). Código del archivo addTask.js
import checkComplete from "./checkComplete.js";
import deleteIcon from "./deleteIcon.js";
import { displayTasks } from "./readTasks.js";
export const addTask = (e) => {
e.preventDefault();
const list = document.querySelector('[data-list]');
const input = document.querySelector('[data-form-input]');
const calendar = document.querySelector('[data-form-date]');
const value = input.value;
const date = calendar.value;
const dateFormat = moment(date).format('DD/MM/YYYY');
if (value === '' || date === '') {
return;
}
input.value = '';
calendar.value = '';
const complete = false;
const taskObj = {
value,
dateFormat,
complete,
id: uuid.v4()
};
list.innerHTML = '';
const taskList = JSON.parse(localStorage.getItem('tasks')) || [];
taskList.push({value, dateFormat, complete});
localStorage.setItem('tasks', JSON.stringify(taskList));
displayTasks();
}
export const createTask = ({value, dateFormat, complete, id}) => {
const task = document.createElement('li');
task.classList.add('card');
const taskContent = document.createElement('div');
console.log(complete);
if(complete){
console.log("Completada");
}
const titleTask = document.createElement('span');
titleTask.classList.add('task');
titleTask.innerText = value;
taskContent.appendChild(checkComplete(id));
taskContent.appendChild(titleTask);
const dateElement = document.createElement('span');
dateElement.innerHTML = dateFormat;
task.appendChild(taskContent);
task.appendChild(dateElement);
task.appendChild(deleteIcon());
return task;
};
Código del archivo checkComplete.js
const checkComplete = (id) => {
const i = document.createElement('i');
i.classList.add('far', 'fa-check-square', 'icon');
i.addEventListener('click', (e) => completeTask(e, id));
return i;
};
const completeTask = (e, id) => {
const element = e.target;
element.classList.toggle('fas');
element.classList.toggle('completeIcon');
element.classList.toggle('far');
console.log("Id verificado", id);
};
export default checkComplete;
En consola me aparece el mensaje Id verificado undefined y en local storage:
[{value: "css", dateFormat: "24/08/2022", complete: false}]
0: {value: "css", dateFormat: "24/08/2022", complete: false}
complete: false
dateFormat: "24/08/2022"
value: "css"