Brug dine Vite-færdigheder i praksis med denne GUI-baserede dummy-tekstmaker.

Lorem ipsum er tekst, som udviklere og designere over hele verden bruger som pladsholder. Hvis du interagerer med mange UI-prototyper, har du sikkert stødt på det før.

Lær, hvordan du bygger en fleksibel Lorem ipsum-generator med Vite og JavaScript, og du vil flekse dine udviklingsevner med et nyttigt resultat.

Hvorfor er Lorem Ipsum så meget brugt?

Du undrer dig måske over, hvorfor så mange udviklere og designere vælger lorem ipsum, når de bare kunne kopiere en side fra en public domain bog eller lignende. Hovedårsagen er, at det lader brugeren eller seeren få en fornemmelse af den visuelle form af et dokument eller en prototype uden at drive for meget fokus til selve pladsholderteksten.

Forestil dig, at du designer en avis. I stedet for at gå igennem besværet med at kopiere tekst fra forskellige kilder for at gøre designet som realistisk som muligt, kan du bare kopiere standard lorem ipsum-pladsholderteksten og bruge den i stedet.

instagram viewer

Lorem ipsum er så bredt anerkendt, at du ikke engang behøver at specificere, at det er en pladsholdertekst – stort set alle, der støder på den, vil straks genkende, at teksten er fyldstof.

Opsætning af projekt- og udviklingsserveren

Koden brugt i dette projekt er tilgængelig i en GitHub-depot og er gratis for dig at bruge under MIT-licensen. Kopier indholdet af style.css og lorem.js filer og indsæt dem i dine egne lokale kopier af disse filer.

Hvis du vil have et kig på en live version af dette projekt, kan du tjekke dette ud demo.

Du vil bruge Vite byggeværktøj at sætte tingene op. Sørg for, at du har Node.js og Node Package Manager (NPM) eller Garn installeret på din maskine, åbn derefter din terminal og kør:

npm skabe vite

Eller:

garn skabe vite

Dette skulle skabe et tomt Vite-projekt. Indtast projektets navn, indstil rammen til "Vanilla" og varianten til "Vanilla". Når du har gjort det, skal du navigere til projektbiblioteket med cd kommando, kør derefter:

npm i

Eller:

garn

Når du har installeret alle afhængigheder, skal du åbne projektet i din valgte teksteditor og derefter ændre projektstrukturen, så den ser sådan ud:

Ryd nu indholdet af index.html fil og erstat den med følgende:

html>
<htmllang="da">
<hoved>
<metategnsæt="UTF-8" />
<linkrel="ikon"type="image/svg+xml"href="/vite.svg" />
<metanavn="udsigtsport"indhold="width=device-width, initial-scale=1.0" />
<titel>Lorem Ipsum Generatortitel>
hoved>
<legeme>
<h1>Lorem Ipsum Generatorh1>
<divid="app">
<divklasse="kontroller">
<form>
<divklasse="styring">
<etikettil="w-tæller">Ord pr. afsnitetiket>
<div>
<inputtype="rækkevidde"id="w-tæller"min="10"max="100"værdi="25"trin="10">
<spanid="w-count-label">25span>
div>
div>
<divklasse="styring">
<etikettil="p-tæller">Antal afsnitetiket>
<div>
<inputtype="rækkevidde"id="p-tæller"min="1"max="20"trin="1"værdi="3">
<spanid="p-tæller-etiket">3span>
div>
div>
<knaptype="Indsend">Frembringeknap>
form>
<knapklasse="kopi">Kopier til udklipsholderknap>
<divklasse="info">
 Brug skyderne til at indstille parametrene, og tryk derefter på knappen "Generer".

 Du kan kopiere teksten ved at trykke på knappen "Kopier til udklipsholder".
div>
div>
<divklasse="produktion">div>
div>
<manuskripttype="modul"src="/main.js">manuskript>
legeme>
html>

Denne markering definerer blot brugergrænsefladen. Den venstre side af skærmen viser kontrollerne, mens den højre side viser outputtet. Åbn derefter main.js fil, ryd dens indhold og tilføj en enkelt linje til import style.css:

importere'./style.css'

Import af Lorem-filen og definition af globale variabler

Åbn dette projekts GitHub-lager, kopier indholdet af lorem.js fil, og indsæt dem i din lokale kopi af lorem.js. lorem.js eksporterer simpelthen en meget lang streng Lorem Ipsum-tekst, som andre JavaScript-filer kan bruge.

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

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

Denne kode bruger et regulært udtryk for at fjerne tegnsætning i lorem tekst. Det tekst variabel binder denne modificerede version af lorem tekst. Dette skulle gøre det lettere at generere ord og afsnit.

Oprettelse af generatorfunktioner

For at enhver tilfældigt genereret sætning eller afsnit skal fremstå som "rigtig", skal der være tegnsætning. Efter at have defineret de globale variabler, skal du oprette en funktion kaldet genererRandomPunctuation() og i den funktion oprette et array kaldet tegn og befolke den.

fungeregenerere Tilfældig tegnsætning() {
lade tegn = [",", "!", ".", "?"];
lade tegn = tegn[Matematik.etage(Matematik.random() * characters.length)];
 lastChar = tegn;
Vend tilbage Karakter;
}

