Adicionando e removendo classe com JavaScript

Para adicionar e remover classes em elementos HTML usando JavaScript, você pode utilizar os métodos da propriedade classList. Aqui estão exemplos simples:

1. Adicionar uma classe

const elemento = document.querySelector('#meuElemento');

elemento.classList.add('nova-classe');

2. Remover uma classe

const elemento = document.querySelector('#meuElemento');

elemento.classList.remove('classe-antiga');

3. Alternar (toggle) uma classe

Se você deseja adicionar a classe caso ela não exista ou removê-la caso já esteja presente:

const elemento = document.querySelector('#meuElemento');

elemento.classList.toggle('classe-alternada');

Esses métodos são muito úteis para manipular dinamicamente o estilo de elementos em uma página.

Exemplo de como copiar código com JS

  <pre id="codigo">
    código que será copiado
  </pre>
  <button onclick="copiarCodigo('codigo')">
    Copiar Código </button>
  <script>
  
  function copiarCodigo(id) {
  const codigo = document.getElementById(id).innerText;
  navigator.clipboard.writeText(codigo).then(() => {
   alert('Código copiado para a área de transferência!');
  }).catch(err => {
    console.error('Erro ao copiar o código: ', err);
   });
  }
  
  </script>
    
        /*
        outra opção é utilizar uma string 
        Exemplo
        let string= `Código
        Meu código identado
          testado`;
        function copiarCodigo() {
          navigator.clipboard.writeText(string).then(() => {
            alert('Código copiado para a área de transferência!');
          }).catch(err => {
            console.error('Erro ao copiar o código: ', err);
          });
        }
        */

Enviand variáeis com na url

let usuario = "João";

Criando a URL com parâmetros (encodeURIComponent é usado para segurança)

let url = "cadastrarSetor.html?usuario=" + encodeURIComponent(usuario) + "&id=" + encodeURIComponent(id);

Redirecionando a página

window.location.href = url;

Guardando dados com SessionStorage

sessionStorage.setItem('usuario', 'João')
sessionStorage.getItem('usuario')

Tentando acessar um valor sem saber se tem

Optional Chaining

let meiosPagamento = array.find(item => item.id === "meiosPagamento")?.meiosPagamento ?? " ";

Operador Ternario ?

let destino = usuarioLogado ? "Painel" : "Login";

Operador OU Lógico (||)

let nomeParaExibir = nomeUsuario || "Visitante";