Primijenite svoje Vite vještine u praksu s ovim alatom za izradu lažnog teksta koji se temelji na GUI-ju.

Lorem ipsum je tekst koji programeri i dizajneri diljem svijeta koriste kao rezervirano mjesto. Ako komunicirate s mnogo prototipova korisničkog sučelja, vjerojatno ste već naišli na to.

Naučite kako izraditi fleksibilni Lorem ipsum generator s Viteom i JavaScriptom i unaprijedit ćete svoje razvojne vještine s korisnim rezultatom.

Zašto se Lorem Ipsum tako široko koristi?

Možda se pitate zašto toliko programera i dizajnera odabire lorem ipsum kada mogu samo kopirati stranicu iz knjige u javnoj domeni ili slično. Glavni razlog je taj što korisniku ili gledatelju omogućuje dojam vizualnog oblika dokumenta ili prototipa, bez usmjeravanja previše fokusa na sam tekst rezerviranog mjesta.

Zamislite da dizajnirate novine. Umjesto da prolazite kroz probleme kopiranja teksta iz različitih izvora kako biste napravili dizajn kao što je realnije moguće, možete samo kopirati standardni tekst rezerviranog mjesta za lorem ipsum i koristiti ga umjesto toga.

instagram viewer

Lorem ipsum je toliko široko poznat da ne morate čak ni navesti da se radi o tekstu rezerviranom mjestu — gotovo svi koji naiđu na njega odmah će prepoznati da je tekst popuna.

Postavljanje projektnog i razvojnog poslužitelja

Kod korišten u ovom projektu dostupan je u a GitHub spremište i besplatan je za korištenje pod MIT licencom. Kopirajte sadržaj stil.css i lorem.js datoteke i zalijepite ih u vlastite lokalne kopije tih datoteka.

Ako želite pogledati verziju ovog projekta uživo, pogledajte ovo demo.

Vi ćete koristiti Vite alat za izradu namjestiti stvari. Provjerite imate li Node.js i Node Package Manager (NPM) ili Yarn instaliran na vašem stroju, zatim otvorite svoj terminal i pokrenite:

npm stvoriti vite

Ili:

pređa stvoriti vite

Ovo bi trebalo postaviti skelu za prazan Vite projekt. Unesite naziv projekta, postavite okvir na "Vanilla", a varijantu na "Vanilla". Nakon što to učinite, dođite do direktorija projekta pomoću CD naredbu, zatim pokrenite:

npm i

Ili:

pređa

Nakon instaliranja svih ovisnosti, otvorite projekt u uređivaču teksta po izboru, zatim izmijenite strukturu projekta da izgleda ovako:

Sada očistite sadržaj index.html datoteku i zamijenite je sa sljedećim:

html>
<htmljezik="en">
<glava>
<metaskup znakova="UTF-8" />
<vezarel="ikona"tip="slika/svg+xml"href="/vite.svg" />
<metaIme="viewport"sadržaj="width=device-width, initial-scale=1.0" />
<titula>Lorem Ipsum Generatortitula>
glava>
<tijelo>
<h1>Lorem Ipsum Generatorh1>
<diviskaznica="aplikacija">
<divrazreda="kontrole">
<oblik>
<divrazreda="kontrolirati">
<označitiza="w-count">Riječi po paragrafuoznačiti>
<div>
<ulaznitip="raspon"iskaznica="w-count"min="10"max="100"vrijednost="25"korak="10">
<rasponiskaznica="w-count-label">25raspon>
div>
div>
<divrazreda="kontrolirati">
<označitiza="p-broj">Broj odlomakaoznačiti>
<div>
<ulaznitip="raspon"iskaznica="p-broj"min="1"max="20"korak="1"vrijednost="3">
<rasponiskaznica="p-count-oznaka">3raspon>
div>
div>
<dugmetip="podnijeti">Generiratidugme>
oblik>
<dugmerazreda="kopirati">Kopirati u međuspremnikdugme>
<divrazreda="info">
 Pomoću klizača postavite parametre, a zatim pritisnite gumb "Generiraj".

 Tekst možete kopirati pritiskom na gumb "Kopiraj u međuspremnik".
div>
div>
<divrazreda="izlaz">div>
div>
<skriptatip="modul"src="/main.js">skripta>
tijelo>
html>

