Coloque suas habilidades no Vite em prática com este criador de texto fictício baseado em GUI.

Lorem ipsum é um texto que desenvolvedores e designers de todo o mundo usam como espaço reservado. Se você interage com muitos protótipos de interface do usuário, provavelmente já os encontrou antes.

Aprenda a construir um gerador de Lorem ipsum flexível com Vite e JavaScript e você flexibilizará suas habilidades de desenvolvimento com um resultado útil.

Por que Lorem Ipsum é tão amplamente utilizado?

Você pode estar se perguntando por que tantos desenvolvedores e designers escolhem lorem ipsum quando eles podem simplesmente copiar uma página de um livro de domínio público ou similar. O principal motivo é que ele permite que o usuário ou visualizador tenha uma noção da forma visual de um documento ou protótipo, sem direcionar muito o foco para o próprio texto do espaço reservado.

Imagine que você está projetando um jornal. Em vez de passar pelo trabalho de copiar texto de diferentes fontes para fazer o design tão realista possível, basta copiar o texto padrão do espaço reservado para lorem ipsum e usá-lo em vez de.

instagram viewer

Lorem ipsum é tão amplamente reconhecido que você nem precisa especificar que é um texto de espaço reservado - praticamente todos que o encontrarem reconhecerão imediatamente que o texto é um preenchimento.

Configurando o Project and Development Server

O código utilizado neste projeto está disponível em um Repositório GitHub e é gratuito para você usar sob a licença do MIT. Copie o conteúdo do estilo.css e a lorem.js arquivos e cole-os em suas próprias cópias locais desses arquivos.

Se você quiser dar uma olhada em uma versão ao vivo deste projeto, você pode conferir este demonstração.

Você estará usando o Ferramenta de construção do Vite para definir as coisas. Certifique-se de ter o Node.js e o Gerenciador de pacotes de nós (NPM) ou Yarn instalado em sua máquina, abra seu terminal e execute:

npm criar vite

Ou:

fio criar vite

Isso deve estruturar um projeto Vite vazio. Digite o nome do projeto, defina a estrutura como "Vanilla" e a variante como "Vanilla". Depois de fazer isso, navegue até o diretório do projeto com o cd comando e, em seguida, execute:

npm eu

Ou:

fio

Depois de instalar todas as dependências, abra o projeto no editor de texto de sua preferência e modifique a estrutura do projeto para ficar mais ou menos assim:

Agora, limpe o conteúdo do index.html arquivo e substitua-o pelo seguinte:

html>
<htmlidioma="en">
<cabeça>
<metaconjunto de caracteres="UTF-8" />
<linkrele="ícone"tipo="imagem/svg+xml"href="/vite.svg" />
<metanome="janela de exibição"contente="largura=largura do dispositivo, escala inicial=1,0" />
<título>Gerador Lorem Ipsumtítulo>
cabeça>
<corpo>
<h1>Gerador Lorem Ipsumh1>
<diveu ia="aplicativo">
<divaula="controles">
<forma>
<divaula="ao controle">
<rótulopara="w-count">Palavras por parágraforótulo>
<div>
<entradatipo="faixa"eu ia="w-count"min="10"máximo="100"valor="25"etapa="10">
<períodoeu ia="w-count-label">25período>
div>
div>
<divaula="ao controle">
<rótulopara="p-contagem">contagem de parágrafosrótulo>
<div>
<entradatipo="faixa"eu ia="p-contagem"min="1"máximo="20"etapa="1"valor="3">
<períodoeu ia="p-count-label">3período>
div>
div>
<botãotipo="enviar">Gerarbotão>
forma>
<botãoaula="cópia de">Copiar para área de transferênciabotão>
<divaula="informação">
 Use os controles deslizantes para definir os parâmetros e, em seguida, clique no botão "Gerar".

 Você pode copiar o texto pressionando o botão "Copiar para a área de transferência"
