diff options
-rw-r--r-- | app/check.js | 34 | ||||
-rw-r--r-- | app/delete.js | 24 | ||||
-rw-r--r-- | app/edit.js | 56 | ||||
-rw-r--r-- | app/list.js | 52 | ||||
-rw-r--r-- | index.html | 28 | ||||
-rw-r--r-- | main.css | 75 |
6 files changed, 269 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); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..4c55140 --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset='utf-8'> + <meta http-equiv='X-UA-Compatible' content='IE=edge'> + <title>To-Do-List</title> + <meta name='viewport' content='width=device-width, initial-scale=1'> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"> + <link rel='stylesheet' type='text/css' media='screen' href='main.css'> +</head> +<body> + <main> + <h1>To-Do-List</h1> + <div class="container"> + <ul class="list" id="list"> + <form action="" id="form" method="post"> + <input autofocus type="text" name="add" class="add" placeholder="What do you need to do?" maxlength="250"> + <input hidden type="submit" value="Add Item"> + </form> + </ul> + </div> + </main> + <script src='app/edit.js'></script> + <script src='app/delete.js'></script> + <script src='app/check.js'></script> + <script src='app/list.js'></script> +</body> +</html>
\ 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 |