Skip to content

Commit

Permalink
First Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@zelmarjunior
zelmarjunior committed Apr 22, 2022
0 parents commit b0be975
Show file tree
Hide file tree
Showing 4 changed files with 259 additions and 0 deletions.
Binary file added img/trash.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 35 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="pt_BR">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDoZ</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

</head>

<body>
<!-- <h1 style="text-align: center; margin: 20px;">TO DO LIST DO Z</h1> -->
<section class="container-register-task">
<div class="input-group mb-3 input-register-task">
<input type="text" class="form-control input-task" placeholder="" aria-label="" aria-describedby="basic-addon1">
<div class="input-group-prepend">
</div>

</div>
</section>
<div class="container-display-tasks">
<ul id="display-tasks" class="display-tasks">
<!-- Dados do Local Storage -->
</ul>
<button onclick="createTask()" class="btn btn-outline-secondary btn-add-task">ADD</button>
</div>
</body>

</html>
<script src="./script.js"></script>
89 changes: 89 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -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 =
`<div class="card">
<input class="card-checkbox" type="checkbox" ${status} data-index=${index}>
<p class="card-description">${dataInputDescription}</p>
<img class="card-icon-delete" src="./img/trash.png" alt="Icon Delete (Trash)" data-index=${index}>
</div>`;

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();
135 changes: 135 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -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% ;
}



}

0 comments on commit b0be975

Please sign in to comment.