///////////////////////////////////////////////////////// // Reservation
( () => { const createAssignment = (e) => { e.preventDefault()
const listReservation = document.querySelector('[data--list]')
const inputReservation = document.querySelector('[data-form--input]')
const value = inputReservation.value
const assignmentReserv = document.createElement('li')
assignmentReserv.classList.add('task') const contentReserv = <p class="content">${value}</p>;
assignmentReserv.innerHTML = contentReserv;
assignmentReserv.appendChild(buttonConcluded());
assignmentReserv.appendChild(ButtonDelete());
listReservation.appendChild(assignmentReserv)
inputReservation.value = "";};
const newReservation = document.querySelector('[data-form--button]');
newReservation.addEventListener('click', createAssignment);
const buttonConcluded = () => { const buttonConcluded = document.createElement('button')
buttonConcluded.classList.add('finish-button')
buttonConcluded.innerText = 'Finish'
buttonConcluded.addEventListener('click', () => {
});
return buttonConcluded;};
const concluidedAssign = (e) => { const buttonConcluded = e.target
const assignComplete = buttonConcluded.parentElement
assignComplete.classList.toggle('done')}
const ButtonDelete = () => { const buttonDelete = document.createElement('button')
buttonDelete.innerText = 'Delete'
buttonDelete.addEventListener('click', deleteAssignment)
return buttonDelete;}
const deleteAssignment = (e) => { const buttonDelete = e.target
const assignComplete = buttonDelete.parentElement
assignComplete.remove();
return buttonDelete;}
})();
CSS:
.task.done .contentReserv { text-decoration: line-through; }
