Setzen Sie Ihre Vite-Kenntnisse mit diesem GUI-basierten Dummy-Text-Ersteller in die Praxis um.

Lorem ipsum ist Text, den Entwickler und Designer auf der ganzen Welt als Platzhalter verwenden. Wenn Sie mit vielen UI-Prototypen interagieren, sind Sie wahrscheinlich schon einmal darauf gestoßen.

Erfahren Sie, wie Sie mit Vite und JavaScript einen flexiblen Lorem-Ipsum-Generator erstellen und Ihre Entwicklungsfähigkeiten mit einem nützlichen Ergebnis verbessern.

Warum wird Lorem Ipsum so häufig verwendet?

Sie fragen sich vielleicht, warum sich so viele Entwickler und Designer für Lorem Ipsum entscheiden, wenn sie einfach eine Seite aus einem gemeinfreien Buch oder ähnlichem kopieren könnten. Der Hauptgrund besteht darin, dass der Benutzer oder Betrachter dadurch einen Eindruck von der visuellen Form eines Dokuments oder Prototyps erhält, ohne den Fokus zu sehr auf den Platzhaltertext selbst zu lenken.

Stellen Sie sich vor, Sie entwerfen eine Zeitung. Anstatt sich die Mühe zu machen, Text aus verschiedenen Quellen zu kopieren, um das Design so zu gestalten Um eine möglichst realistische Darstellung zu erreichen, könnten Sie einfach den Standard-Lorem-Ipsum-Platzhaltertext kopieren und diesen verwenden stattdessen.

instagram viewer

Lorem ipsum ist so weit verbreitet, dass Sie nicht einmal angeben müssen, dass es sich um einen Platzhaltertext handelt – praktisch jeder, der darauf stößt, wird sofort erkennen, dass es sich um einen Fülltext handelt.

Einrichten des Projekt- und Entwicklungsservers

Der in diesem Projekt verwendete Code ist in a verfügbar GitHub-Repository Die Nutzung steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung. Kopieren Sie den Inhalt der style.css und das lorem.js Dateien und fügen Sie sie in Ihre eigenen lokalen Kopien dieser Dateien ein.

Wenn Sie sich eine Live-Version dieses Projekts ansehen möchten, können Sie sich dies hier ansehen Demo.

Sie werden das verwenden Vite-Build-Tool Dinge einrichten. Stellen Sie sicher, dass Sie Node.js und das haben Knotenpaketmanager (NPM) oder Yarn auf Ihrem Computer installiert, öffnen Sie dann Ihr Terminal und führen Sie Folgendes aus:

npm Vite erstellen

Oder:

Garn erstellen vite

Dies sollte ein leeres Vite-Projekt bilden. Geben Sie den Projektnamen ein, stellen Sie das Framework auf „Vanilla“ und die Variante auf „Vanilla“ ein. Navigieren Sie anschließend mit zum Projektverzeichnis CD Befehl, dann ausführen:

npm i

Oder:

Garn

Nachdem Sie alle Abhängigkeiten installiert haben, öffnen Sie das Projekt in einem Texteditor Ihrer Wahl und ändern Sie dann die Projektstruktur so, dass sie etwa so aussieht:

Löschen Sie nun den Inhalt des index.html Datei und ersetzen Sie sie durch Folgendes:

html>
<htmllang=„en“>
<Kopf>
<MetaZeichensatz=„UTF-8“ />
<Verknüpfungrel="Symbol"Typ=„image/svg+xml“href=„/vite.svg“ />
<MetaName=„Ansichtsfenster“Inhalt=„width=device-width, initial-scale=1.0“ />
<Titel>Lorem-Ipsum-GeneratorTitel>
Kopf>
<Körper>
<h1>Lorem-Ipsum-Generatorh1>
<divAusweis=„App“>
<divKlasse=„Kontrollen“>
<form>
<divKlasse="Kontrolle">
<Etikettfür=„w-count“>Wörter pro AbsatzEtikett>
<div>
<EingangTyp="Bereich"Ausweis=„w-count“Mindest="10"max="100"Wert="25"Schritt="10">
<SpanneAusweis=„w-count-label“>25Spanne>
div>
div>
<divKlasse="Kontrolle">
<Etikettfür=„p-count“>Anzahl der AbsätzeEtikett>
<div>
<EingangTyp="Bereich"Ausweis=„p-count“Mindest="1"max="20"Schritt="1"Wert="3">
<SpanneAusweis=„p-count-label“>3Spanne>
div>
div>
<TasteTyp="einreichen">GenerierenTaste>
form>
<TasteKlasse="Kopieren">In die Zwischenablage kopierenTaste>
<divKlasse="die Info">
 Verwenden Sie die Schieberegler, um die Parameter festzulegen, und klicken Sie dann auf die Schaltfläche „Generieren“.

 Sie können den Text kopieren, indem Sie auf die Schaltfläche „In die Zwischenablage kopieren“ klicken
