updating the project

coelhoalexandre · Feb 1, 2024 · bd233fc · bd233fc
1 parent 5447724
commit bd233fc
Show file tree

Hide file tree

Showing 12 changed files with 517 additions and 2 deletions.
diff --git a/imagens/add_circle.png b/imagens/add_circle.png
diff --git a/imagens/check.svg b/imagens/check.svg
diff --git a/imagens/close.png b/imagens/close.png
diff --git a/imagens/delete.png b/imagens/delete.png
diff --git a/imagens/edit.png b/imagens/edit.png
diff --git a/imagens/more.svg b/imagens/more.svg
diff --git a/imagens/save.png b/imagens/save.png
diff --git a/imagens/trash.svg b/imagens/trash.svg
diff --git a/index.html b/index.html
@@ -69,6 +69,62 @@ <h1 class="app__title">
             </div>
         </section>
 
+
+        <section class="app__section-task-container">
+            <div class="app__section-task-content">
+                <header class="app__section-active-task">
+                    <p class="app__section-active-task-label">#Em andamento:</p>
+                    <p class="app__section-active-task-description"></p>
+                </header>
+                <div class="app__section-task-header">
+                    <h2 class="app__section-tasks-heading">Lista de tarefas:</h2>
+                    <div class="dropdown-container">
+                        <button class="app_button-more">
+                            <img src="/imagens/more.svg" alt="">
+                        </button>
+                        <ul class="app__section-task-header__ul">
+                            <li class="app__section-task-header__li">
+                                <button class="app__section-task-header__li__button" id="btn-remover-concluidas">
+                                    <img src="/imagens/check.svg" alt="">
+                                    Limpar tarefas concluídas
+                                </button>
+                            </li>
+                            <li class="app__section-task-header__li">
+                                <button class="app__section-task-header__li__button" id="btn-remover-todas">
+                                    <img src="/imagens/trash.svg" alt="">
+                                    Limpar todas as tarefas
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <ul class="app__section-task-list"></ul>
+                <form class="app__form-add-task hidden" aria-hidden="true">
+                    <div class="app__form-field">
+                        <label class="app__form-label">
+                            Adicionando tarefa
+                        </label>
+                        <textarea required rows="4" class="app__form-textarea" placeholder="No que você está trabalhando?"></textarea>
+                    </div>
+                    <footer class="app__form-footer">
+                        <button type="button" class="app__form-footer__button app__form-footer__button--delete">
+                            <img src="/imagens/delete.png" alt=""> Deletar
+                        </button>
+                        <div class="splitter"></div>
+                        <button type="button" class="app__form-footer__button app__form-footer__button--cancel">
+                            <img src="/imagens/close.png" alt=""> Cancelar
+                        </button>
+                        <button class="app__form-footer__button app__form-footer__button--confirm">
+                            <img src="/imagens/save.png" alt=""> Salvar
+                        </button>
+                    </footer>
+                </form>
+                <button class="app__button--add-task">
+                    <img src="/imagens/add_circle.png" alt=""> Adicionar nova tarefa
+                </button>
+            </div>
+        </section>
+
         <footer class="app__footer">
             <p class="app__footer-text">
                 Projeto fictício e sem fins comerciais. Imagens geradas por IA no Adobe Firefly.Desenvolvido por Alura. 
@@ -77,6 +133,7 @@ <h1 class="app__title">
     </main>
 
     <script src="./script.js"></script>
+    <script src="./script-crud.js"></script>
 </body>
 
 </html>
