Bruk Vite-ferdighetene dine i praksis med denne GUI-baserte dummy-tekstprodusenten.

Lorem ipsum er tekst som utviklere og designere over hele verden bruker som plassholder. Hvis du samhandler med mange UI-prototyper, har du sannsynligvis kommet over det før.

Lær hvordan du bygger en fleksibel Lorem ipsum-generator med Vite og JavaScript, og du vil bøye utviklingsferdighetene dine med et nyttig resultat.

Hvorfor er Lorem Ipsum så mye brukt?

Du lurer kanskje på hvorfor så mange utviklere og designere velger lorem ipsum når de bare kunne kopiere en side fra en offentlig domenebok eller lignende. Hovedårsaken er at den lar brukeren eller seeren få en følelse av den visuelle formen til et dokument eller prototype, uten å drive for mye fokus til selve plassholderteksten.

Tenk deg at du designer en avis. I stedet for å gå gjennom bryet med å kopiere tekst fra forskjellige kilder for å lage designet som realistisk som mulig, kan du bare kopiere standard lorem ipsum plassholdertekst og bruke den i stedet.

instagram viewer

Lorem ipsum er så allment anerkjent at du ikke engang trenger å spesifisere at det er en plassholdertekst – praktisk talt alle som kommer over den, vil umiddelbart gjenkjenne at teksten er utfyllende.

Sette opp prosjekt- og utviklingsserveren

Koden som brukes i dette prosjektet er tilgjengelig i en GitHub-depot og er gratis for deg å bruke under MIT-lisensen. Kopier innholdet i style.css og lorem.js filer og lim dem inn i dine egne lokale kopier av disse filene.

Hvis du vil ta en titt på en live-versjon av dette prosjektet, kan du sjekke ut denne demo.

Du vil bruke Vite byggeverktøy å sette opp ting. Sørg for at du har Node.js og Node Package Manager (NPM) eller Garn installert på maskinen din, åpne deretter terminalen og kjør:

npm skape vite

Eller:

garn skape vite

Dette bør stillas et tomt Vite-prosjekt. Skriv inn prosjektnavnet, sett rammeverket til "Vanilla" og varianten til "Vanilla". Etter å ha gjort det, naviger til prosjektkatalogen med cd kommando, kjør deretter:

npm i

Eller:

garn

Etter å ha installert alle avhengighetene, åpner du prosjektet i tekstredigeringsprogrammet du ønsker, og endrer deretter prosjektstrukturen slik at den ser slik ut:

Fjern nå innholdet i index.html fil og erstatt den med følgende:

html>
<htmllang="no">
<hode>
<metategnsett="UTF-8" />
<linkrel="ikon"type="image/svg+xml"href="/vite.svg" />
<metaNavn="viewport"innhold="width=device-width, initial-scale=1.0" />
<tittel>Lorem Ipsum Generatortittel>
hode>
<kropp>
<h1>Lorem Ipsum Generatorh1>
<divid="app">
<divklasse="kontroller">
<form>
<divklasse="kontroll">
<merkelapptil="w-count">Ord per avsnittmerkelapp>
<div>
<inputtype="område"id="w-count"min="10"maks="100"verdi="25"steg="10">
<spanid="w-count-label">25span>
div>
div>
<divklasse="kontroll">
<merkelapptil="p-telling">Antall avsnittmerkelapp>
<div>
<inputtype="område"id="p-telling"min="1"maks="20"steg="1"verdi="3">
<spanid="p-count-label">3span>
div>
div>
<knapptype="sende inn">generereknapp>
form>
<knappklasse="kopiere">Kopiere til utklippstavleknapp>
<divklasse="info">
 Bruk glidebryterne til å stille inn parameterne, og trykk deretter på "Generer"-knappen.

 Du kan kopiere teksten ved å trykke på "Kopier til utklippstavle"-knappen
