Add files via upload

createTodo.js

@@ -0,0 +1,80 @@
+import { inputTitle, root } from './formTodoVariables.js';
+import { TodoConstructor } from './todoConstructor.js';
+
+let todos = [];
+const creatToDo = (todoText, isChecked, todoId) => {
+    const todoElement = document.createElement('div');
+    const todoElementData = document.createTextNode('');
+    todoElement.append(todoElementData);
+    root.append(todoElement);
+
+    const btnCheck = document.createElement('button');
+    const btnCheckText = document.createTextNode('✔');
+    btnCheck.append(btnCheckText);
+    root.append(btnCheck);
+    todoElement.append(btnCheck);
+    btnCheck.className = 'check';
+    btnCheck.id = todoId;
+
+    const todoTitle = document.createElement('div');
+    const todoTextNode = document.createTextNode(todoText);
+    todoTitle.append(todoTextNode);
+    root.append(todoTitle);
+    todoElement.append(todoTitle);
+    todoTitle.className = 'textTodo';
+
+    const btnX = document.createElement('button');
+    const btnXText = document.createTextNode('X');
+    btnX.append(btnXText);
+    root.append(btnX);
+    btnX.className = 'button__closed';
+    todoElement.append(btnX);
+
+    // Date
+    const date = new Date().toLocaleDateString();
+    const todoElementDate = document.createElement('div');
+    const todoElementDateText = document.createTextNode(date);
+    todoElementDate.append(todoElementDateText);
+    root.append(todoElementDate);
+    todoElement.append(todoElementDate);
+    todoElementDate.className = 'date';
+
+    if(isChecked) {
+        todoElement.classList.toggle('textDecoration');
+        todoElement.classList.toggle('dataElement');
+    } else {
+        todoElement.classList.toggle('dataElement');
+    }
+
+    todoElement.dataset.todoId = todoId;
+
+    const todo = new TodoConstructor(todoText, todoId, date, isChecked);
+    todos.push(todo);
+    localStorage.setItem('todos', JSON.stringify(todos));
+    inputTitle.value = '';
+
+    // ✔
+    todoElement.addEventListener('click', (event) => {
+        if(event.target === btnCheck) {
+            todoElement.classList.toggle('textDecoration');
+        }
+
+        const selectedTodo = todos.find(todo => +todo.todoId === +event.target.id);
+        selectedTodo.isChecked = !selectedTodo.isChecked;
+        localStorage.setItem("todos", JSON.stringify(todos));
+    });
+
+    // X
+    root.addEventListener('click', (event) => {
+        if(event.target === btnX) {
+            todos = JSON.parse(localStorage.getItem('todos'));
+            const newList = todos.filter(obj => obj.todoId !== todoId);
+            localStorage.setItem('todos', JSON.stringify(newList));
+            todoElement.remove();
+        }
+    });
+
+    return todoElement;
+}
+
+export { creatToDo };

deleteAll.js

@@ -0,0 +1,7 @@
+export const deleteAll = () => {
+     let deleteAllElement = document.querySelectorAll('.dataElement');
+     for (let i = 0; i < deleteAllElement.length; i++) {
+          deleteAllElement[i].remove();
+     }
+     localStorage.removeItem('todos');
+};

formTodoVariables.js

@@ -0,0 +1,9 @@
+const root = document.getElementById('root');
+const btnDeleteAll = document.createElement('button');
+const btnDeleteAllText = document.createTextNode('Delete All');
+const inputTitle = document.createElement('input');
+const inputTitleText = document.createTextNode('');
+const btnAdd = document.createElement('button');
+const btnAddText = document.createTextNode('Add');
+
+export { root, btnDeleteAll, btnDeleteAllText, inputTitle, inputTitleText, btnAdd, btnAddText };

hw_12.js

