Skip to content

4 Quarta Etapa

Jump to bottom
Rodrigo Morais edited this page Mar 7, 2023 · 4 revisions

Objetivos

Nesta aula, vamos discutir e nos aprofundar no javascript usando nosso primeiro if e manipulando classes de tags do HTML dinamicamente. Ao fim deste documento, você tera visto sobre:

  1. Uso da função remove, específico de elementos do HTML
  2. Planejamento da funcionalidade de edição da nota
  3. Criação da nossa primeira regra usando CSS e como usá-la dinamicamente no projeto

1) fazer o botão de apagar nota realmente apagar uma nota

Como foi sugerido como lição de casa no nosso encontro anterior, colocamos um eventListner no botão entendido como o botão de apagar a nota. Deixando o código assim:

 const botaoApagar = blocoNota.querySelector('.apagar')

  botaoApagar.addEventListener('click', () => {
    console.log('botao apagar clicado')
  })

E podemos verificar que a mensagem é realmente exibida no console!

Mas o botão ainda não está cumprindo seu propósito, né?! Precisamos excluir a estrutura da nota do nosso site. Para isso, vamos usar uma habilidade que todos os elementos que mapeamos do HTML possuem, o de se auto excluirem do html! Olha como podemos implementar isso:

 const botaoApagar = blocoNota.querySelector('.apagar')

  botaoApagar.addEventListener('click', () => {
    blocoNota.remove()
  })

Viu como é fácil?

2) Planejando como podemos deixar nossa nota não editável

Já sabemos que a tag textarea é sempre editável, ou seja, posso clicar nela e começar a escrever ou apagar a qualquer momento. Não é isso que encontramos no nosso projeto final, gostaríamos de salvar essa nota, momentaneamente, para que eu não consiga sem querer apagar o que eu escrevi.

Pensando nisso, podemos discutir estratégias de como contornar esse desafio. Uma das estratégias seria: se eu não posso fazer com que o textarea deixe de ser editável, vou coletar tudo que escrevi ali e colocar em uma nova tag para exibir o texto, depois basta esconder o textarea. Tudo isso, claro, atrelado ao clique do botão de editar.

Podemos começar criando um novo espaço para o texto a ser salvo. Vamos aproveitar e colocar um nome na nova tag, class='area-futura-nota':

blocoNota.innerHTML = `
    <div class="cabecalho">
      <button class="editar">🖊️</button>
      <button class="apagar">🗑️</button>
    </div>
    <div class="area-nota">
      <p class="area-futura-nota"></p>
      <textarea class="texto-nota"></textarea>
    </div>
  `

Ok, agora precisamos transportar as anotações da nossa nota do textarea para a tag p recém criada. Para isso, vamos primeiro pegar o que escrevemos na nota e exibir no console:

const textoPrincipal = blocoNota.querySelector('.texto-nota')

botaoEditar.addEventListener('click', () => {
    console.log(textoPrincipal.value)
})

Dpois disso, podemos atualizar nosso eventListener do botão editar com a seguinte cara:

botaoEditar.addEventListener('click', () => {
    if (textoPrincipal.value !== '') {
      console.log(textoPrincipal.value)
    } else {
      console.log('nota vazia, não preciso salvá-la')
    }
  })

Agora sim, vamos finalizar a ação de transportar o texto da textarea para o p:

const areaFuturaNota = blocoNota.querySelector('.area-futura-nota')

botaoEditar.addEventListener('click', () => {
    if (textoPrincipal.value !== '') {
      areaFuturaNota.innerHTML = textoPrincipal.value
    } else {
      console.log('nota vazia, não preciso salvá-la')
    }

3) Escondendo o textarea usando o CSS

Até o momento, transportamos a nota de um lugar para o outro, mas ainda estou vendo o textarea e o projeto final mostra apenas o texto não editável.

Para resolvermos isso, vamos pela primeira vez alterar o arquivo style.css, adicionando as seguintes linhas:

.esconde {
  display: none;
}

O CSS cuida do estilo, do visual, do nosso site. E ele funciona relacionando identificadores nas tags do HTML a um conjunto de regras de estilo. No caso das linhas anteriores, o estilo a ser alterado é de ser invisível ou não no nosso site. Interessante né?!

Para vermos isso acontecendo, podemos colocar a classe esconde no nosso botão de adicionar notas, por exemplo:

  <button id="adicionar" class='esconde'>
    Adicionar Nota!
  </button>

Mas não queremos esconder nosso botão, queremos esconder o textarea então alteramos o nosso código javascript:

  botaoEditar.addEventListener('click', () => {
    if (textoPrincipal.value !== '') {
      areaFuturaNota.innerHTML = textoPrincipal.value
      areaFuturaNota.classList.toggle('esconde')
    } else {
      console.log('nota vazia, não preciso salvá-la')
    }
  })

A nova linha no código adiciona ou retira o nome de uma classe de uma tag. Ou seja, ao clicar novamente no botão de editar, podemos alterar a nossa nota salva.

Agora precisamos ocultar o espaço da tag p enquanto estamos na edição da nota, para não vermos o texto da nossa nota duplicado. Para isso, iniciamos a tag com a classe que a oculta na visualização e adicionamos o mesmo raciocínio do toggle usado na área de texto da nossa nota:

blocoNota.innerHTML = `
    <div class="cabecalho">
      <button class="editar">🖊️</button>
      <button class="apagar">🗑️</button>
    </div>
    <div class="area-nota">
      <p class="area-futura-nota esconde"></p>
      <textarea class="texto-nota"></textarea>
    </div>
  `

  botaoEditar.addEventListener('click', () => {
    if (textoPrincipal.value !== '') {
      areaFuturaNota.innerHTML = textoPrincipal.value
      textoPrincipal.classList.toggle('esconde')
      areaFuturaNota.classList.toggle('esconde')
    } else {
      console.log('nota vazia, não preciso salvá-la')
    }
  })

Leitura Complementar:

Clone this wiki locally