div>
div>
<divklasse="produksjon">div>
div>
<manustype="modul"src="/main.js">manus>
kropp>
html>

Denne markeringen definerer ganske enkelt brukergrensesnittet. Venstre side av skjermen viser kontrollene, mens høyre side viser utdata. Deretter åpner du main.js fil, fjern innholdet og legg til en enkelt linje for å importere style.css:

import'./style.css'

Importere Lorem-filen og definere globale variabler

Åpne dette prosjektets GitHub-depot, kopier innholdet i lorem.js fil, og lim dem inn i din lokale kopi av lorem.js. lorem.js eksporterer ganske enkelt en veldig lang streng med Lorem Ipsum-tekst som andre JavaScript-filer kan bruke.

I main.js fil, importer lorem streng fra lorem.js fil og definer de nødvendige variablene:

import { lorem } fra'./lorem';
la text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").dele(' ');
la lastChar;
la wordCountControl = dokument.querySelector("#w-count");
la paragraphCountControl = dokument.querySelector("#p-tall");
la wordCountLabel = dokument.querySelector("#w-count-label");
la paragraphCountLabel = dokument.querySelector("#p-count-label");
la wordCount = wordCountControl.value;
la paragraphCount = paragraphCountControl.value;
la kopi = dokument.querySelector(".kopiere");

Denne koden bruker et regulært uttrykk for å fjerne tegnsetting i lorem tekst. De tekst variabel binder denne modifiserte versjonen av lorem tekst. Dette skal gjøre det lettere å generere ord og avsnitt.

Opprette generatorfunksjonene

For at en tilfeldig generert setning eller avsnitt skal fremstå som "ekte", må det være tegnsetting. Etter å ha definert de globale variablene, lag en funksjon kalt genererRandomPunctuation() og i den funksjonen oppretter du en matrise kalt tegn og befolke den.

funksjongenerer tilfeldig tegnsetting() {
la tegn = [",", "!", ".", "?"];
la tegn = tegn[Matte.gulv(Matte.random() * characters.length)];
 lastChar = tegn;
komme tilbake karakter;
}

Kodeblokken ovenfor definerer en matrise, tegn, som inneholder forskjellige skilletegn. Den definerer en annen variabel, karakter, som den setter til et tilfeldig element fra tegn array. Den globale variabelen, lastChar, lagrer den samme verdien som funksjonen deretter returnerer.

Deretter oppretter du en generParagraph() funksjon med en telle parameter som har en standardverdi på 100.

funksjongenerereParagraph(telle = 100) {
}

I denne funksjonen erklærer du en avsnitt array og hente tilfeldige ord fra det globale tekst array, og skyv den deretter inn avsnitt.

la avsnitt = [];
til (la jeg = 1; jeg <= telle; i++) {
 paragraph.push (tekst[Matte.gulv(Matte.random() * text.length)].toLowerCase());
}

Deretter legger du til koden for å bruke stor bokstav i det første ordet i hvert avsnitt:

la fl=avsnitt[0];
avsnitt[0] = fl.erstatt (fl[0], fl[0].toUpperCase());

Hvert avsnitt avsluttes med et skilletegn (vanligvis et punktum), så legg til koden som legger til et punktum på slutten av hvert avsnitt.

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

Deretter implementerer du funksjonaliteten for å legge til en tilfeldig generert tegnsetting til et tilfeldig element i avsnitt array.

paragraph.forEach((ord, indeks) => {
hvis (indeks > 0 && indeks % 100) {
la randomNum = Matte.gulv(Matte.random() * 4);
la pos = indeks + randomNum;
la randWord = avsnitt[pos];
 paragraph[pos] = randWord.replace (randWord, randWord + generRandomPunctuation());
la nWord=avsnitt[pos + 1];
hvis (lastChar !== ",") {
 avsnitt[pos + 1] = nWord.replace (nWord[0], nWord[0].toUpperCase());
 }
 }
})

