├── .DS_Store ├── img ├── trash.png ├── checked.png └── background.png ├── index.html ├── styles.css └── scripts.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rodolfomori/todo-list-yt/HEAD/.DS_Store -------------------------------------------------------------------------------- /img/trash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rodolfomori/todo-list-yt/HEAD/img/trash.png -------------------------------------------------------------------------------- /img/checked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rodolfomori/todo-list-yt/HEAD/img/checked.png -------------------------------------------------------------------------------- /img/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rodolfomori/todo-list-yt/HEAD/img/background.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | DevClub - Todo list 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: 'Roboto', sans-serif; 7 | outline: none; 8 | } 9 | 10 | body{ 11 | background: url("./img/background.png"); 12 | } 13 | 14 | .container { 15 | background-color: #d1d1d1; 16 | width: 500px; 17 | border-radius: 10px; 18 | padding: 20px; 19 | margin: 100px auto 0; 20 | } 21 | 22 | .input-task { 23 | border: none; 24 | border-radius: 5px; 25 | width: 300px; 26 | height: 40px; 27 | padding-left: 10px; 28 | } 29 | 30 | .button-add-task { 31 | border: none; 32 | border-radius: 5px; 33 | height: 40px; 34 | background-color: #003329; 35 | color: #ffffff; 36 | font-size: 17px; 37 | padding: 0 15px; 38 | float: right; 39 | cursor: pointer; 40 | font-weight: 700; 41 | } 42 | 43 | .button-add-task:hover { 44 | opacity: 0.8; 45 | } 46 | 47 | .button-add-task:active { 48 | opacity: 0.6; 49 | } 50 | 51 | .list-tasks { 52 | width: 100%; 53 | list-style: none; 54 | margin-top: 30px; 55 | } 56 | 57 | .task { 58 | background-color: #F2F2F2; 59 | box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.2); 60 | height: 50px; 61 | display: flex; 62 | align-items: center; 63 | justify-content: space-between; 64 | padding: 0 15px; 65 | border-radius: 5px; 66 | margin-bottom: 20px; 67 | cursor: pointer; 68 | } 69 | 70 | img { 71 | height: 25px; 72 | opacity: 0; 73 | transition: opacity 0.5s ease-in-out; 74 | } 75 | 76 | .task:hover img { 77 | opacity: 1; 78 | } 79 | 80 | .done { 81 | background-color: #8fac55; 82 | text-decoration: line-through; 83 | } 84 | -------------------------------------------------------------------------------- /scripts.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector('.button-add-task') 2 | const input = document.querySelector('.input-task') 3 | const listaCompleta = document.querySelector('.list-tasks') 4 | 5 | let minhaListaDeItens = [] 6 | 7 | function adicionarNovaTarefa() { 8 | minhaListaDeItens.push({ 9 | tarefa: input.value, 10 | concluida: false, 11 | }) 12 | 13 | input.value = '' 14 | 15 | mostrarTarefas() 16 | } 17 | 18 | function mostrarTarefas() { 19 | let novaLi = '' 20 | 21 | // ['comprar café', 'estudar programação'] 22 | 23 | minhaListaDeItens.forEach((item, posicao) => { 24 | novaLi = 25 | novaLi + 26 | ` 27 | 28 |
  • 29 | check-na-tarefa 30 |

    ${item.tarefa}

    31 | tarefa-para-o-lixo 32 |
    • 33 | 34 | ` 35 | }) 36 | 37 | listaCompleta.innerHTML = novaLi 38 | 39 | localStorage.setItem('lista', JSON.stringify(minhaListaDeItens)) 40 | } 41 | 42 | function concluirTarefa(posicao) { 43 | minhaListaDeItens[posicao].concluida = !minhaListaDeItens[posicao].concluida 44 | 45 | mostrarTarefas() 46 | } 47 | 48 | function deletarItem(posicao) { 49 | minhaListaDeItens.splice(posicao, 1) 50 | 51 | mostrarTarefas() 52 | } 53 | 54 | function recarregarTarefas() { 55 | const tarefasDoLocalStorage = localStorage.getItem('lista') 56 | 57 | if (tarefasDoLocalStorage) { 58 | minhaListaDeItens = JSON.parse(tarefasDoLocalStorage) 59 | } 60 | 61 | mostrarTarefas() 62 | } 63 | 64 | recarregarTarefas() 65 | button.addEventListener('click', adicionarNovaTarefa) 66 | --------------------------------------------------------------------------------