first commit

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