Uveďte svoje zručnosti Vite do praxe s týmto tvorcom fiktívnych textov na báze GUI.

Lorem ipsum je text, ktorý vývojári a dizajnéri na celom svete používajú ako zástupný symbol. Ak komunikujete s množstvom prototypov používateľského rozhrania, pravdepodobne ste sa s tým už stretli.

Naučte sa, ako zostaviť flexibilný generátor Lorem ipsum pomocou Vite a JavaScriptu a zdokonalíte svoje vývojové zručnosti s užitočným výsledkom.

Prečo je Lorem Ipsum tak široko používaný?

Možno sa čudujete, prečo si tak veľa vývojárov a dizajnérov vybralo lorem ipsum, keď mohli len skopírovať stránku z voľne prístupnej knihy alebo podobne. Hlavným dôvodom je, že umožňuje používateľovi alebo divákovi získať predstavu o vizuálnej podobe dokumentu alebo prototypu bez toho, aby sa príliš zameriaval na samotný zástupný text.

Predstavte si, že navrhujete noviny. Namiesto toho, aby ste sa museli trápiť s kopírovaním textu z rôznych zdrojov, aby bol dizajn ako čo najrealistickejšie, stačí skopírovať štandardný zástupný text lorem ipsum a použiť ho namiesto toho.

instagram viewer

Lorem ipsum je tak široko uznávaný, že ani nemusíte špecifikovať, že ide o zástupný text – prakticky každý, kto naň narazí, okamžite rozpozná, že text je výplň.

Nastavenie projektového a vývojového servera

Kód použitý v tomto projekte je dostupný v a úložisko GitHub a môžete ho bezplatne používať na základe licencie MIT. Skopírujte obsah súboru style.css a lorem.js súbory a vložte ich do vlastných lokálnych kópií týchto súborov.

Ak sa chcete pozrieť na živú verziu tohto projektu, môžete si pozrieť toto demo.

Budete používať Nástroj na zostavenie Vite nastaviť veci. Uistite sa, že máte Node.js a Správca balíkov uzlov (NPM) alebo Priadza nainštalovaná na vašom počítači, potom otvorte terminál a spustite:

npm vytvoriť vite

alebo:

priadza vytvára vite

Toto by malo vytvoriť lešenie prázdneho projektu Vite. Zadajte názov projektu, nastavte framework na „Vanilla“ a variant na „Vanilla“. Potom prejdite do adresára projektu pomocou cd príkaz a potom spustite:

npm i

alebo:

priadza

Po nainštalovaní všetkých závislostí otvorte projekt v textovom editore podľa vlastného výberu a upravte štruktúru projektu tak, aby vyzerala asi takto:

Teraz vymažte obsah súboru index.html súbor a nahraďte ho nasledujúcim:

html>
<htmllang="sk">
<hlavu>
<metaznakovú sadu="UTF-8" />
<odkazrel="ikona"typu="image/svg+xml"href="/vite.svg" />
<metanázov="výrez"obsahu="width=device-width, initial-scale=1.0" />
<titul>Generátor Lorem Ipsumtitul>
hlavu>
<telo>
<h1>Generátor Lorem Ipsumh1>
<divid="aplikácia">
<divtrieda="ovládače">
<formulár>
<divtrieda="kontrola">
<štítokpre="w-count">Slová na odsekštítok>
<div>
<vstuptypu="rozsah"id="w-count"min="10"max="100"hodnotu="25"krok="10">
<rozpätieid="w-count-label">25rozpätie>
div>
div>
<divtrieda="kontrola">
<štítokpre="p-počet">Počet odsekovštítok>
<div>
<vstuptypu="rozsah"id="p-počet"min="1"max="20"krok="1"hodnotu="3">
<rozpätieid="p-count-label">3rozpätie>
div>
div>
<tlačidlotypu="Predložiť">Generovaťtlačidlo>
formulár>
<tlačidlotrieda="kopírovať">Skopírovať do schránkytlačidlo>
<divtrieda="Info">
 Pomocou posúvačov nastavte parametre a potom stlačte tlačidlo "Generovať".

 Text môžete skopírovať stlačením tlačidla "Kopírovať do schránky".
div>
div>
<divtrieda="výkon">div>
div>
<skripttypu="modul"src="/main.js">skript>
telo>
html>