div>
div>
<divaula="saída">div>
div>
<roteirotipo="módulo"origem="/main.js">roteiro>
corpo>
html>

Essa marcação simplesmente define a interface do usuário. O lado esquerdo da tela exibe os controles, enquanto o lado direito mostra a saída. A seguir, abra o main.js arquivo, limpe seu conteúdo e adicione uma única linha para importar estilo.css:

importar'./estilo.css'

Importando o arquivo Lorem e definindo variáveis ​​globais

Abra o repositório GitHub deste projeto, copie o conteúdo do lorem.js arquivo e cole-os em sua cópia local do lorem.js. lorem.js simplesmente exporta uma string muito longa de texto Lorem Ipsum que outros arquivos JavaScript podem usar.

No main.js arquivo, importe o lorem corda do lorem.js arquivo e defina as variáveis ​​necessárias:

importar {lorem} de'./lorem';
deixar text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").dividir(' ');
deixar últimoChar;
deixar wordCountControl = documento.querySelector("#w-count");
deixar parágrafoContControl = documento.querySelector("#p-count");
deixar palavraCountLabel = documento.querySelector("#w-count-label");
deixar parágrafoContLabel = documento.querySelector("#p-count-label");
deixar wordCount = wordCountControl.value;
deixar parágrafoCount = parágrafoCountControl.value;
deixar copiar = documento.querySelector(".cópia de");

Este código usa uma expressão regular para remover qualquer pontuação no lorem texto. O texto variável vincula esta versão modificada do lorem texto. Isso deve facilitar a geração de palavras e parágrafos.

Criando as Funções do Gerador

Para que qualquer frase ou parágrafo gerado aleatoriamente pareça "real", é necessário que haja pontuação. Após definir as variáveis ​​globais, crie uma função chamada gerarRandomPunctuation() e nessa função crie um array chamado personagens e preenchê-lo.

funçãogerar Pontuação Aleatória() {
deixar caracteres = [",", "!", ".", "?"];
deixar personagem = caracteres[Matemática.chão(Matemática.random() * caracteres.comprimento)];
 últimoChar = caractere;
retornar personagem;
}

O bloco de código acima define um array, personagens, que contém sinais de pontuação diferentes. Ele define outra variável, personagem, que define como um elemento aleatório do personagens variedade. A variável global, lastChar, armazena o mesmo valor que a função retorna.

A seguir, crie um geraParágrafo() funcionar com um contar parâmetro que tem um valor padrão de 100.

funçãogerarParágrafo(contagem = 100) {
}

Nesta função, declare um parágrafo array e busca palavras aleatórias do global texto array, em seguida, empurre-o para parágrafo.

deixar parágrafo = [];
para (deixar eu = 1; i <= contagem; i++) {
 parágrafo.push (texto[Matemática.chão(Matemática.random() * text.length)].toLowerCase());
}

Em seguida, adicione o código para colocar em maiúscula a primeira letra na primeira palavra de cada parágrafo:

deixar fl=parágrafo[0];
parágrafo[0] = fl.substituir (fl[0], fl[0].toUpperCase());

Cada parágrafo termina com um sinal de pontuação (geralmente um ponto final), então adicione o código que adiciona um ponto ao final de cada parágrafo.

deixar lwPos = parágrafo.comprimento - 1;
deixar lWord = parágrafo[lwPos];
parágrafo[lwPos] = lWord.replace (lWord, lWord + ".");

Em seguida, implemente a funcionalidade para adicionar uma pontuação gerada aleatoriamente a um elemento aleatório no parágrafo variedade.

parágrafo.paraCada((palavra, índice) => {
se (índice > 0 && índice % 100) {
deixar randomNum = Matemática.chão(Matemática.aleatório() * 4);
deixar pos = índice + randomNum;
deixar randWord = parágrafo[pos];
 parágrafo[pos] = randWord.replace (randWord, randWord + generateRandomPunctuation());
deixar nPalavra=parágrafo[pos + 1];
se (lastChar !== ",") {
 parágrafo[pos + 1] = nWord.replace (nWord[0], nWord[0].toUpperCase());
 }
 }
})