Ovo označavanje jednostavno definira korisničko sučelje. Lijeva strana zaslona prikazuje kontrole, dok desna strana prikazuje izlaz. Zatim otvorite glavni.js datoteku, očistite njezin sadržaj i dodajte jedan redak za uvoz stil.css:

uvoz'./style.css'

Uvoz Lorem datoteke i definiranje globalnih varijabli

Otvorite GitHub spremište ovog projekta, kopirajte sadržaj lorem.js datoteku i zalijepite ih u svoju lokalnu kopiju lorem.js. lorem.js jednostavno izvozi vrlo dugačak niz Lorem Ipsum teksta koji druge JavaScript datoteke mogu koristiti.

u glavni.js datoteku, uvezite lorem niz iz lorem.js datoteku i definirajte potrebne varijable:

uvoz { lorem } iz'./lorem';
neka tekst = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").podjela(' ');
neka zadnjiZnak;
neka wordCountControl = dokument.querySelector("#w-count");
neka ParagraphCountControl = dokument.querySelector("#p-broj");
neka wordCountLabel = dokument.querySelector("#w-count-label");
neka ParagrafCountLabel = dokument.querySelector("#p-count-label");
neka wordCount = wordCountControl.value;
neka ParagraphCount = ParagraphCountControl.value;
neka kopija = dokument.querySelector(".kopirati");

Ovaj kod koristi regularni izraz kako biste uklonili sve interpunkcijske znakove u lorem tekst. The tekst varijabla povezuje ovu modificiranu verziju lorem tekst. Ovo bi trebalo olakšati generiranje riječi i odlomaka.

Stvaranje funkcija generatora

Da bi bilo koja nasumično generirana rečenica ili odlomak izgledao "stvarno", mora postojati interpunkcija. Nakon definiranja globalnih varijabli, kreirajte funkciju pod nazivom generirajRandomPunctuation() i u toj funkciji kreirati niz tzv likovi i naseliti ga.

funkcijageneriratiRandomPunctuation() {
neka znakovi = [",", "!", ".", "?"];
neka znak = znakovi[matematika.kat(matematika.random() * znakovi.duljina)];
 lastChar = znak;
povratak lik;
}

Gore navedeni blok koda definira niz, likovi, koji sadrži različite interpunkcijske znakove. Definira drugu varijablu, lik, koji postavlja na slučajni element iz likovi niz. Globalna varijabla, posljednjiZnak, pohranjuje istu vrijednost koju funkcija zatim vraća.

Zatim stvorite a generiraj Stavak() funkcija s a računati parametar koji ima zadanu vrijednost 100.

funkcijageneriratiOdlomak(brojati = 100) {
}

U ovoj funkciji, deklarirajte a paragraf nizati i dohvaćati nasumične riječi iz globala tekst niz, a zatim ga gurnite u paragraf.

neka stavak = [];
za (neka ja = 1; i <= brojati; i++) {
 paragraf.push (tekst[matematika.kat(matematika.random() * text.length)].toLowerCase());
}

Zatim dodajte kod za veliko slovo u prvoj riječi svakog odlomka:

neka fl=stavak[0];
paragraf[0] = fl.zamijeni (fl[0], fl[0].velikim slovima());

Svaki odlomak završava interpunkcijskim znakom (obično točkom), pa dodajte kod koji dodaje točku na kraj svakog odlomka.

neka lwPos = odlomak.duljina - 1;
neka lWord = paragraf[lwPos];
paragraf[lwPos] = lWord.replace (lWord, lWord + ".");

Zatim implementirajte funkcionalnost za dodavanje nasumično generirane interpunkcije nasumično odabranom elementu u paragraf niz.

paragraf.zaSvaki((riječ, indeks) => {
ako (indeks > 0 && indeks % 100) {
neka slučajniBroj = matematika.kat(matematika.random() * 4);
neka pos = indeks + slučajniBroj;
neka randWord = paragraf[pos];
 paragraf[pos] = randWord.replace (randWord, randWord + generateRandomPunctuation());
neka nRiječ=odlomak[poz + 1];
ako (zadnji znak !== ",") {
 odlomak[pos + 1] = nWord.replace (nWord[0], nRiječ[0].velikim slovima());
 }
 }
})

