Fechando o formulário - Botao cancelar (fokus) | JavaScript: explorando a manipulação de elementos e da localStorage

Olá segue minha resolução do exercicio com o botão cancelar.

// 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 = ()=> {
        const novaDescricao = prompt ('Qual é o nome da nova tarefa?')
        if (!novaDescricao) {
        return
    }
        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)

    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ê?

Obrigado por compartilhar a sua resolução da atividade. A função limparFormulario() limpa o conteúdo da textarea e oculta o formulário utilizando a classe hidden, além de estar corretamente associada ao evento de clique do botão de cancelar por meio do addEventListener(). Isso deixa o comportamento da interface mais intuitivo para quem estiver utilizando a aplicação.

Também gostei de ver que você reaproveitou a mesma função após o envio do formulário. Dessa forma, tanto ao adicionar uma tarefa quanto ao cancelar a operação, o formulário retorna ao estado inicial sem duplicação de código. Esse tipo de reutilização é uma boa prática e ajuda na manutenção da aplicação. Além disso, a integração com o localStorage e a atualização das tarefas editadas mostram que você aproveitou o projeto para explorar funcionalidades além do exercício proposto.

Pensando na evolução desse projeto, como você implementaria uma confirmação antes de cancelar caso o usuário já tenha digitado um texto no formulário?

Parabéns pela dedicação e por compartilhar sua solução. Continue praticando e trazendo suas implementações para o fórum. Ele continua à disposição sempre que precisar.

Para saber mais:

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

Importante

Fechando o formulário - Botao cancelar (fokus)

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