Metti in pratica le tue abilità di Vite con questo creatore di testo fittizio basato su GUI.

Lorem ipsum è un testo che sviluppatori e designer di tutto il mondo usano come segnaposto. Se interagisci con molti prototipi dell'interfaccia utente, probabilmente l'hai già incontrato.

Scopri come creare un generatore Lorem ipsum flessibile con Vite e JavaScript e metterai alla prova le tue capacità di sviluppo con un risultato utile.

Perché Lorem Ipsum è così ampiamente utilizzato?

Ci si potrebbe chiedere perché così tanti sviluppatori e designer scelgano lorem ipsum quando potrebbero semplicemente copiare una pagina da un libro di pubblico dominio o simili. Il motivo principale è che consente all'utente o al visualizzatore di avere un'idea della forma visiva di un documento o prototipo, senza focalizzare troppo l'attenzione sul testo segnaposto stesso.

Immagina di progettare un giornale. Invece di affrontare il problema di copiare il testo da fonti diverse per rendere il design come realistico possibile, puoi semplicemente copiare il testo segnaposto lorem ipsum standard e usarlo Invece.

instagram viewer

Lorem ipsum è così ampiamente riconosciuto che non è nemmeno necessario specificare che si tratta di un testo segnaposto: praticamente chiunque lo incontri riconoscerà immediatamente che il testo è di riempimento.

Configurazione del server di progetto e sviluppo

Il codice utilizzato in questo progetto è disponibile in a Deposito GitHub ed è gratuito per l'uso con la licenza MIT. Copia il contenuto del file style.css e il lorem.js file e incollali nelle tue copie locali di questi file.

Se vuoi dare un'occhiata a una versione live di questo progetto, puoi dare un'occhiata a questo dimostrazione.

Utilizzerai il Strumento di costruzione Vite per sistemare le cose. Assicurati di avere Node.js e il file Node Package Manager (NPM) o Yarn installato sulla tua macchina, quindi apri il tuo terminale ed esegui:

npm crea vite

O:

filato crea vite

Questo dovrebbe impalcare un progetto Vite vuoto. Immettere il nome del progetto, impostare il framework su "Vanilla" e la variante su "Vanilla". Dopo averlo fatto, vai alla directory del progetto con il file CD comando, quindi eseguire:

npm i

O:

filato

Dopo aver installato tutte le dipendenze, apri il progetto nel tuo editor di testo preferito, quindi modifica la struttura del progetto in modo che assomigli a questo:

Ora, cancella il contenuto del file indice.html file e sostituirlo con il seguente:

html>
<htmllang="it">
<Testa>
<metaset di caratteri="UTF-8" />
<collegamentorel="icona"tipo="immagine/svg+xml"href="/vita.svg" />
<metanome="finestra"contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1.0" />
<titolo>Generatore Lorem Ipsumtitolo>
Testa>
<corpo>
<h1>Generatore Lorem Ipsumh1>
<divid="app">
<divclasse="controlli">
<modulo>
<divclasse="controllo">
<etichettaper="w-count">Parole per paragrafoetichetta>
<div>
<ingressotipo="allineare"id="w-count"min="10"max="100"valore="25"fare un passo="10">
<spanid="w-conteggio-etichetta">25span>
div>
div>
<divclasse="controllo">
<etichettaper="p-count">Conteggio dei paragrafietichetta>
<div>
<ingressotipo="allineare"id="p-count"min="1"max="20"fare un passo="1"valore="3">
<spanid="etichetta-p-count">3span>
div>
div>
<pulsantetipo="invia">crearepulsante>
modulo>
<pulsanteclasse="copia">Copia negli appuntipulsante>
<divclasse="informazioni">
 Usa i cursori per impostare i parametri, quindi premi il pulsante "Genera".

 Puoi copiare il testo premendo il pulsante "Copia negli Appunti".
div>
div>
<divclasse="produzione">div>
div>
<copionetipo="modulo"src="/principale.js">copione>
corpo>
html>