@@ -0,0 +1,39 @@
+import { deleteAll } from './deleteAll.js';
+import { root, btnDeleteAll, btnDeleteAllText, inputTitle, inputTitleText, btnAdd, btnAddText } from './formTodoVariables.js';
+import { creatToDo} from './createTodo.js';
+
+btnDeleteAll.append(btnDeleteAllText);
+root.append(btnDeleteAll);
+btnDeleteAll.className = 'button';
+
+inputTitle.append(inputTitleText);
+root.append(inputTitle);
+inputTitle.className = 'input';
+inputTitle.placeholder = 'Enter todo...';
+
+btnAdd.append(btnAddText);
+root.append(btnAdd);
+btnAdd.className = 'button';
+
+// ADD
+root.addEventListener('click', (event) => {
+     if(event.target === btnAdd) {
+          if (!inputTitle.value) {
+               return;
+          }
+          creatToDo(inputTitle.value, false, Date.now());
+     }
+});
+
+btnDeleteAll.addEventListener('click', deleteAll);
+
+const todosFromStorage = JSON.parse(localStorage.getItem('todos'));
+
+if (todosFromStorage) {
+     todosFromStorage.forEach(todo => {
+          root.append(creatToDo(todo.todoText, todo.isChecked, todo.todoId));
+     });
+}
+
+
+

index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="./style.css">
+    <title>ToDo List</title>
+</head>
+<body>
+    <div id="root" class="root"></div>
+<script src="./hw_12.js" type="module"></script>
+</body>
+</html>

style.css

@@ -0,0 +1,102 @@
+* {
+    box-sizing: border-box;
+}
+.root {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    width: 650px;
+    margin: 100px auto;
+    padding: 20px 30px 40px;
+    border: 2px solid #000;
+    border-radius: 15px;
+    background-color: #bcbcbc;
+}
+.button {
+    border: 2px solid #000;
+    background-color: aquamarine;
+    font-size: 16px;
+    text-align: center;
+    border-radius: 10px;
+    padding: 10px;
+    min-width: 150px;
+    min-height: 50px;
+    cursor: pointer;
+}
+.button:hover {
+    transform: scale(1.1);
+    font-weight: 700;
+}
+
+.input {
+    border: 2px solid #000;
+    background-color: #fff;
+    font-size: 16px;
+    text-align: center;
+    border-radius: 10px;
+    min-width: 250px;
+}
+.dataElement {
+    position: relative;
+    border: 2px solid #000;
+    border-radius: 15px;
+    padding: 20px 20px 20px 60px;
+    background-color: #bcbcbc;
+    width: 100%;
+    margin-top: 20px;
+}
+.check {
+    position: absolute;
+    top: 33%;
+    left: 10px;
+    border: 2px solid #000;
+    background-color: aquamarine;
+    font-size: 12px;
+    text-align: center;
+    border-radius: 5px;
+    padding: 5px 15px;
+}
+.check:hover {
+    transform: scale(1.1);
+    font-weight: 700;
+}
+
+.textTodo {
+    border: 2px solid #fff;
+    background-color: #fff;
+    border-radius: 5px;
+    text-align: center;
+    padding: 10px 10px;
+    width: 80%;
+    font-size: 16px;
+    font-style: italic;
+}
+.button__closed {
+    border: 2px solid #000;
+    background-color: aquamarine;
+    font-size: 12px;
+    text-align: center;
+    border-radius: 5px;
+    padding: 5px 15px;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+}
+.button__closed:hover {
+    transform: scale(1.1);
+    font-weight: 700;
+}
+.date {
+    border-radius: 5px;
+    border: 2px solid #fff;
+    background-color: white;
+    padding: 0 10px;
+    position: absolute;
+    right: 10px;
+    top: 50px;
+}
+.textDecoration {
+    text-decoration: line-through;
+    background-color: orange;
+}

todoConstructor.js

@@ -0,0 +1,8 @@
+const TodoConstructor = function(todoText, todoId, dateTodo, isChecked) {
+    this.todoText = todoText;
+    this.todoId = todoId;
+    this.dateTodo = dateTodo;
+    this.isChecked = isChecked;
+};
+
+export { TodoConstructor };