Toto označenie jednoducho definuje používateľské rozhranie. Ľavá strana obrazovky zobrazuje ovládacie prvky, zatiaľ čo pravá strana zobrazuje výstup. Ďalej otvorte main.js súbor, vymažte jeho obsah a pridajte jeden riadok na import style.css:

importovať'./style.css'

Import súboru Lorem a definovanie globálnych premenných

Otvorte úložisko GitHub tohto projektu, skopírujte obsah súboru lorem.js a vložte ich do lokálnej kópie lorem.js. lorem.js jednoducho exportuje veľmi dlhý reťazec textu Lorem Ipsum, ktorý môžu použiť iné súbory JavaScript.

V main.js súbor, importujte súbor lorem reťazec z lorem.js súbor a definujte potrebné premenné:

importovať { lorem } od'./lorem';
nech text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").rozdeliť(' ');
nech lastChar;
nech wordCountControl = dokument.querySelector("počet #w");
nech odsekKontrola počtu = dokument.querySelector("#p-count");
nech wordCountLabel = dokument.querySelector("#w-count-label");
nech odsekCountLabel = dokument.querySelector("#p-count-label");
nech wordCount = wordCountControl.value;
nech odsekPocet = pocetPocetKontrola.hodnota;
nech kópia = dokument.querySelector(".copy");

Tento kód používa regulárny výraz na odstránenie akejkoľvek interpunkcie v lorem text. The text premenná viaže túto upravenú verziu lorem text. To by malo uľahčiť generovanie slov a odsekov.

Vytvorenie funkcií generátora

Aby sa akákoľvek náhodne vygenerovaná veta alebo odsek javil ako „skutočný“, musí existovať interpunkcia. Po definovaní globálnych premenných vytvorte funkciu tzv createRandomPunctuation() a v tejto funkcii vytvorte pole s názvom postavy a osídliť ho.

funkciugenerovať náhodnú interpunkciu() {
nech znaky = [",", "!", ".", "?"];
nech znak = znaky[Matematika.poschodie(Matematika.random() * znaky.dĺžka)];
 lastChar = znak;
vrátiť charakter;
}

Vyššie uvedený blok kódu definuje pole, postavy, ktorý obsahuje rôzne interpunkčné znamienka. Definuje ďalšiu premennú, charakter, ktorý nastaví na náhodný prvok z postavy pole. Globálna premenná, lastChar, uloží rovnakú hodnotu, ktorú potom funkcia vráti.

Ďalej vytvorte a createParagraph() funkcia s a počítať parameter, ktorý má predvolenú hodnotu 100.

funkciugenerovať odsek(počítať = 100) {
}

V tejto funkcii deklarujte a odsek pole a získajte náhodné slová z globálneho text pole, potom ho zatlačte do odsek.

nech odsek = [];
pre (nech i = 1; i <= počítať; i++) {
 odsek.push (text[Matematika.poschodie(Matematika.random() * text.length)].toLowerCase());
}

Potom pridajte kód na veľké prvé písmeno v prvom slove každého odseku:

nech fl=paragraph[0];
odsek[0] = fl.nahradiť (fl[0], fl[0].toUpperCase());

Každý odsek končí interpunkčným znamienkom (zvyčajne bodkou), takže pridajte kód, ktorý na koniec každého odseku pridá bodku.

nech lwPos = odsek.dĺžka - 1;
nech lWord = odsek[lwPos];
odsek[lwPos] = lWord.replace (lWord, lWord + ".");

Ďalej implementujte funkciu na pridanie náhodne vygenerovanej interpunkcie k náhodnému prvku v odsek pole.

odsek.pre každého((slovo, index) => {
ak (index > 0 && index % 100) {
nech randomNum = Matematika.poschodie(Matematika.random() * 4);
nech pos = index + randomNum;
nech randWord = odsek[pos];
 odsek[pos] = randWord.replace (randWord, randWord + vygenerujRandomPunctuation());
nech nSlovo=odsek[pos + 1];
ak (poslednyChar !== ",") {
 odsek[pos + 1] = nWord.replace (nWord[0], nWord[0].toUpperCase());
 }
 }
})

Tento blok kódu generuje náhodný interpunkčný znak a pripája ho na koniec náhodného prvku z odsek pole. Po pridaní interpunkcie sa prvé písmeno nasledujúceho prvku zmení na veľké, ak interpunkcia nie je čiarka.