Denne kodeblokken genererer et tilfeldig tegnsettingstegn og legger det til på slutten av et tilfeldig element fra avsnitt array. Etter å ha lagt til tegnsettingen, settes den første bokstaven i det neste elementet med stor bokstav hvis tegnsettingen ikke er et komma.

Til slutt, returner avsnitt array formatert som en streng:

komme tilbake paragraph.join(" ");

Lorem ipsum-teksten skal ha en "struktur" basert på antall avsnitt brukeren spesifiserer. Du kan bruke en matrise for å definere denne 'strukturen'. For eksempel, hvis brukeren vil ha en lorem ipsum-tekst med tre avsnitt, bør 'struktur'-arrayen se slik ut:

struktur = ["Første avsnitt.", "\n \n", "Andre avsnitt.", "\n \n", "Tredje ledd"]

I kodeblokken ovenfor representerer hver "\n \n" avstanden mellom hvert avsnitt. Hvis du logger structure.join("") i nettleserkonsollen bør du se følgende:

Lag en funksjon som automatisk genererer denne strukturen og kaller generereParagraph funksjon:

funksjongenerereStruktur(ordtelling, avsnitt = 1) {
la struktur = [];
til (la jeg = 0; i < avsnitt * 2; i++) {
hvis (Jeg % 20) struktur[i] = generParagraph (ordtelling);
ellershvis (i < (avsnitt * 2) - 1) struktur[i] = "\n \n";
 }
komme tilbake structure.join("");
}

Legge til hendelseslyttere til kontrollene

Legg til en "input"-hendelseslytter til wordCountControl inndataelement og i tilbakeringingsfunksjonen, sett inn ordtelling til inngangsverdien. Oppdater deretter etiketten.

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

Deretter legger du til en "input"-hendelseslytter til paragraphCountControl input-elementet og i tilbakeringingsfunksjonen setter du paragraphCount til inngangsverdien og oppdater etiketten.

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

Legg til en "klikk"-hendelseslytter til kopiere knappen som ringer tilbake til copyText() når hendelsen utløses.

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

Til slutt, legg til en "send"-hendelseslytter til form HTML-element og kall oppdater brukergrensesnittet funksjon i tilbakeringingsfunksjonen.

dokument.querySelector("form").addEventListener('sende inn', (e) => {
 e.preventDefault();
 updateUI();
})

Fullføre og oppdatere brukergrensesnittet

Lag en funksjon getControlValues som kommer tilbake ordtelling og paragraphCount som et objekt.

funksjongetControlValues() {
komme tilbake { wordCount, paragraphCount };
}

Deretter oppretter du updateUI() funksjon som gjengir den genererte teksten på skjermen for brukeren:

funksjonoppdater brukergrensesnittet() {
la output = genererStructure (getControlValues().wordCount, getControlValues().paragraphCount)
dokument.querySelector(".produksjon").innerText = output;
}

Nesten ferdig. Opprett copyText() funksjon som skriver teksten til utklippstavlen hver gang brukeren klikker på knappen "Kopier til utklippstavlen".

asynkronfunksjoncopyText() {
la tekst = dokument.querySelector(".produksjon").innerText;
prøve {
avvente navigator.clipboard.writeText (tekst);
 varsling("Kopiert til utklippstavlen");
 } å fange (feil) {
 varsling('Kunne ikke kopiere:', feil);
 }
 }

Ring deretter updateUI() funksjon:

updateUI();

Gratulerer! Du har bygget en Lorem ipsum-tekstgenerator med JavaScript og Vite.

Superlad din JavaScript-utvikling med Vite

Vite er et populært frontend-verktøy som gjør det enkelt å sette opp frontend-rammeverket ditt. Den støtter en rekke rammeverk som React, Svelte, SolidJS og til og med vanlig vanilje JavaScript. Mange JavaScript-utviklere bruker Vite fordi det er veldig enkelt å sette opp og veldig raskt.