Esse bloco de código gera um caractere de pontuação aleatório e o anexa ao final de um elemento aleatório do parágrafo variedade. Depois de anexar a pontuação, coloca em maiúscula a primeira letra do próximo elemento se a pontuação não for uma vírgula.

Por fim, retorne o parágrafo array formatado como uma string:

retornar parágrafo.juntar(" ");

O texto lorem ipsum deve ter uma 'estrutura' baseada no número de parágrafos que o usuário especifica. Você pode usar um array para definir essa 'estrutura'. Por exemplo, se o usuário deseja um texto lorem ipsum com três parágrafos, o array 'structure' deve ficar assim:

estrutura = ["Primeiro parágrafo.", "\n\n", "Segundo parágrafo.", "\n\n", "Terceiro parágrafo"]

No bloco de código acima, cada "\n \n" representa o espaçamento entre cada parágrafo. Se você logar estrutura.join("") no console do navegador, você deve ver o seguinte:

Crie uma função que gere automaticamente essa estrutura e chame o gerarParágrafo função:

funçãogerar Estrutura(contador de palavras, parágrafo = 1) {
deixar estrutura = [];
para (deixar eu = 0; i 2; i++) {
se (eu % 20) estrutura[i] = generateParagraph (wordCount);
outrose (i < (parágrafo * 2) - 1) estrutura[i] = "\n\n";
 }
retornar estrutura.join("");
}

Adicionando ouvintes de evento aos controles

Adicione um ouvinte de evento "input" ao wordCountControl elemento de entrada e na função de retorno de chamada, defina o contador de palavras ao valor de entrada. Em seguida, atualize o rótulo.

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

Em seguida, adicione um ouvinte de evento "input" ao parágrafoCountControl elemento de entrada e na função de retorno de chamada defina o parágrafoContagem ao valor de entrada e atualize o rótulo.

parágrafoCountControl.addEventListener("entrada", (e) => {
 parágrafoCount= e.target.value;
 parágrafoCountLabel.textContent = e.target.value;
})

Adicione um ouvinte de evento "click" ao cópia de botão que chama de volta para o copyText() quando o evento é acionado.

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

Por fim, adicione um ouvinte de evento "enviar" ao forma elemento HTML e chame o updateUI função na função de retorno de chamada.

documento.querySelector("forma").addEventListener('enviar', (e) => {
 e.preventDefault();
 atualizaçãoUI();
})

Finalizando e atualizando a IU

Criar uma função getControlValues que retorna contador de palavras e parágrafoContagem como um objeto.

funçãogetControlValues() {
retornar { wordCount, parágrafoCount };
}

Em seguida, crie o updateUI() função que renderiza o texto gerado na tela para o usuário:

funçãoupdateUI() {
deixar output = generateStructure (getControlValues().wordCount, getControlValues().paragraphCount)
documento.querySelector(".saída").innerText = saída;
}

Quase pronto. Crie o copyText() função que grava o texto na área de transferência sempre que o usuário clica no botão "Copiar para a área de transferência".

assíncronofunçãocopyText() {
deixar texto = documento.querySelector(".saída").innerText;
tentar {
aguardam navigator.clipboard.writeText (texto);
 alerta('Copiado para a área de transferência');
 } pegar (err) {
 alerta('Falha ao copiar: ', erro);
 }
 }

Então ligue para o updateUI() função:

atualizaçãoUI();

Parabéns! Você construiu um gerador de texto lorem ipsum com JavaScript e Vite.

Incremente seu desenvolvimento de JavaScript com o Vite

O Vite é uma ferramenta de front-end popular que facilita a configuração de sua estrutura de front-end. Ele suporta uma variedade de estruturas como React, Svelte, SolidJS e até JavaScript simples. Muitos desenvolvedores de JavaScript usam o Vite porque é muito fácil de configurar e muito rápido.