diff --git a/img/trash.png b/img/trash.png new file mode 100644 index 0000000..a42c25a Binary files /dev/null and b/img/trash.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..5604f42 --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + + + ToDoZ + + + + + + + + +
+
+ +
+
+ +
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..9b77edc --- /dev/null +++ b/script.js @@ -0,0 +1,89 @@ +let banco = []; + +createTask = (description, status) => { + dataInputDescription = document.querySelector(".input-task").value; + + if (dataInputDescription) { + if (banco.length === 0) { + index = 0 + } else { + index = banco.length + + } + createdTask = document.createElement("div"); + + dataIndex = index; + + createdTask.innerHTML = + `
+ +

${dataInputDescription}

+ Icon Delete (Trash) +
`; + + document.querySelector(".display-tasks").appendChild(createdTask); + + + banco.push({ + description: dataInputDescription, + stauts: "", + index: dataIndex + }); + console.log(banco); + + document.querySelector(".input-task").value = "" + } else { + alert('Digite alguma tarefa para cadastrar!') + } + + +} + +updateDisplayTasks = () => { + cleanDisplayTasks(); +} + +cleanDisplayTasks = () => { + let displayTasks = document.querySelector(".display-tasks"); + while (displayTasks.lastChild) { + displayTasks.removeChild(displayTasks.lastChild); + } +} + +clickTask = (evento) => { + const elemento = evento.target; + + if (elemento.className === "card-checkbox") { + console.log(elemento.checked) + if (elemento.checked) { + elemento.parentNode.classList.add('checked-task') + } else { + elemento.parentNode.classList.remove('checked-task') + } + } + else if (elemento.className === "card-icon-delete") { + console.log("Deleta task"); + banco.splice(elemento.dataset.index, 1) + elemento.parentNode.parentNode.remove() + console.log(banco) + + /* banco.splice(index, 1); */ + + /* let indexTask = elemento.dataset.index; */ + console.log(elemento); + /* let index = elemento.dataset.index; + console.log(index) */ + /* deleteTask(index) */ + } +} + +document.addEventListener("keypress", function (e) { + if (e.key === "Enter") { + var btn = document.querySelector(".btn-add-task"); + btn.click(); + } +}); + +document.getElementById("display-tasks").addEventListener("click", clickTask); + +updateDisplayTasks(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..fe3df88 --- /dev/null +++ b/style.css @@ -0,0 +1,135 @@ +html, +body, +div { + margin: 0; + padding: 0; + border: 0; +} + +body { + margin: 0; + padding: 0; + border: 0; + display: flex; + flex-direction: column; + justify-content: center; + height: 100vh; + background: gainsboro; +} + +.container-register-task { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 30px; +} + +.input-register-task { + width: 450px; + margin: 2%; + display: flex; + justify-content: center; + align-items: center; +} + +.input-task { + margin: 0 0 0 0; + border-top-right-radius: 30px !important; + border-bottom-right-radius: 30px !important; + border-radius: 30px; + border: 1px solid #545454; + text-align: center; +} + +.btn-add-task { + width: 5rem; + height: 5rem; + border-radius: 50px; + font-size: 10px; + font-weight: bolder; + border: 1px solid #545454; + color: #545454; + margin: 20px; + +} + +.container-display-tasks { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.display-tasks { + background-color: rgb(59, 215, 197); + padding: 30px; + border-radius: 5px; + box-shadow: inset 0 0 1em rgb(59, 215, 197), 0 0 5px rgb(59, 215, 197); + margin: 0; + width: 600px; +} + +input:checked { + text-decoration: line-through; +} + +.card { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin: 3px; + padding: 13px 0 13px 0; + width: 500px; + max-width: 500px; +} + +.card-checkbox { + width: 30px; + height: 30px; + margin: 0 10px; + padding: 0; +} + +.card-description { + margin: 0 20px; + padding: 0; + text-align: center; + max-width: 240px; +} + +.card-icon-delete { + margin: 0 10px; + padding: 0; + width: 30px; + height: 30px; +} + +.card-icon-delete:hover { + cursor: pointer; + width: 31px; + height: 31px; +} + +.checked-task { + text-decoration: line-through !important; + opacity: 0.5 !important; +} + +@media (max-width: 480px) { + .card { + width: 100%; + } + + .display-tasks { + width: 90%; + height: 60vh; + } + + .input-register-task { + width: 90% ; + } + + + +} \ No newline at end of file