Ovaj blok koda generira slučajni interpunkcijski znak i dodaje ga na kraj slučajnog elementa iz paragraf niz. Nakon dodavanja interpunkcije, prvo slovo sljedećeg elementa piše velikim slovom ako interpunkcija nije zarez.

Na kraju, vratite paragraf niz formatiran kao niz:

povratak paragraf.join(" ");

Tekst lorem ipsum trebao bi imati 'strukturu' temeljenu na broju odlomaka koje korisnik odredi. Možete koristiti niz za definiranje ove 'strukture'. Na primjer, ako korisnik želi lorem ipsum tekst s tri odlomka, niz 'strukture' trebao bi izgledati ovako:

struktura = ["Prvi odlomak.", "\n \n", "Drugi paragraf.", "\n \n", "Treći paragraf"]

U gornjem bloku koda svaki "\n \n" predstavlja razmak između svakog odlomka. Ako se prijavite struktura.pridruži("") u konzoli preglednika trebali biste vidjeti sljedeće:

Napravite funkciju koja automatski generira ovu strukturu i poziva generiratiOdlomak funkcija:

funkcijageneriratiStrukturu(Broj riječi, odlomak = 1) {
neka struktura = [];
za (neka ja = 0; i < odlomak * 2; i++) {
ako (i % 20) struktura[i] = generirajOdlomak (broj riječi);
drugoako (i < (odlomak * 2) - 1) struktura[i] = "\n \n";
 }
povratak struktura.pridruživanje("");
}

Dodavanje slušatelja događaja u kontrole

Dodajte slušatelja događaja "input" u wordCountControl ulazni element i u funkciji povratnog poziva postavite Brojanje riječi na ulaznu vrijednost. Zatim ažurirajte oznaku.

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

Zatim dodajte slušatelja događaja "input" u paragrafCountControl ulazni element i u funkciji povratnog poziva postavite paragrafCount na ulaznu vrijednost i ažurirajte oznaku.

параграфCountControl.addEventListener("ulazni", (e) => {
 ParagraphCount= e.target.value;
 sectionCountLabel.textContent = e.target.value;
})

Dodajte slušatelja događaja "klik" u kopirati gumb koji poziva natrag na kopirajTekst() kada se događaj pokrene.

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

Na kraju, dodajte slušatelja događaja "pošalji" u oblik HTML element i pozovite updateUI funkcija u funkciji povratnog poziva.

dokument.querySelector("oblik").addEventListener('podnijeti', (e) => {
 e.preventDefault();
 ažuriranjeUI();
})

Dovršavanje i ažuriranje korisničkog sučelja

Stvorite funkciju getControlValues koji se vraća Brojanje riječi i paragrafCount kao objekt.

funkcijagetControlValues() {
povratak {broj riječi, broj odlomaka};
}

Zatim stvorite updateUI() funkcija koja prikazuje generirani tekst na zaslonu za korisnika:

funkcijaupdateUI() {
neka izlaz = generirajStrukturu (getControlValues().wordCount, getControlValues().paragraphCount)
dokument.querySelector(".izlaz").unutarnjiTekst = izlaz;
}

Skoro gotovo. Stvorite kopirajTekst() funkcija koja zapisuje tekst u međuspremnik svaki put kada korisnik klikne gumb "Kopiraj u međuspremnik".

asinkronifunkcijacopyText() {
neka tekst = dokument.querySelector(".izlaz").unutarnjiTekst;
probati {
čekati navigator.clipboard.writeText (tekst);
 upozorenje('Kopirano u međuspremnik');
 } ulov (pogreška) {
 upozorenje('Kopiranje nije uspjelo:', pogriješiti);
 }
 }

Zatim nazovite updateUI() funkcija:

ažuriranjeUI();

Čestitamo! Napravili ste generator teksta lorem ipsum s JavaScriptom i Viteom.

Unaprijedite svoj JavaScript razvoj uz Vite

Vite je popularan alat za sučelje koji olakšava postavljanje okvira za sučelje. Podržava razne okvire kao što su React, Svelte, SolidJS, pa čak i obični JavaScript. Mnogi JavaScript programeri koriste Vite jer ga je vrlo jednostavno postaviti i vrlo je brz.