Gerar Parágrafo

Gerar Elementos Paragrafos

Crie um arquivo HTML

Com a estrutura básica e adicione um `form` com um `textarea` para a entrada do texto e um botão para gerar os parágrafos.


  <!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Gerador de Parágrafos</title>
      <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
      <main>
        <form id="paragraph-form">
          <div>
            <label for="text">Texto:</label>
            <textarea id="text" rows="10"></textarea>
          </div>
          <div>
            <button type="button" id="generate-paragraph">Gerar Parágrafo</button>
          </div>
          <div id="output"></div>
          <button id="copy-result" style="display: none;">Copiar Resultado</button>
        </form>
      </main>
      <script src="script.js"></script>
    </body>
  </html>

Crie um arquivo JavaScript

para adicionar a funcionalidade de gerar os parágrafos quando o botão for clicado.


  document.getElementById('generate-paragraph').addEventListener('click', function() {
    const text = document.getElementById('text').value;
    const output = document.getElementById('output');
    const paragraphs = text.split(/\r?\n/).map((p, index, array) => {
      let paragraph = p.trim();
      if (paragraph) {
        // Adiciona tags  e  e uma quebra de linha se não for o último parágrafo
        return `<p>${paragraph}</p>${index < array.length -  1 ? '

' : ''}`;
      }
      return '';
    }).join('');
    output.innerHTML = paragraphs;
  });

Neste exemplo, o JavaScript pega o texto do `textarea`, divide-o em parágrafos com base em quebras de linha e cria elementos `p` para cada parágrafo. O resultado é então inserido na `div` com o ID `output`.

Lembre-se de vincular corretamente o arquivo CSS ao HTML e o arquivo JavaScript também. O arquivo `styles.css` deve ser vinculado no cabeçalho do HTML e o arquivo `script.js` deve ser vinculado logo antes do fechamento da tag `body`.

Este código já adiciona as tags `` ao texto inserido no `textarea`. Quando o botão "Gerar Parágrafo" é clicado, o texto é dividido em parágrafos com base em quebras de linha e cada parágrafo é envolvido com tags ``` e ```. O resultado é então inserido na `div` com o ID `output`.

Neste código, a função `map()` recebe três argumentos: o parágrafo atual (`p`), o índice do parágrafo (`index`) e o array de parágrafos (`array`). O código verifica se o parágrafo atual não está vazio e, em seguida, adiciona as tags ``` e ``` e uma quebra de linha (`

`) se não for o último parágrafo no array. O elemento `` ` é usado para criar uma quebra de linha no HTML.

Se você deseja que os parágrafos sejam exibidos inline (um após o outro na mesma linha) em vez de blocos (um abaixo do outro), você pode adicionar o seguinte código CSS:


  p {
    display: inline;
    margin-right:  10px; /* Espaçamento entre os parágrafos */
  }

Este código CSS define a propriedade `display` para `inline`, o que faz com que os elementos `` sejam exibidos na mesma linha. A propriedade `margin-right` é usada para adicionar um espaço entre os parágrafos.

Certifique-se de que o arquivo CSS esteja vinculado ao arquivo HTML para que essas regras de estilo sejam aplicad

Copiar conteúdo

Para adicionar um botão que copia o resultado para a área de transferência após o botão "Gerar Parágrafo" ser clicado, você pode seguir os passos abaixo:

1. Adicione um botão HTML para a funcionalidade de copiar após a `div` de resultado:


  <button id="copy-result" style="display: none;">Copiar Resultado</button>

Adicione o seguinte código JavaScript para copiar o conteúdo da `div` de resultado para a área de transferência quando o botão "Copiar Resultado" é clicado:


document.getElementById('copy-result').addEventListener('click', function() {
  var resultDiv = document.getElementById('output');
  var range = document.createRange();
  range.selectNode(resultDiv);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
  window.getSelection().removeAllRanges();
});

Copiar o resultado com mensagem


// Copiar o resultado com mensagem
document.getElementById('copy-result').addEventListener('click', function() {
  var resultDiv = document.getElementById('output');
  var range = document.createRange();
  range.selectNode(resultDiv);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  try {
    var successful = document.execCommand('copy');
    if (successful) {
      // Exibe uma caixa de diálogo de confirmação ao usuário
      if (window.confirm("Seu conteúdo foi copiado com sucesso!")) {
        // Remove o conteúdo da área de transferência
        window.getSelection().removeAllRanges();
      }
    } else {
      console.log('Ops, não é possível copiar');
    }
  } catch (err) {
    console.log('Ops, não é possível copiar');
  }
});

Este código adiciona um ouvinte de evento ao botão com o ID `copy-result`. Quando o botão é clicado, ele cria um `Range` que seleciona o conteúdo da `div` de resultado e adiciona esse `Range` à seleção atual do navegador. Em seguida, ele tenta executar o comando `copy`, que copia a seleção atual para a área de transferência. Finalmente, ele limpa a seleção atual do navegador