Questo markup definisce semplicemente l'interfaccia utente. Il lato sinistro dello schermo mostra i controlli, mentre il lato destro mostra l'output. Quindi, apri il file principale.js file, cancellarne il contenuto e aggiungere una singola riga da importare style.css:

importare'./stile.css'

Importazione del file Lorem e definizione delle variabili globali

Apri il repository GitHub di questo progetto, copia il contenuto del file lorem.js file e incollali nella tua copia locale di lorem.js. lorem.js esporta semplicemente una stringa molto lunga di testo Lorem Ipsum che può essere utilizzata da altri file JavaScript.

Nel principale.js file, importa il file lorem stringa dal lorem.js file e definire le variabili necessarie:

importare { lorem } da'./lorem';
permettere testo = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").diviso(' ');
permettere lastChar;
permettere wordCountControl = documento.querySelector("#w-count");
permettere paragrafoCountControl = documento.querySelector("#p-count");
permettere wordCountLabel = documento.querySelector("#w-conteggio-etichetta");
permettere paragrafoCountLabel = documento.querySelector("#p-conteggio-etichetta");
permettere wordCount = wordCountControl.value;
permettere conteparagrafo = ContaparagrafoControllo.valore;
permettere copia = documento.querySelector(".copia");

Questo codice utilizza un'espressione regolare per rimuovere qualsiasi punteggiatura nel lorem testo. IL testo variabile associa questa versione modificata di lorem testo. Questo dovrebbe rendere più semplice la generazione di parole e paragrafi.

Creazione delle funzioni del generatore

Affinché qualsiasi frase o paragrafo generato casualmente appaia "reale", deve esserci la punteggiatura. Dopo aver definito le variabili globali, creare una funzione chiamata generarePunteggiaturaCasuale() e in quella funzione creare un array chiamato caratteri e popolarlo.

funzionegenerateRandomPunctuation() {
permettere caratteri = [",", "!", ".", "?"];
permettere carattere = caratteri[Matematica.pavimento(Matematica.random() * caratteri.lunghezza)]);
 lastChar = carattere;
ritorno carattere;
}

Il blocco di codice sopra definisce un array, caratteri, che contiene diversi segni di punteggiatura. Definisce un'altra variabile, carattere, che imposta su un elemento casuale da caratteri vettore. La variabile globale, lastChar, memorizza lo stesso valore che la funzione restituisce.

Quindi, crea un file generaParagrafo() funzione con A contare parametro che ha un valore predefinito di 100.

funzionegenerateParagrafo(contare = 100) {
}

In questa funzione dichiarare a paragrafo array e recupera parole casuali dal global testo array, quindi inseriscilo in paragrafo.

permettere paragrafo = [];
per (permettere io = 1; io <= contare; i++) {
 paragrafo.push (testo[Matematica.pavimento(Matematica.random() * text.length)].toLowerCase());
}

Successivamente, aggiungi il codice per scrivere in maiuscolo la prima lettera nella prima parola di ogni paragrafo:

permettere fl=paragrafo[0];
paragrafo[0] = fl.replace (fl[0], fl[0].toUpperCase());

Ogni paragrafo termina con un segno di punteggiatura (di solito un punto), quindi aggiungi il codice che aggiunge un punto alla fine di ogni paragrafo.

permettere lwPos = paragrafo.lunghezza - 1;
permettere lWord = paragrafo[lwPos];
paragrafo[lwPos] = lWord.replace (lWord, lWord + ".");

Successivamente, implementa la funzionalità per aggiungere una punteggiatura generata casualmente a un elemento casuale nel file paragrafo vettore.

paragrafo.forEach((parola, indice) => {
Se (indice > 0 && indice % 100) {
permettere numerocasuale = Matematica.pavimento(Matematica.casuale() * 4);
permettere pos = indice + randomNum;
permettere randWord = paragrafo[pos];
 paragrafo[pos] = randWord.replace (randWord, randWord + generateRandomPunctuation());
permettere nParola=paragrafo[pos + 1];
Se (ultimoCarattere!== ",") {
 paragrafo[pos + 1] = nParola.sostituisci (nParola[0], nParola[0].toUpperCase());
 }
 }
})