Kodeblokken ovenfor definerer et array, tegn, der indeholder forskellige tegnsætningstegn. Den definerer en anden variabel, Karakter, som den sætter til et tilfældigt element fra tegn array. Den globale variabel, sidsteChar, gemmer den samme værdi, som funktionen derefter returnerer.

Opret derefter en generParagraph() funktion med en tælle parameter, der har en standardværdi på 100.

fungeregenerereParagraph(tælle = 100) {
}

I denne funktion skal du erklære en afsnit array og hent tilfældige ord fra det globale tekst array, og skub det derefter ind afsnit.

lade afsnit = [];
til (lade i = 1; i <= tælle; i++) {
 paragraph.push (tekst[Matematik.etage(Matematik.random() * text.length)].toLowerCase());
}

Tilføj derefter koden for at skrive det første bogstav i det første ord i hvert afsnit med stort:

lade fl=afsnit[0];
afsnit[0] = fl.erstat (fl[0], fl[0].toUpperCase());

Hvert afsnit slutter med et tegnsætningstegn (normalt et punktum), så tilføj koden, der tilføjer et punktum til slutningen af ​​hvert afsnit.

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

Implementer derefter funktionaliteten for at tilføje en tilfældigt genereret tegnsætning til et tilfældigt element i afsnit array.

afsnit.forHver((ord, indeks) => {
hvis (indeks > 0 && indeks % 100) {
lade randomNum = Matematik.etage(Matematik.random() * 4);
lade pos = indeks + randomNum;
lade randWord = afsnit[pos];
 paragraph[pos] = randWord.replace (randWord, randWord + generRandomPunctuation());
lade nWord=afsnit[pos + 1];
hvis (lastChar !== ",") {
 afsnit[pos + 1] = nWord.replace (nWord[0], nWord[0].toUpperCase());
 }
 }
})

Denne kodeblok genererer et tilfældigt tegnsætningstegn og tilføjer det til slutningen af ​​et tilfældigt element fra afsnit array. Efter tilføjelse af tegnsætningen, skrives det første bogstav i det næste element med stort, hvis tegnsætningen ikke er et komma.

Til sidst returnerer du afsnit array formateret som en streng:

Vend tilbage paragraph.join(" ");

Lorem ipsum-teksten skal have en 'struktur' baseret på antallet af afsnit, som brugeren angiver. Du kan bruge et array til at definere denne 'struktur'. For eksempel, hvis brugeren ønsker en lorem ipsum-tekst med tre afsnit, skal 'struktur'-arrayet se sådan ud:

struktur = ["Første afsnit.", "\n \n", "Andet afsnit.", "\n \n", "Tredje afsnit"]

I kodeblokken ovenfor repræsenterer hver "\n \n" afstanden mellem hvert afsnit. Hvis du logger structure.join("") i browserkonsollen bør du se følgende:

Opret en funktion, der automatisk genererer denne struktur og kalder generereParagraph fungere:

fungeregenerere Struktur(wordCount, afsnit = 1) {
lade struktur = [];
til (lade i = 0; i < afsnit * 2; i++) {
hvis (i % 20) struktur[i] = generParagraph (ordCount);
andethvis (i < (afsnit * 2) - 1) struktur[i] = "\n \n";
 }
Vend tilbage structure.join("");
}

Tilføjelse af begivenhedslyttere til kontrolelementerne

Tilføj en "input" begivenhedslytter til wordCountControl input-elementet og i tilbagekaldsfunktionen indstilles ordtælling til inputværdien. Opdater derefter etiketten.

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

Tilføj derefter en "input" begivenhedslytter til paragraphCountControl input-element og i tilbagekaldsfunktionen indstilles afsnitTæl til inputværdien og opdatere etiketten.

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

Tilføj en "klik"-begivenhedslytter til kopi knap, der kalder tilbage til copyText() når hændelsen udløses.

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

Til sidst skal du tilføje en "send" begivenhedslytter til form HTML-element og kald opdatere UI funktion i tilbagekaldsfunktionen.

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

Afslutning og opdatering af brugergrænsefladen

Opret en funktion getControlValues der vender tilbage ordtælling og afsnitTæl som et objekt.

fungeregetControlValues() {
Vend tilbage { wordCount, paragraphCount };
}

Opret derefter updateUI() funktion, der gengiver den genererede tekst på skærmen for brugeren:

fungereopdatere UI() {
lade output = genererStructure (getControlValues().wordCount, getControlValues().paragraphCount)
dokument.querySelector(".produktion").innerText = output;
}

Næsten færdig. Opret copyText() funktion, der skriver teksten til udklipsholderen, hver gang brugeren klikker på knappen "Kopier til udklipsholder".

asynkronfungerekopiTekst() {
lade tekst = dokument.querySelector(".produktion").indreTekst;
prøve {
vente navigator.clipboard.writeText (tekst);
 alert('Kopieret til udklipsholder');
 } fangst (fejl) {
 alert('Kunne ikke kopiere:', fejl);
 }
 }

Så ring til updateUI() fungere:

updateUI();

Tillykke! Du har bygget en lorem ipsum-tekstgenerator med JavaScript og Vite.

Overlad din JavaScript-udvikling med Vite

Vite er et populært frontend-værktøj, der gør det nemt at opsætte din frontend-ramme. Det understøtter en række rammer som React, Svelte, SolidJS og endda almindeligt vanilje JavaScript. Mange JavaScript-udviklere bruger Vite, fordi det er meget nemt at sætte op og meget hurtigt.