Como criar um gerador de texto Lorem Ipsum com JavaScript e Vite

Leonard Strauss included in Programming Web Development Javascript Html

2023-07-23 1783 words 9 minutes

Contents

A frase acima mencionada tem sido utilizada por programadores e designers de todo o mundo como um substituto para conteúdo significativo. Se alguém se deparar frequentemente com protótipos de interfaces de utilizador, é possível que já tenha encontrado esta afirmação.

Utilizando a combinação de Vite e JavaScript, é possível adquirir proficiência no desenvolvimento de software enquanto se cria um gerador Lorem ipsum versátil que produz um resultado prático.

Porque é que o Lorem Ipsum é tão utilizado?

O Lorem ipsum serve como uma ferramenta eficaz para programadores e designers na criação de protótipos ou maquetas de documentos. Fornece uma ideia geral da estrutura visual do conteúdo, ao mesmo tempo que minimiza a atenção sobre o texto de marcador de posição utilizado. Isto permite que os utilizadores ou espectadores se concentrem mais na disposição geral e no design, em vez de se distraírem com palavras de preenchimento.

Considerar a possibilidade de criar uma apresentação de jornal através da obtenção de conteúdos apropriados de várias fontes, em vez de optar por uma metodologia expedita que implique a reprodução de texto de preenchimento Lorem Ipsum, que serve de substituto convencional para o conteúdo real durante a fase de protótipo.

A utilização da Lorem ipsum tornou-se omnipresente ao ponto de a sua identificação como texto de preenchimento ser redundante. O reconhecimento instantâneo do seu objetivo de preenchimento pela maioria das pessoas que o encontram sublinha a sua familiaridade generalizada.

Configurar o projeto e o servidor de desenvolvimento

O código-fonte deste projeto pode ser acedido através de um repositório do GitHub, que concede permissão para o utilizar gratuitamente ao abrigo dos termos da licença MIT. Para obter os estilos necessários e o texto de marcador de posição, copie o conteúdo dos ficheiros ‘style.css’ e ’lorem.js’ e replique-os nas suas versões pessoais destes respectivos ficheiros.

Por favor, reveja a seguinte declaração de uma forma mais eloquente:Se alguém desejar inspecionar uma demonstração funcional deste projeto, pode visitar a ligação fornecida para aceder à

demonstração

Siga estes passos para garantir que tem o software necessário instalado antes de prosseguir com as instruções:1. Verifique se tem o Node.js e o NPM ou o Yarn instalados no seu sistema, executando o comando node -v e npm -v ou yarn -v , respetivamente. Se qualquer um desses comandos retornar um erro, talvez seja necessário instalar o Node.js e o gerenciador de pacotes separadamente.2.Depois de ter verificado que tem o software necessário instalado, abra uma janela de terminal e navegue para o diretório onde pretende utilizar a ferramenta de construção Vite.3. Para começar a construir o seu projeto utilizando o Vite, escreva o comando vue create my-project --template vue/simple na janela de terminal. Esse comando criará um novo projeto Vue.js usando o modelo simples

 npm create vite

Ou:

 yarn create vite

 npm i

Ou:

 yarn

Depois de concluir a instalação de todas as dependências necessárias, acesse o projeto em um editor de texto de sua preferência e ajuste sua arquitetura para que se assemelhe ao formato a seguir:

O conteúdo anterior do ficheiro “index.html” deve ser eliminado e substituído pelo seguinte.

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg\\+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lorem Ipsum Generator</title>
  </head>
  <body>
    <h1>Lorem Ipsum Generator</h1>
    <div id="app">
      <div class="controls">
        <form>
          <div class="control">
            <label for="w-count">Words per paragraph</label>
            <div>
              <input type="range" id="w-count" min="10" max="100" value="25" step="10">
              <span id="w-count-label">25</span>
            </div>
          </div>
          <div class="control">
             <label for="p-count">Paragraph count</label>
            <div>
              <input type="range" id="p-count" min="1" max="20" step="1" value="3">
              <span id="p-count-label">3</span>
            </div>
          </div>
          <button type="submit">Generate</button>
        </form>
        <button class="copy">Copy to Clipboard</button>
        <div class="info">
          Use the sliders to set the parameters, then hit the "Generate" button.
          
          You can copy the text by hitting the "Copy to Clipboard" button
        </div>
      </div>
      <div class="output"></div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