Questo blocco di codice genera un carattere di punteggiatura casuale e lo aggiunge alla fine di un elemento casuale da paragrafo vettore. Dopo aver aggiunto la punteggiatura, rende maiuscola la prima lettera dell'elemento successivo se la punteggiatura non è una virgola.

Infine, restituisci il file paragrafo array formattato come stringa:

ritorno paragrafo.join(" ");

Il testo lorem ipsum dovrebbe avere una 'struttura' basata sul numero di paragrafi specificati dall'utente. Puoi usare un array per definire questa 'struttura'. Ad esempio, se l'utente desidera un testo lorem ipsum con tre paragrafi, l'array 'structure' dovrebbe apparire così:

struttura = ["Primo paragrafo.", "\n\n", "Secondo paragrafo.", "\n\n", "Terzo paragrafo"]

Nel blocco di codice sopra, ogni "\n \n" rappresenta la spaziatura tra ogni paragrafo. Se accedi struttura.join("") nella console del browser, dovresti vedere quanto segue:

Crea una funzione che genera automaticamente questa struttura e chiama il metodo generateParagrafo funzione:

funzionegenerateStruttura(wordCount, paragrafo = 1) {
permettere struttura = [];
per (permettere io = 0; io < paragrafo * 2; i++) {
Se (io % 20) struttura[i] = generateParagraph (wordCount);
altroSe (i < (paragrafo * 2) - 1) struttura[i] = "\n\n";
 }
ritorno struttura.join("");
}

Aggiunta di Event Listener ai controlli

Aggiungi un listener di eventi "input" al file wordCountControl elemento di input e nella funzione di callback, impostare il wordCount al valore di ingresso. Quindi aggiorna l'etichetta.

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

Successivamente, aggiungi un listener di eventi "input" al file paragrafoCountControl elemento di input e nella funzione di callback impostare il paragrafoConteggio al valore di input e aggiornare l'etichetta.

sectionCountControl.addEventListener("ingresso", (e) => {
 sectionCount= e.target.value;
 sectionCountLabel.textContent = e.target.value;
})

Aggiungi un listener di eventi "click" al file copia pulsante che richiama al Copia testo() quando l'evento si attiva.

copia.addEventListener("clic", ()=>copiaTesto());

Infine, aggiungi un listener di eventi "invia" al file modulo elemento HTML e chiama il file updateUI funzione nella funzione di callback.

documento.querySelector("modulo").addEventListener('invia', (e) => {
 e.preventDefault();
 aggiornaUI();
})

Completamento e aggiornamento dell'interfaccia utente

Crea una funzione getControlValues che ritorna wordCount E paragrafoConteggio come oggetto.

funzionegetControlValues() {
ritorno { conteggioparole, conteggioparagrafi };
}

Quindi crea il file aggiornaUI() funzione che rende il testo generato sullo schermo per l'utente:

funzioneupdateUI() {
permettere output = generateStructure (getControlValues().wordCount, getControlValues().paragraphCount)
documento.querySelector(".produzione").innerText = uscita;
}

Quasi fatto. Crea il Copia testo() funzione che scrive il testo negli appunti ogni volta che l'utente fa clic sul pulsante "Copia negli appunti".

asincronofunzioneCopia testo() {
permettere testo = documento.querySelector(".produzione").innerText;
Tentativo {
aspetta navigator.clipboard.writeText (testo);
 mettere in guardia('Copiato negli appunti');
 } presa (errare) {
 mettere in guardia('Impossibile copiare: ', errare);
 }
 }

Poi chiama il aggiornaUI() funzione:

aggiornaUI();

Congratulazioni! Hai creato un generatore di testo lorem ipsum con JavaScript e Vite.

Potenzia il tuo sviluppo JavaScript con Vite

Vite è un popolare strumento di frontend che semplifica la configurazione del framework di frontend. Supporta una varietà di framework come React, Svelte, SolidJS e persino JavaScript semplice e vaniglia. Molti sviluppatori JavaScript usano Vite perché è molto facile da configurare e molto veloce.