first commit

4 files changed, 166 insertions, 0 deletions

diff --git a/app/check.js b/app/check.js
new file mode 100644
index 0000000..294e02a
--- /dev/null
+++ b/app/check.js
@@ -0,0 +1,34 @@
+function checkboxButton(id) {
+    const checkboxElement = document.createElement('i');
+
+    checkboxElement.classList.add('fa-regular');
+    checkboxElement.classList.add('fa-square');
+    
+    checkboxElement.setAttribute('title', 'Mark as done');
+
+    checkboxElement.addEventListener('click', (click) => {
+        checkElement(click.target, id);
+    });
+
+    return checkboxElement;
+}
+
+function checkElement(element, id) {
+    if (element.classList.contains('fa-square')) {
+        element.classList.remove('fa-square');
+        element.classList.add('fa-square-check');
+        element.parentNode.style.textDecoration = 'line-through';
+        element.parentNode.style.opacity = '0.7';
+        id = jsList.findIndex(el => el.id == id)
+        jsList[id].done = true;
+        localStorage.setItem('jsList', JSON.stringify(jsList));
+    } else {
+        element.classList.add('fa-square');
+        element.classList.remove('fa-square-check');
+        element.parentNode.style.textDecoration = '';
+        element.parentNode.style.opacity = '';
+        id = jsList.findIndex(el => el.id == id)
+        jsList[id].done = false;
+        localStorage.setItem('jsList', JSON.stringify(jsList));
+    }
+}
\ No newline at end of file
diff --git a/app/delete.js b/app/delete.js
new file mode 100644
index 0000000..1edebcb
--- /dev/null
+++ b/app/delete.js
@@ -0,0 +1,24 @@
+function deleteButton(id) {
+    const deleteButtonElement = document.createElement('i');
+
+    deleteButtonElement.classList.add('delete');
+    deleteButtonElement.classList.add('fa-solid');
+    deleteButtonElement.classList.add('fa-trash');
+    
+    deleteButtonElement.setAttribute('title', 'Delete');
+
+    deleteButtonElement.addEventListener('click', (clicked) => {
+        deleteElement(clicked.target.parentNode, id);
+    });
+
+    return deleteButtonElement;
+}
+
+
+function deleteElement(element, id) {
+    element.remove();
+
+    jsList.splice(jsList.findIndex(el => el.id === id), 1);
+
+    localStorage.setItem('jsList', JSON.stringify(jsList));
+}
\ No newline at end of file
diff --git a/app/edit.js b/app/edit.js
new file mode 100644
index 0000000..9b2b732
--- /dev/null
+++ b/app/edit.js
@@ -0,0 +1,56 @@
+function editButton(id) {
+    const buttonElement = document.createElement('i');
+    buttonElement.classList.add('edit');
+
+    buttonElement.classList.add('fa-solid');
+    buttonElement.classList.add('fa-pen-to-square');
+    buttonElement.setAttribute('title', 'Edit');
+
+    buttonElement.addEventListener('click', (clicked) => {
+        editElement(clicked.target.parentNode, id);
+    });
+
+    return buttonElement;
+}
+
+function editElement(element, id) {
+    const forms = document.createElement('form');
+    const put = document.createElement('input');
+
+    put.style.fontSize = '0.9em';
+    put.autofocus = true;
+    put.value = element.childNodes[0].textContent;
+    
+    forms.appendChild(put);
+
+    hide(element);
+
+    forms.addEventListener('submit', (e) => {
+        e.preventDefault();
+
+        id = jsList.findIndex(el => el.id == id)
+        jsList[id].name = put.value;
+        localStorage.setItem('jsList', JSON.stringify(jsList));
+
+        unhide(element, put, forms);
+    }, true);
+
+    element.appendChild(forms);
+}
+
+function hide(element) {
+    element.childNodes[0].textContent = '';
+    element.childNodes[1].style.display = 'none';
+    element.childNodes[2].style.display = 'none';
+    element.childNodes[3].style.display = 'none';
+}
+
+function unhide(element, put, forms) {
+    element.childNodes[0].textContent = put.value;
+    element.childNodes[1].style.display = '';
+    element.childNodes[2].style.display = '';
+    element.childNodes[3].style.display = '';
+
+    put.remove();
+    forms.remove();
+}
\ No newline at end of file
diff --git a/app/list.js b/app/list.js
new file mode 100644
index 0000000..9042dd3
--- /dev/null
+++ b/app/list.js
@@ -0,0 +1,52 @@
+const form = document.getElementById('form');
+const list = document.getElementById('list');
+const jsList = JSON.parse(localStorage.getItem('jsList')) || []
+
+jsList.forEach(element => {
+    createElement(element);
+    const tag = document.querySelector("[data-id='"+element.id+"']");
+    if(jsList[jsList.findIndex(el => el.id == tag.dataset.id)].done == true) {
+        checkElement(tag.childNodes[1], tag.dataset.id);
+    }
+});
+
+form.addEventListener('submit', (submit) => {
+    submit.preventDefault();
+
+    const name = submit.target.elements['add'];
+
+    if (name.value.length == 0) {
+        return;
+    }
+
+    const item = {
+        "name" : name.value,
+        "done" : false
+    };
+
+    item.id = jsList[jsList.length - 1] ? (jsList[jsList.length - 1]).id + 1 : 0;
+    createElement(item);
+    jsList.push(item);
+
+    localStorage.setItem('jsList', JSON.stringify(jsList))
+
+    form[0].value = '';
+
+});
+
+function createElement(item) {
+    const newItem = document.createElement('li');
+    newItem.classList.add('item');
+
+    newItem.dataset.id = item.id;
+
+    newItem.textContent += item.name;
+
+    newItem.appendChild(checkboxButton(item.id));
+
+    newItem.appendChild(editButton(item.id));
+    
+    newItem.appendChild(deleteButton(item.id));
+
+    list.appendChild(newItem);
+}