Nakoniec vráťte odsek pole naformátované ako reťazec:

vrátiť odsek.spojiť(" ");

Text lorem ipsum by mal mať „štruktúru“ založenú na počte odsekov, ktoré používateľ určí. Na definovanie tejto „štruktúry“ môžete použiť pole. Napríklad, ak chce používateľ text lorem ipsum s tromi odsekmi, pole „štruktúra“ by malo vyzerať takto:

štruktúra = ["Prvý odsek.", "\n \n", "Druhý odsek.", "\n \n", "tretí odsek"]

V bloku kódu vyššie každé "\n \n" predstavuje medzery medzi jednotlivými odsekmi. Ak sa prihlásite structure.join("") v konzole prehliadača by ste mali vidieť nasledovné:

Vytvorte funkciu, ktorá automaticky generuje túto štruktúru a volá generovať odsek funkcia:

funkciucreateStructure(wordCount, odsek = 1) {
nech štruktúra = [];
pre (nech i = 0; i < odsek * 2; i++) {
ak (i % 20) štruktúra[i] = generovaťParagraph (počet slov);
inakak (i < (odsek * 2) - 1) štruktúra[i] = "\n \n";
 }
vrátiť structure.join("");
}

Pridanie prijímačov udalostí do ovládacích prvkov

Pridajte prijímač udalosti „vstupu“ do wordCountControl vstupný prvok a vo funkcii spätného volania nastavte počet slov na vstupnú hodnotu. Potom aktualizujte štítok.

wordCountControl.addEventListener("vstup", (e) => {
 wordCount = e.cieľová.hodnota;
 wordCountLabel.textContent= e.target.value;
})

Ďalej pridajte poslucháč udalosti „vstupu“ do odsek CountControl vstupný prvok a vo funkcii spätného volania nastavte odsek Počet na vstupnú hodnotu a aktualizujte štítok.

odstavceCountControl.addEventListener("vstup", (e) => {
 počet odsekov= e.cieľová.hodnota;
 odstavceCountLabel.textContent = e.cieľová.hodnota;
})

Pridajte prijímač udalosti „kliknutia“ do kopírovať tlačidlo, ktoré zavolá späť na copyText() keď sa udalosť spustí.

copy.addEventListener("klik", ()=>kopírovaťText());

Nakoniec pridajte do súboru poslucháča udalosti „odoslať“. formulár HTML element a zavolajte updateUI funkciu vo funkcii spätného volania.

dokument.querySelector("forma").addEventListener('Predložiť', (e) => {
 e.preventDefault();
 updateUI();
})

Dokončenie a aktualizácia používateľského rozhrania

Vytvorte funkciu getControlValues že sa vracia počet slov a odsek Počet ako predmet.

funkciugetControlValues() {
vrátiť { počet slov, počet odstavcov };
}

Potom vytvorte updateUI() funkcia, ktorá vykresľuje vygenerovaný text na obrazovke pre používateľa:

funkciuupdateUI() {
nech output = createStructure (getControlValues().wordCount, getControlValues().paragraphCount)
dokument.querySelector(".výkon").vnútornýText = výstup;
}

Skoro hotové. Vytvorte copyText() funkcia, ktorá zapíše text do schránky vždy, keď používateľ klikne na tlačidlo „Kopírovať do schránky“.

asyncfunkciucopyText() {
nech text = dokument.querySelector(".výkon").vnútornýText;
skúste {
čakať navigator.clipboard.writeText (text);
 upozornenie ('Skopírované do schránky');
 } chytiť (chyba) {
 upozornenie ('Nepodarilo sa skopírovať:', chyba);
 }
 }

Potom zavolajte na updateUI() funkcia:

updateUI();

Gratulujem! Vytvorili ste textový generátor lorem ipsum s JavaScriptom a Vite.

Doplňte svoj vývoj JavaScriptu pomocou Vite

Vite je populárny frontendový nástroj, ktorý uľahčuje nastavenie vášho frontend frameworku. Podporuje rôzne rámce ako React, Svelte, SolidJS a dokonca aj obyčajný vanilkový JavaScript. Mnoho vývojárov JavaScriptu používa Vite, pretože je veľmi jednoduché a veľmi rýchle.