From 3fd423956947df933231ac38c01e8d9edd0fb5ba Mon Sep 17 00:00:00 2001 From: Ouriel91 Date: Sun, 15 May 2022 18:20:49 +0300 Subject: [PATCH 1/6] feat update: work began --- src/ex1/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ex1/index.html b/src/ex1/index.html index 4d8c49943..6100acb5e 100644 --- a/src/ex1/index.html +++ b/src/ex1/index.html @@ -1,7 +1,7 @@ - Exercise 1 + 2DoList From 4a9cb95034ade5b47323c05eb13a9adf86db2575 Mon Sep 17 00:00:00 2001 From: Ouriel91 Date: Sun, 15 May 2022 19:48:06 +0300 Subject: [PATCH 2/6] feat update: adds application main style --- src/ex1/index.html | 19 +++++-- src/ex1/style.css | 137 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 152 insertions(+), 4 deletions(-) diff --git a/src/ex1/index.html b/src/ex1/index.html index 6100acb5e..9b7aa0f50 100644 --- a/src/ex1/index.html +++ b/src/ex1/index.html @@ -3,12 +3,23 @@ 2DoList + - -

Todo list

- - +
+

2DoList

+
+ + +
+
    +
  • hi
    • +
+
+ You have pending tasks + +
+
diff --git a/src/ex1/style.css b/src/ex1/style.css index e69de29bb..c92417003 100644 --- a/src/ex1/style.css +++ b/src/ex1/style.css @@ -0,0 +1,137 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; +} + +body { + width: 100%; + height: 100vh; + padding: 10px; + background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%); +} + +.container { + background: #fff; + width: 60%; + margin: 50px auto; + padding: 20px; + border-radius: 5px; + box-shadow: 0px 10px 15px rgba(0,0,0,0.1); +} + +.title { + font-size: 30px; + font-weight: bold; +} + +.input-container { + display: flex; + margin: 20px 0; + height: 45px; + width: 100%; + justify-content: space-between; +} + +.todo-input { + width: 85%; + height: 100%; + outline: none; + border-radius: 5px; + border: 1px solid #ccc; + padding-left: 15px; + font-size: 16px; + transition: all 0.3s ease; +} + +.todo-input:focus { + border: 2px solid #5f56c4; +} + +.add-button { + width: 10%; + min-width: 35px; + height: 100%; + border: none; + color: #fff; + cursor: pointer; + font-size: 20px; + outline: none; + background: #8E49E8; + border-radius: 5px; + opacity: 0.6; + transition: all 0.3s ease; +} + +.add-button:hover, .clear-all-button:hover { + background: #3ad74f; +} + +.add-button:active, .clear-all-button:active { + opacity: 1; + transform: scale(0.98); +} + +.todo-list-container { + max-height: 250px; + overflow-y: auto; +} + +.todo-list-container li { + position: relative; + list-style: none; + margin-bottom: 8px; + background: #f2f2f2; + border-radius: 5px; + padding: 10px; + overflow: hidden; + word-wrap: break-word; + cursor: default; +} +.todo-list-container li:hover { + background: rgba(139, 90, 139, 0.3); +} + +.todo-list-container li .delete{ + position: absolute; + right: -40px; + top: 50%; + transform: translateY(50%); + background: #e74c3c; + width: 40px; + text-align: center; + color: #fff; + padding: 10px; + border-radius: 0 5px 5px 0; + cursor: pointer; + transition: all 0.2s ease; +} + +.todo-list-container li:hover .delete{ + right: 0px; +} + +.clear-and-pending-container { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + margin-top: 20px; +} + +.clear-all-button { + padding: 10px; + border-radius: 5px; + border: none; + outline: none; + color: #fff; + font-weight: bold; + font-size: 16px; + background: #8E49E8; + cursor: pointer; + opacity: 0.6; + transition: all 0.3s ease; +} From fde52a4682815dd1f57db17b169888b613b4b8ac Mon Sep 17 00:00:00 2001 From: Ouriel91 Date: Sun, 15 May 2022 23:10:32 +0300 Subject: [PATCH 3/6] feat update adds the main logic of todolist --- src/ex1/index.html | 13 +++-- src/ex1/script.js | 116 +++++++++++++++++++++++++++++++++++++++++++++ src/ex1/style.css | 21 ++++---- 3 files changed, 133 insertions(+), 17 deletions(-) diff --git a/src/ex1/index.html b/src/ex1/index.html index 9b7aa0f50..f99079525 100644 --- a/src/ex1/index.html +++ b/src/ex1/index.html @@ -9,15 +9,14 @@

2DoList

- - + +
-
    -
  • hi
    • -
+ +
    - You have pending tasks - + You have pending tasks +
    diff --git a/src/ex1/script.js b/src/ex1/script.js index e69de29bb..760fca7bf 100644 --- a/src/ex1/script.js +++ b/src/ex1/script.js @@ -0,0 +1,116 @@ +const todoListElement = document.getElementById("todo-list") +const addTodoButton = document.getElementById("add-todo-button") +const todoInput = document.getElementById("todo-input") +const clearAllTodosButton = document.getElementById("clear-all-todos-button") +const sumTodos = document.getElementById("sum-todos") + +let todoList = [] //array for storing data + +showTodos() + +todoInput.onkeyup = (e) => { + let enterValue = todoInput.value + if (enterValue.trim() !== ""){ + addTodoButton.classList.add("active") + + if(e.keyCode === 13){ + addTodo() + } + } + else{ + addTodoButton.classList.remove("active") + addTodoButton.style.opacity = 0.2 + addTodoButton.style.cursor = "not-allowed" + } +} + +addTodoButton.addEventListener("click", () => { + addTodo() +}) + +function addTodo(){ + let enterValue = todoInput.value + + if(enterValue.trim() === ""){ + alert("todo cannot be empty") + return + } + + checkIfExistDataFromLS() + pushEnteredDataToLS(enterValue) + showTodos() + + addTodoButton.classList.remove("active") +} + +function checkIfExistDataFromLS(){ + let dataFromLS = localStorage.getItem("new-todo") + + if(dataFromLS === null){ + todoList = [] + } + else{ + todoList = JSON.parse(dataFromLS) + } +} + +function pushEnteredDataToLS(enterValue){ + todoList.push(enterValue) + localStorage.setItem("new-todo", JSON.stringify(todoList)) + alert(`added new todo ${enterValue}`) +} + +function showTodos() { + checkIfExistDataFromLS() + showMatchUiByTodosNumber() + createTodoListItems() +} + +function showMatchUiByTodosNumber() { + //add also something to empty state + sumTodos.textContent = todoList.length + if(todoList.length > 0){ + clearAllTodosButton.classList.add("active") + } + else{ + clearAllTodosButton.classList.remove("active") + } +} + +function createTodoListItems() { + let listItems = "" + + todoList.forEach((todo, index) => { + listItems += `
  • ${todo}
    • ` + }) + + todoListElement.innerHTML = listItems + + todoInput.value = "" +} + +function deleteTodo(index) { + let dataFromLS = localStorage.getItem("new-todo") + todoList = JSON.parse(dataFromLS) + const removedTodo = todoList[index] + todoList.splice(index, 1) //remove one todo + alert(`removed new todo ${removedTodo}`) + localStorage.setItem("new-todo", JSON.stringify(todoList)) + showTodos() +} + +clearAllTodosButton.addEventListener("click", () => { + let dataFromLS = localStorage.getItem("new-todo") + + if(dataFromLS === null){ + todoList = [] + } + else{ + todoList = JSON.parse(dataFromLS) + todoList = [] //initialize array again + } + + alert('removed all todos') + localStorage.setItem("new-todo", JSON.stringify(todoList)) + showTodos() +}) diff --git a/src/ex1/style.css b/src/ex1/style.css index c92417003..777af68e4 100644 --- a/src/ex1/style.css +++ b/src/ex1/style.css @@ -17,6 +17,7 @@ body { .container { background: #fff; width: 60%; + max-height: 80%; margin: 50px auto; padding: 20px; border-radius: 5px; @@ -57,7 +58,7 @@ body { height: 100%; border: none; color: #fff; - cursor: pointer; + cursor: not-allowed; font-size: 20px; outline: none; background: #8E49E8; @@ -66,13 +67,10 @@ body { transition: all 0.3s ease; } -.add-button:hover, .clear-all-button:hover { - background: #3ad74f; -} - -.add-button:active, .clear-all-button:active { +.add-button.active, .clear-all-button.active { opacity: 1; transform: scale(0.98); + cursor: pointer; } .todo-list-container { @@ -91,15 +89,12 @@ body { word-wrap: break-word; cursor: default; } -.todo-list-container li:hover { - background: rgba(139, 90, 139, 0.3); -} .todo-list-container li .delete{ position: absolute; right: -40px; top: 50%; - transform: translateY(50%); + transform: translateY(-50%); background: #e74c3c; width: 40px; text-align: center; @@ -114,6 +109,10 @@ body { right: 0px; } +.todo-list-container li:hover { + background: rgba(139, 90, 139, 0.3); +} + .clear-and-pending-container { display: flex; align-items: center; @@ -125,6 +124,7 @@ body { .clear-all-button { padding: 10px; border-radius: 5px; + max-width: 90px; border: none; outline: none; color: #fff; @@ -134,4 +134,5 @@ body { cursor: pointer; opacity: 0.6; transition: all 0.3s ease; + word-wrap: break-word; } From eee5951913b88e0c73641919959994d4987d7f6b Mon Sep 17 00:00:00 2001 From: Ouriel91 Date: Tue, 17 May 2022 17:44:04 +0300 Subject: [PATCH 4/6] feat update: added a-z and z-a filter --- src/ex1/index.html | 8 ++++++- src/ex1/script.js | 56 ++++++++++++++++++++++++++++++++++++++-------- src/ex1/style.css | 42 +++++++++++++++++++++++++++++++++- 3 files changed, 95 insertions(+), 11 deletions(-) diff --git a/src/ex1/index.html b/src/ex1/index.html index f99079525..bd5316b8e 100644 --- a/src/ex1/index.html +++ b/src/ex1/index.html @@ -7,7 +7,13 @@
    -

    2DoList

    +
    +

    2DoList

    + +
    diff --git a/src/ex1/script.js b/src/ex1/script.js index 760fca7bf..7a8d3c00a 100644 --- a/src/ex1/script.js +++ b/src/ex1/script.js @@ -3,6 +3,8 @@ const addTodoButton = document.getElementById("add-todo-button") const todoInput = document.getElementById("todo-input") const clearAllTodosButton = document.getElementById("clear-all-todos-button") const sumTodos = document.getElementById("sum-todos") +const orderSelect = document.getElementById("order-select") + let todoList = [] //array for storing data @@ -11,8 +13,11 @@ showTodos() todoInput.onkeyup = (e) => { let enterValue = todoInput.value if (enterValue.trim() !== ""){ - addTodoButton.classList.add("active") + addTodoButton.classList.add("active") + addTodoButton.style.cursor = "pointer" + addTodoButton.style.opacity = 1 + if(e.keyCode === 13){ addTodo() } @@ -71,9 +76,11 @@ function showMatchUiByTodosNumber() { sumTodos.textContent = todoList.length if(todoList.length > 0){ clearAllTodosButton.classList.add("active") + clearAllTodosButton.style.cursor = "pointer" } else{ clearAllTodosButton.classList.remove("active") + clearAllTodosButton.style.cursor = "not-allowed" } } @@ -81,7 +88,15 @@ function createTodoListItems() { let listItems = "" todoList.forEach((todo, index) => { - listItems += `
  • ${todo}
    • ` + listItems += `
  • ${todo} + + + +
    • + ` + {/* + + */} }) todoListElement.innerHTML = listItems @@ -89,14 +104,20 @@ function createTodoListItems() { todoInput.value = "" } +function checkTodo(index) { + +} + function deleteTodo(index) { - let dataFromLS = localStorage.getItem("new-todo") - todoList = JSON.parse(dataFromLS) - const removedTodo = todoList[index] - todoList.splice(index, 1) //remove one todo - alert(`removed new todo ${removedTodo}`) - localStorage.setItem("new-todo", JSON.stringify(todoList)) - showTodos() + + let dataFromLS = localStorage.getItem("new-todo") + todoList = JSON.parse(dataFromLS) + const removedTodo = todoList[index] + todoList.splice(index, 1) //remove one todo + alert(`removed new todo ${removedTodo}`) + localStorage.setItem("new-todo", JSON.stringify(todoList)) + showTodos() + } clearAllTodosButton.addEventListener("click", () => { @@ -114,3 +135,20 @@ clearAllTodosButton.addEventListener("click", () => { localStorage.setItem("new-todo", JSON.stringify(todoList)) showTodos() }) + +orderSelect.addEventListener('change', (e) => { + + let dataFromLS = localStorage.getItem("new-todo") + todoList = JSON.parse(dataFromLS) + + if(e.target.value === "A-Z") { + todoList = todoList.sort() + } + else{ + todoList = todoList.sort().reverse() + } + + localStorage.setItem("new-todo", JSON.stringify(todoList)) + showTodos() +}) + diff --git a/src/ex1/style.css b/src/ex1/style.css index 777af68e4..c217f85d0 100644 --- a/src/ex1/style.css +++ b/src/ex1/style.css @@ -24,6 +24,27 @@ body { box-shadow: 0px 10px 15px rgba(0,0,0,0.1); } +.top { + display: flex; + align-items: center; + justify-content: space-between; +} + +.filter-select { + width: 80px; + padding: 10px; + border-radius: 5px; + border: none; + font-size: 16px; + font-weight: 500; + background-color: rgba(182, 128, 191, 0.3); + text-align: center; +} + +.filter-select:focus{ + outline: none; +} + .title { font-size: 30px; font-weight: bold; @@ -105,10 +126,29 @@ body { transition: all 0.2s ease; } +.todo-list-container li .check{ + position: absolute; + right: -80px; + top: 50%; + transform: translateY(-50%); + background: #4de73c; + width: 40px; + text-align: center; + color: #fff; + padding: 10px; + border-radius: 0 5px 5px 0; + cursor: pointer; + transition: all 0.2s ease; +} + .todo-list-container li:hover .delete{ right: 0px; } +.todo-list-container li:hover .check{ + right: 40px; +} + .todo-list-container li:hover { background: rgba(139, 90, 139, 0.3); } @@ -131,7 +171,7 @@ body { font-weight: bold; font-size: 16px; background: #8E49E8; - cursor: pointer; + cursor: not-allowed; opacity: 0.6; transition: all 0.3s ease; word-wrap: break-word; From 6ea658fd83f42b1239ceddbea945d47bdcc39f3d Mon Sep 17 00:00:00 2001 From: Ouriel91 Date: Tue, 17 May 2022 19:15:22 +0300 Subject: [PATCH 5/6] feat update: adds edit option --- src/ex1/script.js | 19 ++++++++++++------- src/ex1/style.css | 7 +++---- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/src/ex1/script.js b/src/ex1/script.js index 7a8d3c00a..62a6a6647 100644 --- a/src/ex1/script.js +++ b/src/ex1/script.js @@ -17,7 +17,7 @@ todoInput.onkeyup = (e) => { addTodoButton.classList.add("active") addTodoButton.style.cursor = "pointer" addTodoButton.style.opacity = 1 - + if(e.keyCode === 13){ addTodo() } @@ -86,17 +86,16 @@ function showMatchUiByTodosNumber() { function createTodoListItems() { let listItems = "" - todoList.forEach((todo, index) => { listItems += `
  • ${todo} + + +
    • ` - {/* - - */} }) todoListElement.innerHTML = listItems @@ -104,8 +103,14 @@ function createTodoListItems() { todoInput.value = "" } -function checkTodo(index) { - +function editTodo(index) { + let editedValue = prompt('Edit todo:', todoList[index]) + let dataFromLS = localStorage.getItem("new-todo") + todoList = JSON.parse(dataFromLS) + todoList[index] = editedValue + alert(`edited todo ${editedValue}`) + localStorage.setItem("new-todo", JSON.stringify(todoList)) + showTodos() } function deleteTodo(index) { diff --git a/src/ex1/style.css b/src/ex1/style.css index c217f85d0..8d9f5f216 100644 --- a/src/ex1/style.css +++ b/src/ex1/style.css @@ -126,17 +126,16 @@ body { transition: all 0.2s ease; } -.todo-list-container li .check{ +.todo-list-container li .edit{ position: absolute; right: -80px; top: 50%; transform: translateY(-50%); - background: #4de73c; + background: #563ce7; width: 40px; text-align: center; color: #fff; padding: 10px; - border-radius: 0 5px 5px 0; cursor: pointer; transition: all 0.2s ease; } @@ -145,7 +144,7 @@ body { right: 0px; } -.todo-list-container li:hover .check{ +.todo-list-container li:hover .edit{ right: 40px; } From fae702daf4b33e9e0ac7325dead65d1cd7868d47 Mon Sep 17 00:00:00 2001 From: Ouriel91 Date: Tue, 17 May 2022 20:54:16 +0300 Subject: [PATCH 6/6] feat update: addsempty state --- src/ex1/index.html | 2 +- src/ex1/script.js | 31 +++++++++++++++---------------- src/ex1/style.css | 15 +++++++++++++++ 3 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/ex1/index.html b/src/ex1/index.html index bd5316b8e..ac084ce48 100644 --- a/src/ex1/index.html +++ b/src/ex1/index.html @@ -18,7 +18,7 @@

    2DoList

    - +

    Enter Todos

      You have pending tasks diff --git a/src/ex1/script.js b/src/ex1/script.js index 62a6a6647..9d033258b 100644 --- a/src/ex1/script.js +++ b/src/ex1/script.js @@ -4,7 +4,7 @@ const todoInput = document.getElementById("todo-input") const clearAllTodosButton = document.getElementById("clear-all-todos-button") const sumTodos = document.getElementById("sum-todos") const orderSelect = document.getElementById("order-select") - +const enterTodos = document.getElementById("enter-todos") let todoList = [] //array for storing data @@ -13,7 +13,6 @@ showTodos() todoInput.onkeyup = (e) => { let enterValue = todoInput.value if (enterValue.trim() !== ""){ - addTodoButton.classList.add("active") addTodoButton.style.cursor = "pointer" addTodoButton.style.opacity = 1 @@ -72,15 +71,17 @@ function showTodos() { } function showMatchUiByTodosNumber() { - //add also something to empty state sumTodos.textContent = todoList.length + if(todoList.length > 0){ clearAllTodosButton.classList.add("active") clearAllTodosButton.style.cursor = "pointer" + enterTodos.style.display = "none" } else{ clearAllTodosButton.classList.remove("active") clearAllTodosButton.style.cursor = "not-allowed" + enterTodos.style.display = "block" } } @@ -103,16 +104,6 @@ function createTodoListItems() { todoInput.value = "" } -function editTodo(index) { - let editedValue = prompt('Edit todo:', todoList[index]) - let dataFromLS = localStorage.getItem("new-todo") - todoList = JSON.parse(dataFromLS) - todoList[index] = editedValue - alert(`edited todo ${editedValue}`) - localStorage.setItem("new-todo", JSON.stringify(todoList)) - showTodos() -} - function deleteTodo(index) { let dataFromLS = localStorage.getItem("new-todo") @@ -121,8 +112,17 @@ function deleteTodo(index) { todoList.splice(index, 1) //remove one todo alert(`removed new todo ${removedTodo}`) localStorage.setItem("new-todo", JSON.stringify(todoList)) - showTodos() - + showTodos() +} + +function editTodo(index) { + let editedValue = prompt('Edit todo:', todoList[index]) + let dataFromLS = localStorage.getItem("new-todo") + todoList = JSON.parse(dataFromLS) + todoList[index] = editedValue + alert(`edited todo ${editedValue}`) + localStorage.setItem("new-todo", JSON.stringify(todoList)) + showTodos() } clearAllTodosButton.addEventListener("click", () => { @@ -142,7 +142,6 @@ clearAllTodosButton.addEventListener("click", () => { }) orderSelect.addEventListener('change', (e) => { - let dataFromLS = localStorage.getItem("new-todo") todoList = JSON.parse(dataFromLS) diff --git a/src/ex1/style.css b/src/ex1/style.css index 8d9f5f216..188fc43f2 100644 --- a/src/ex1/style.css +++ b/src/ex1/style.css @@ -94,6 +94,21 @@ body { cursor: pointer; } +.empty-todos-message { + position: relative; + background-image: url("https://www.itgovernance.eu/blog/de/wp-content/uploads/2017/04/list.jpg"); + background-size: cover; + height: 40vh; +} + +.empty-todos-message > h1 { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: 100; +} + .todo-list-container { max-height: 250px; overflow-y: auto;