O segmento de código acima mencionado especifica a disposição dos elementos no ecrã de visualização, com o painel de controlo situado no lado esquerdo e os resultados apresentados no lado direito. Posteriormente, deve aceder-se ao ficheiro main.js, eliminar o seu conteúdo atual e incorporar uma linha solitária para importar style.css.

 import './style.css'

Importar o ficheiro Lorem e definir variáveis globais

Obtenha o conteúdo do ficheiro “lorem.js” do repositório GitHub especificado e duplique-o numa cópia local idêntica denominada “lorem.js”. A função deste ficheiro “lorem.js” é exportar uma quantidade abundante de texto Lorem Ipsum que pode ser utilizado por vários ficheiros JavaScript.

No ficheiro main.js, importamos a cadeia Lorem do ficheiro lorem.js e declaramos as variáveis necessárias.

 import { lorem } from './lorem';

let text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").split(' ');
let lastChar;
let wordCountControl = document.querySelector("#w-count");
let paragraphCountControl = document.querySelector("#p-count");
let wordCountLabel = document.querySelector("#w-count-label");
let paragraphCountLabel = document.querySelector("#p-count-label");
let wordCount = wordCountControl.value;
let paragraphCount = paragraphCountControl.value;
let copy = document.querySelector(".copy");

Este código utiliza um padrão regex para eliminar todas as pontuações do texto Lorem Ipsum, que é depois armazenado na variável “text”. Ao fazê-lo, a geração de palavras e frases torna-se mais fácil de gerir.

Criar as funções geradoras

Para que uma frase ou parágrafo gerado aleatoriamente pareça genuíno, é necessária pontuação. Para o efeito, depois de estabelecer as variáveis globais, crie uma função intitulada generateRandomPunctuation() , que dará origem a uma matriz conhecida por caracteres .

 function generateRandomPunctuation() {
    let characters = [",", "!", ".", "?"];
    let character = characters[Math.floor(Math.random() * characters.length)];
    lastChar = character;
    return character;
}

O segmento de código acima mencionado cria uma matriz denominada “caracteres”, que inclui diversos sinais de pontuação. Além disso, designa outra variável chamada “carácter” e atribui-lhe um elemento arbitrário da matriz “caracteres”.Além disso, a variável global “lastChar” é definida como o valor da expressão de retorno da função, que corresponde ao valor armazenado na variável “character”.

Criar uma nova função chamada generateParagraph() que recebe um parâmetro opcional count com um valor por defeito de 100.

 function generateParagraph(count = 100) {
}

Nesta função, é declarada uma matriz de parágrafos e várias palavras seleccionadas aleatoriamente são retiradas da matriz global de texto, sendo subsequentemente adicionadas à matriz de parágrafos.

 let paragraph = [];

for (let i = 1; i <= count; i\\+\\+) {
    paragraph.push(text[Math.floor(Math.random() * text.length)].toLowerCase());
}

Incorporar um mecanismo que inicie a prática de renderizar o carácter inicial de cada parágrafo em maiúsculas no texto.

 let fl=paragraph[0];
paragraph[0] = fl.replace(fl[0], fl[0].toUpperCase());

Cada frase termina com um sinal de pontuação, normalmente um ponto final, e por isso requer a adição do código que insere um ponto final na conclusão de cada parágrafo.

 let lwPos = paragraph.length - 1;
let lWord = paragraph[lwPos];
paragraph[lwPos] = lWord.replace(lWord, lWord \\+ ".");

Em seguida, vamos incorporar a capacidade de adicionar um sinal de pontuação arbitrário a uma frase selecionada dentro do

 paragraph.forEach((word, index) => {
    if (index > 0 && index % 10 === 0) {
        let randomNum = Math.floor(Math.random() * 4);
        let pos = index \\+ randomNum;
        let randWord = paragraph[pos];
        paragraph[pos] = randWord.replace(randWord, randWord \\+ generateRandomPunctuation());
        let nWord=paragraph[pos \\+ 1];

        if (lastChar !== ",") {
            paragraph[pos \\+ 1] = nWord.replace(nWord[0], nWord[0].toUpperCase());
        }
    }
})

O bloco de código selecciona aleatoriamente um sinal de pontuação da lista de pontuações e insere-o na posição final de um constituinte arbitrário da matriz de parágrafos. Posteriormente, se o sinal de pontuação selecionado não coincidir com uma vírgula, a letra inicial da palavra seguinte na frase será convertida em maiúsculas.

