var selectedCard = 'card1';

var work;
var editedCardTitle;
var filter = 'add';
function selectCard(card) {
// code goes here to select a card
selectedCard = 'card';
changeMode()
}

function addWork() {
// code goes here for add work mode
work = document.getElementById('work').value;
if (work != undefined && work !== '' && work !== null) {
var d1 = document.getElementById(selectedCard + 'List');
d1.insertAdjacentHTML('beforeend', `<li>${work}</li>`);
document.getElementById('work').value = '';
work = '';
}

function deleteWork(taskId) {
// code goes here to delete a work in a card
const del = document.querySelector(`.${selectedCard} #${taskId}`);
del.parentElement.remove();

function update() {
// code goes here to update card title
editedCardTitle = document.getElementById('cardTitle').value;
if (editedCardTitle !== undefined && editedCardTitle !== '' &&
editedCardTitle !== null) {
var outerDiv = document.getElementById(selectedCard);
outerDiv.getElementsByTagName("h2")[0].textContent = editedCardTitle;
filter = 'add'
document.getElementById('edit').style.display = 'none';
document.getElementById('add').style.display = 'block';
}
}

function clearWorkList() {
//code goes here to clear workList
document.getElementById('card1List').remove();
document.getElementById('card2List').remove();
document.getElementById('card3List').remove();
selectedCard = 'card1';
work = '';
editedCardTitle = '';
fiter = 'add';

function changeMode() {
// code goes here switch between add work, update card title and delete work
if (document.getElementById('addwork').checked) {
filter = document.getElementById('addWork').value;
} else if (document.getElementById('editTitle').checked) {
 filter = document.getElementById('editTitle').value;
}
else if (document.getElementById('delete').checked) {
filter = document.getElementById('delete').value;
}

if (filter === 'add') {

document.getElementById('edit').style.display = 'none';
document.getElementById('add').style.display = 'block';
} else if (filter === 'edit') {
document.getElementById('edit').style.display = 'block';
document.getElementById('add').style.display = 'none';
var outerDiv = document.getElementById(selectedCard);
var h2s = outerDiv.getElementsByTagName("h2")[0].textContent;
document.getElementById('cardTitle').value = h2s;
editedCardTitle = h2s;
} else if (filter === 'delete') {
document.getElementById('add').style.display = 'none';
document.getElementById('edit').style.display = 'none';
document.querySelectorAll('.deleteTask').forEach(e => e.remove)
var selector = '.' + selectedCard + ' ul li';
const ul1 = document.querySelectorAll(selector)
for (var i = 0; i < ul1.length; i++) {
ul1[i].insertAdjacentHTML('afterbegin', `<button
onClick="deleteWork('deleteBtn${i + 1}')" class="deleteTask" id="deleteBtn$
{i+1}"></button>`)
}
}
}

function deleteMode() {
// code goes here for delete Mode
}