diff --git a/script-crud.js b/script-crud.js
@@ -0,0 +1,152 @@
+// DECLARAÇÕES
+const btnAdicionarTarefa = document.querySelector('.app__button--add-task');
+const formAdicionarTarefa = document.querySelector('.app__form-add-task');
+const textArea = document.querySelector('.app__form-textarea');
+const ulTarefas = document.querySelector('.app__section-task-list');
+const btnDeletar = document.querySelector('.app__form-footer__button--delete')
+const btnCancelar = document.querySelector('.app__form-footer__button--cancel');
+const paragrafoDescricaoTarefa = document.querySelector('.app__section-active-task-description');
+const btnRemoverConcluidas = document.querySelector('#btn-remover-concluidas');
+const btnRemoverTodas = document.querySelector('#btn-remover-todas');
+
+let tarefas = JSON.parse(localStorage.getItem('tarefas')) || [];
+let tarefaSelecionada = null
+let liTarefaSelecionada = null
+
+// FUNÇÕES
+function atualizarTarefas () {
+    localStorage.setItem('tarefas', JSON.stringify(tarefas));
+};
+
+function criarElementoTarefa(tarefa) {
+    const li = document.createElement('li');
+    li.classList.add('app__section-task-list-item');
+
+    const svg = document.createElement('svg');
+    svg.innerHTML = `
+        <svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" r="12" fill="#FFF"></circle>
+            <path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z"
+                fill="#01080E"></path>
+        </svg>
+    `;
+
+    const paragrafo = document.createElement('p');
+    paragrafo.textContent = tarefa.descricao;
+    paragrafo.classList.add('app__section-task-list-item-description');
+
+    const botao = document.createElement('button');
+    botao.classList.add('app_button-edit');
+    botao.onclick = () => {
+        const novaDescricao = prompt("Qual é o nono nome da tarefa?");
+        if (novaDescricao) {
+            paragrafo.textContent = novaDescricao;
+            tarefa.descricao = novaDescricao
+            atualizarTarefas()
+        }
+
+    };
+
+    const imagemBotao = document.createElement('img');
+    imagemBotao.setAttribute('src', './imagens/edit.png');
+    botao.append(imagemBotao);
+
+    li.append(svg);
+    li.append(paragrafo);
+    li.append(botao);
+
+    if (tarefa.completa) {
+        li.classList.add('app__section-task-list-item-complete');
+        botao.setAttribute('disabled', 'disabled');
+    } else {
+        li.onclick = () => {
+            document.querySelectorAll('.app__section-task-list-item-active').forEach(elemento => {elemento.classList.remove('app__section-task-list-item-active')});
+
+            if (tarefaSelecionada == tarefa) {
+                paragrafoDescricaoTarefa.textContent = '';
+                tarefaSelecionada = null
+                liTarefaSelecionada = null
+                return
+            };
+
+            tarefaSelecionada = tarefa;
+            liTarefaSelecionada = li
+            paragrafoDescricaoTarefa.textContent = tarefa.descricao;
+            li.classList.add('app__section-task-list-item-active');
+        };    
+    }
+
+    return li;
+};
+
+function deletarTarefa(cancelar) {
+    textArea.value = '';
+    if (cancelar) {
+        formAdicionarTarefa.classList.add('hidden');
+    }
+}
+
+function removerTarefas(somenteCompletas) {
+    const seletor = somenteCompletas ? ".app__section-task-list-item-complete" : ".app__section-task-list-item";
+
+    document.querySelectorAll(seletor).forEach(elemento => {
+        elemento.remove();
+    });
+    tarefas = somenteCompletas ? tarefas.filter(tarefa => !tarefa.completa) : [];
+    atualizarTarefas();
+};
+
+
+// EVENTOS
+btnRemoverConcluidas.onclick = () => removerTarefas(true);
+btnRemoverTodas.onclick = () => removerTarefas(false);
+
+btnAdicionarTarefa.addEventListener("click", () => {
+    formAdicionarTarefa.classList.remove('hidden');
+});
+
+document.onkeydown = (e) => {
+    if (e.code === "Escape" && !formAdicionarTarefa.classList.contains('hidden')) {
+        deletarTarefa(true)
+    }
+}
+
+formAdicionarTarefa.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const tarefa = {
+        descricao: textArea.value,
+    }
+    tarefas.push(tarefa);
+    const elementoTarefa = criarElementoTarefa(tarefa);
+    ulTarefas.append(elementoTarefa);
+    atualizarTarefas();
+    deletarTarefa(true)
+});
+
+
+
+tarefas.forEach(tarefa => {
+    const elementoTarefa = criarElementoTarefa(tarefa);
+    ulTarefas.append(elementoTarefa);
+});
+
+btnCancelar.addEventListener("click", () => {
+    deletarTarefa(true)
+});
+
+btnDeletar.addEventListener("click", () => {
+    deletarTarefa(false)
+});
+
+document.addEventListener('FocoFinalizado', () => {
+    if (tarefaSelecionada && liTarefaSelecionada) {
+        liTarefaSelecionada.classList.remove('app__section-task-list-item-active');
+        liTarefaSelecionada.classList.add('app__section-task-list-item-complete');
+        liTarefaSelecionada.querySelector('button').setAttribute('disabled', 'disabled');
+        tarefaSelecionada.completa = true;
+        atualizarTarefas();
+    };
+});
+
+
diff --git a/script.js b/script.js
@@ -56,6 +56,11 @@ const contagemRegressiva = () => {
     if (tempoDecorridoEmSegundos <= 0) {
         beep.play();
         alert("Tempo finalizado!");
+        const focoAtivo = html.getAttribute('data-contexto') == 'foco';
+        if (focoAtivo) {
+            const evento = new CustomEvent('FocoFinalizado');
+            document.dispatchEvent(evento);
+        };
         zerar();
         return;
     };
@@ -127,5 +132,3 @@ musicaFocoInput.addEventListener('change', () => {
 });
 
 startPauseBt.addEventListener('click', iniciarOuPausar);
-
-console.log(focoBt.classList.contains('active'))