Em última análise, a matriz de parágrafos deve ser convertida de volta à sua forma original e devolvida como uma cadeia de caracteres.

 return paragraph.join(" ");

A forma como o texto Lorem Ipsum deve ser organizado depende da quantidade de parágrafos especificada pelo utilizador. É possível utilizar uma matriz para estabelecer esta “estrutura”. Supondo que o utilizador pretende uma passagem Lorem Ipsum composta por três parágrafos, a matriz “estrutura” pode ter o seguinte aspeto

 structure = ["First paragraph.", "\n \n", "Second paragraph.", "\n \n", "Third paragraph"]

A notação acima mencionada indica que existem dois caracteres de nova linha consecutivos ("\n \n"), que servem para criar uma separação com espaçamento duplo entre os parágrafos subsequentes do texto. Quando executado na consola Web, registando o resultado de “structure.join(’’)”, produzirá o seguinte resultado:

Pode ser implementada uma função para automatizar o processo de construção da estrutura de parágrafos acima mencionada, composta por uma introdução, um corpo e uma conclusão, e chamar a função generateParagraph para produzir cada componente.

 function generateStructure(wordCount, paragraph = 1) {
    let structure = [];

    for (let i = 0; i < paragraph * 2; i\\+\\+) {
        if (i % 2 === 0) structure[i] = generateParagraph(wordCount);
        else if (i < (paragraph * 2) - 1) structure[i] = "\n \n";
    }

    return structure.join("");
}

Adicionar ouvintes de eventos aos controlos

Adicione um ouvinte ao elemento de entrada de texto wordCountControl com um tipo de evento 'input' e, na função de retorno de chamada, defina a variável wordCount para o valor introduzido pelo utilizador. Depois de atualizar a etiqueta em conformidade, repita estes passos também para os botões 4G e 5G .

 wordCountControl.addEventListener("input", (e) => {
    wordCount = e.target.value;
    wordCountLabel.textContent= e.target.value;
})

Adicione um ouvinte de eventos “input” ao elemento paragraphCountControl e, na função de retorno de chamada, defina a variável paragraphCount para o valor de entrada e actualize a etiqueta em conformidade.

 paragraphCountControl.addEventListener("input", (e) => {
    paragraphCount= e.target.value;
    paragraphCountLabel.textContent = e.target.value;
})

Adicione um ouvinte de eventos “click” ao botão de cópia, que chamará a função “copyText()” quando o evento for ativado.

 copy.addEventListener("click", ()=>copyText());

Adicione um evento “submit” ao elemento HTML do formulário e, na função de retorno de chamada do evento, invoque a função updateUI.

 document.querySelector("form").addEventListener('submit', (e) => {
    e.preventDefault();
    updateUI();
})

Finalização e atualização da IU

 function getControlValues() {
    return { wordCount, paragraphCount };
}

O código requer uma função para apresentar a informação actualizada na IU, o que é conseguido através da criação da função updateUI() . Esta função recebe parâmetros para determinar o conteúdo e o aspeto dos dados apresentados, garantindo uma experiência visual optimizada para os utilizadores.

 function updateUI() {
    let output = generateStructure(getControlValues().wordCount, getControlValues().paragraphCount)
    document.querySelector(".output").innerText = output;
}

O código está quase completo. O passo final consiste em formular um método chamado copyText() que permitirá ao utilizador transferir o texto selecionado para a área de transferência quando clicar no botão “Copy to Clipboard”.

 async function copyText() {
    let text = document.querySelector(".output").innerText;
    try {
      await navigator.clipboard.writeText(text);
      alert('Copied to clipboard');
    } catch (err) {
      alert('Failed to copy: ', err);
    }
  }

Em seguida, chamar a função updateUI():

 updateUI();

Os meus mais sinceros parabéns pela criação bem sucedida de um gerador de texto Lorem Ipsum utilizando JavaScript e Vite.

Supercharge Your JavaScript Development With Vite

Vite é uma ferramenta de front-end estimada que facilita o estabelecimento da estrutura de front-end preferida. Ele acomoda vários frameworks, como React, Svelte, SolidJS e até mesmo JavaScript sem adornos. Uma infinidade de desenvolvedores de JavaScript optam pelo Vite devido ao seu processo de configuração simples e desempenho rápido.