From b1aee1997884e4bbd8d0667546ff96977550cb57 Mon Sep 17 00:00:00 2001 From: lucashemi Date: Mon, 9 Jan 2023 00:15:01 -0300 Subject: first commit --- app/check.js | 34 +++++++++++++++++++++++++++ app/delete.js | 24 +++++++++++++++++++ app/edit.js | 56 ++++++++++++++++++++++++++++++++++++++++++++ app/list.js | 52 +++++++++++++++++++++++++++++++++++++++++ index.html | 28 ++++++++++++++++++++++ main.css | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 269 insertions(+) create mode 100644 app/check.js create mode 100644 app/delete.js create mode 100644 app/edit.js create mode 100644 app/list.js create mode 100644 index.html create mode 100644 main.css 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); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..4c55140 --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + To-Do-List + + + + + +
+

To-Do-List

+
+
    +
    + + +
    +
+
+
+ + + + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..8c67c4d --- /dev/null +++ b/main.css @@ -0,0 +1,75 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); + +body { + font-family: 'Roboto', sans-serif; + text-align: center; +} + +h1 { + font-size: 2.5em; +} + +.container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.list { + max-height: 60vh; + min-width: 15vw; + max-width: 30vw; + overflow: auto; + border: 5px solid black; + padding: 2rem 6rem; +} + +.add { + font-size: 1.2em; + margin-bottom: 10px; +} + +.item { + border: 3px solid black; + margin: 0.3rem; + padding: 0.4em 3em; + list-style-type: none; +} + +.fa-square, .fa-square-check { + cursor: pointer; + margin: 0.2rem; + margin-left: 0.5rem; +} + +.edit { + margin: 0.5rem; + cursor: pointer; +} + +.delete { + margin: 0.1rem; + cursor: pointer; +} + +@media only screen and (max-width: 1250px) { + .list { + padding: 1em 1em; + max-width: 80vw; + overflow: initial; + max-height: fit-content; + } + + .add { + font-size: 1.2em; + } + + .item { + padding: 1em 3em; + } + + .fa-solid { + font-size: 1.1em; + } +} \ No newline at end of file -- cgit v1.2.3-18-g5258