div>
div>
<divKlasse="Ausgang">div>
div>
<SkriptTyp="Modul"src=„/main.js“>Skript>
Körper>
html>

Dieses Markup definiert lediglich die Benutzeroberfläche. Auf der linken Seite des Bildschirms werden die Steuerelemente angezeigt, während auf der rechten Seite die Ausgabe angezeigt wird. Als nächstes öffnen Sie die main.js Datei, löschen Sie ihren Inhalt und fügen Sie eine einzelne Zeile zum Importieren hinzu style.css:

importieren'./style.css'

Importieren der Lorem-Datei und Definieren globaler Variablen

Öffnen Sie das GitHub-Repository dieses Projekts und kopieren Sie den Inhalt lorem.js Datei und fügen Sie sie in Ihre lokale Kopie von ein lorem.js. lorem.js exportiert einfach eine sehr lange Zeichenfolge von Lorem Ipsum-Text, die andere JavaScript-Dateien verwenden können.

Im main.js Datei, importieren Sie die Lorem Zeichenfolge aus dem lorem.js Datei und definieren Sie die notwendigen Variablen:

importieren {lorem} aus'./lorem';
lassen text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").Teilt(' ');
lassen lastChar;
lassen wordCountControl = dokumentieren.querySelector(„#w-count“);
lassen absatzCountControl = dokumentieren.querySelector(„#p-count“);
lassen wordCountLabel = dokumentieren.querySelector(„#w-count-label“);
lassen absatzCountLabel = dokumentieren.querySelector(„#p-count-label“);
lassen wordCount = wordCountControl.value;
lassen absatzCount = absatzCountControl.value;
lassen kopieren = dokumentieren.querySelector(".Kopieren");

Dieser Code verwendet ein regulärer Ausdruck um alle Satzzeichen im zu entfernen Lorem Text. Der Text Variable bindet diese geänderte Version von Lorem Text. Dies soll die Generierung von Wörtern und Absätzen erleichtern.

Erstellen der Generatorfunktionen

Damit ein zufällig generierter Satz oder Absatz „echt“ erscheint, müssen Satzzeichen vorhanden sein. Erstellen Sie nach der Definition der globalen Variablen eine Funktion namens generierenRandomPunctuation() und in dieser Funktion ein Array mit dem Namen erstellen Figuren und bevölkere es.

FunktiongenerierenRandomPunctuation() {
lassen Zeichen = [",", "!", ".", "?"];
lassen Zeichen = Zeichen[Mathematik.Boden(Mathematik.random() * Zeichen.Länge)];
 lastChar = Zeichen;
zurückkehren Charakter;
}

Der obige Codeblock definiert ein Array, Figuren, das unterschiedliche Satzzeichen enthält. Es definiert eine weitere Variable, Charakter, das auf ein zufälliges Element aus dem gesetzt wird Figuren Array. Die globale Variable, lastChar, speichert denselben Wert, den die Funktion dann zurückgibt.

Als nächstes erstellen Sie eine generierenParagraph() Funktion mit a zählen Parameter, der den Standardwert 100 hat.

FunktiongenerierenAbsatz(zählen = 100) {
}

Deklarieren Sie in dieser Funktion a Absatz Array und holen Sie zufällige Wörter aus dem globalen Text Array und schieben Sie es dann hinein Absatz.

lassen Absatz = [];
für (lassen ich = 1; i <= count; i++) {
 Absatz.push (Text[Mathematik.Boden(Mathematik.random() * text.length)].toLowerCase());
}

Fügen Sie als Nächstes den Code hinzu, um den ersten Buchstaben im ersten Wort jedes Absatzes groß zu schreiben:

lassen fl=Absatz[0];
Absatz[0] = fl.replace (fl[0], fl[0].toUpperCase());

Jeder Absatz endet mit einem Satzzeichen (normalerweise einem Punkt). Fügen Sie daher den Code hinzu, der am Ende jedes Absatzes einen Punkt hinzufügt.

lassen lwPos = Absatz.Länge - 1;
lassen lWord = Absatz[lwPos];
Absatz[lwPos] = lWord.replace (lWord, lWord + ".");

Als Nächstes implementieren Sie die Funktionalität, um einem zufälligen Element im eine zufällig generierte Interpunktion hinzuzufügen Absatz Array.

Absatz.forEach((Wort, Index) => {
Wenn (Index > 0 && Index % 100) {
lassen randomNum = Mathematik.Boden(Mathematik.willkürlich() * 4);
lassen pos = index + randomNum;
lassen randWord = Absatz[pos];
 Absatz[pos] = randWord.replace (randWord, randWord + genericRandomPunctuation());
lassen nWord=Absatz[pos + 1];
Wenn (lastChar !== ",") {
 Absatz[pos + 1] = nWord.replace (nWord[0], nWord[0].toUpperCase());
 }
 }
})

Dieser Codeblock generiert ein zufälliges Satzzeichen und hängt es an das Ende eines zufälligen Elements aus dem Absatz Array. Nach dem Anhängen des Satzzeichens wird der erste Buchstabe des nächsten Elements großgeschrieben, wenn das Satzzeichen kein Komma ist.

Zum Schluss geben Sie die zurück Absatz Array als String formatiert:

zurückkehren Absatz.join(" ");

Der Lorem-Ipsum-Text sollte eine „Struktur“ haben, die auf der Anzahl der Absätze basiert, die der Benutzer angibt. Sie können ein Array verwenden, um diese „Struktur“ zu definieren. Wenn der Benutzer beispielsweise einen Lorem-Ipsum-Text mit drei Absätzen möchte, sollte das Array „Struktur“ wie folgt aussehen:

Struktur = ["Erster Paragraph.", „\n \n“, "Zweiter Absatz.", „\n \n“, „Dritter Absatz“]

Im obigen Codeblock stellt jedes „\n \n“ den Abstand zwischen den einzelnen Absätzen dar. Wenn Sie sich anmelden structure.join("") In der Browserkonsole sollten Sie Folgendes sehen:

Erstellen Sie eine Funktion, die diese Struktur automatisch generiert und aufruft generierenAbsatz Funktion:

FunktiongenerierenStruktur(WordCount, Absatz = 1) {
lassen Struktur = [];
für (lassen ich = 0; i < Absatz * 2; i++) {
Wenn (ich % 20) structure[i] = genericParagraph (wordCount);
andersWenn (i < (Absatz * 2) - 1) Struktur[i] = „\n \n“;
 }
zurückkehren structure.join("");
}

Hinzufügen von Ereignis-Listenern zu den Steuerelementen

Fügen Sie einen „Eingabe“-Ereignis-Listener hinzu wordCountControl Eingabeelement und legen Sie in der Rückruffunktion fest Wortzahl zum Eingabewert. Aktualisieren Sie dann das Etikett.

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

Als nächstes fügen Sie einen „Input“-Ereignis-Listener hinzu absatzCountControl Eingabeelement und in der Callback-Funktion festlegen Absatzanzahl auf den Eingabewert und aktualisieren Sie die Beschriftung.

absatzCountControl.addEventListener("Eingang", (e) => {
 AbsatzCount= e.target.value;
 paragraphCountLabel.textContent = e.target.value;
})

Fügen Sie einen „Click“-Ereignis-Listener hinzu Kopieren Schaltfläche, die zum zurückruft Text kopieren() wann das Ereignis ausgelöst wird.

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

Fügen Sie abschließend einen „Submit“-Ereignis-Listener hinzu form HTML-Element und rufen Sie das auf updateUI Funktion in der Callback-Funktion.

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

Fertigstellung und Aktualisierung der Benutzeroberfläche

Erstellen Sie eine Funktion getControlValues das kommt zurück Wortzahl Und Absatzanzahl als Objekt.

FunktiongetControlValues() {
zurückkehren { WordCount, ParagraphCount };
}

Dann erstellen Sie die updateUI() Funktion, die den generierten Text für den Benutzer auf dem Bildschirm darstellt:

FunktionupdateUI() {
lassen Ausgabe = genericStructure (getControlValues().wordCount, getControlValues().paragraphCount)
dokumentieren.querySelector(".Ausgang").innerText = Ausgabe;
}

Fast fertig. Erstellen Sie die Text kopieren() Funktion, die den Text immer dann in die Zwischenablage schreibt, wenn der Benutzer auf die Schaltfläche „In die Zwischenablage kopieren“ klickt.

asynchronFunktionText kopieren() {
lassen Text = dokumentieren.querySelector(".Ausgang").innerText;
versuchen {
erwarten navigator.clipboard.writeText (Text);
 Alarm('In die Zwischenablage kopiert');
 } fangen (irren) {
 Alarm('Kopieren fehlgeschlagen: ', irren);
 }
 }

Dann rufen Sie an updateUI() Funktion:

updateUI();

Glückwunsch! Sie haben mit JavaScript und Vite einen Lorem-Ipsum-Textgenerator erstellt.

Beschleunigen Sie Ihre JavaScript-Entwicklung mit Vite

Vite ist ein beliebtes Frontend-Tool, mit dem Sie Ihr Frontend-Framework einfach einrichten können. Es unterstützt eine Vielzahl von Frameworks wie React, Svelte, SolidJS und sogar einfaches JavaScript. Viele JavaScript-Entwickler verwenden Vite, weil es sehr einfach einzurichten und sehr schnell ist.