Exercicios lista de tarefas - Fockus | JavaScript: explorando a manipulação de elementos e da localStorage

Olá segue a resolução dos meus exercicios.

// Encontrar o botão adicionar tarefa

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 btCancelar = document.querySelector('.app__form-footer__button--cancel');

let tarefas = JSON.parse(localStorage.getItem('tarefas')) || []

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 = ()=> {
        debugger
        const novaDescricao = prompt ('Qual é o nome da nova tarefa?')
        console.log('Valor obtido:', novaDescricao);
        
        
        if (!novaDescricao) {
            alert('Atualização da tarefa cancelada ou ínvalida!');
        return
    }
        paragrafo.textContent = novaDescricao
        tarefa.descricao = novaDescricao
        atualizarTarefas()
        alert('Tarefa atualizada com sucesso!');
    }

    const imagemBotao = document.createElement('img')
    imagemBotao.setAttribute('src', '/imagens/edit.png')

    botao.append(imagemBotao)
    li.append(svg)
    li.append(paragrafo)
    li.append(botao)

    return li
}

BtnAdicionarTarefa.addEventListener('click', () => {
    formAdicionarTarefa.classList.toggle('hidden')
})
formAdicionarTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault();
    const tarefa = {
        descricao: textArea.value
    }
    tarefas.push(tarefa)
    adicionarTarefaNaTela (tarefa)
    atualizarTarefas()
    limparFormulario()
})

const limparFormulario = () => {
    textArea.value = '';
    formAdicionarTarefa.classList.add('hidden');
}
btCancelar.addEventListener('click',limparFormulario);

tarefas.forEach(tarefa => {
    adicionarTarefaNaTela (tarefa)
});

function adicionarTarefaNaTela (tarefa) {
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
}

Oi, Stephanie. Tudo bem com você?

Você trouxe uma resolução completa dos exercícios, cobrindo desde a atualização da descrição com persistência no localStorage até o tratamento dos casos de cancelamento do prompt. A função criarElementoTarefa ficou bem estruturada, juntando a criação do elemento visual com a lógica de edição dentro do próprio listener de clique do botão, e o uso do debugger junto com o console.log pra acompanhar o valor capturado do prompt mostra que você seguiu direitinho a proposta de debugging pedida no exercício.

Você chegou a testar o comportamento do debugger direto no navegador pra ver como o fluxo de execução passa pelas linhas até chegar na captura da nova descrição, e percebeu alguma diferença no que esperava acontecer?

Parabéns pelo empenho nos exercícios, Stephanie. O fórum está sempre à disposição, então continue compartilhando seus projetos por aqui.

Para saber mais:

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Importante

Exercicios lista de tarefas - Fockus

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP