Uporabite svoje spretnosti Vite v praksi s tem izdelovalcem navideznih besedil, ki temelji na GUI.

Lorem ipsum je besedilo, ki ga razvijalci in oblikovalci po vsem svetu uporabljajo kot ogrado. Če komunicirate z veliko prototipi uporabniškega vmesnika, ste verjetno že naleteli na to.

Naučite se zgraditi prilagodljiv generator Lorem ipsum z Vite in JavaScriptom in razvili boste svoje razvojne sposobnosti z uporabnim rezultatom.

Zakaj se Lorem Ipsum tako pogosto uporablja?

Morda se sprašujete, zakaj toliko razvijalcev in oblikovalcev izbere lorem ipsum, ko pa bi lahko preprosto kopirali stran iz knjige v javni lasti ali podobnega. Glavni razlog je, da uporabniku ali gledalcu omogoča, da dobi občutek vizualne oblike dokumenta ali prototipa, ne da bi se preveč osredotočil na samo besedilo nadomestnega mesta.

Predstavljajte si, da oblikujete časopis. Namesto da bi se mučili s kopiranjem besedila iz različnih virov, da bi bil dizajn kot čim bolj realističen, lahko samo kopirate standardno besedilo označbe mesta lorem ipsum in ga uporabite namesto tega.

instagram viewer

Lorem ipsum je tako splošno prepoznaven, da vam sploh ni treba navesti, da gre za besedilo nadomestnega mesta – skoraj vsakdo, ki naleti nanj, bo takoj prepoznal, da je besedilo polnilo.

Nastavitev projektnega in razvojnega strežnika

Koda, uporabljena v tem projektu, je na voljo v a Repozitorij GitHub in je brezplačen za uporabo pod licenco MIT. Kopirajte vsebino style.css in lorem.js in jih prilepite v svoje lokalne kopije teh datotek.

Če si želite ogledati različico tega projekta v živo, si lahko ogledate to demo.

Uporabljali boste Orodje za gradnjo Vite urediti stvari. Prepričajte se, da imate Node.js in Node Package Manager (NPM) ali Yarn nameščen na vašem računalniku, nato odprite terminal in zaženite:

npm ustvari vite

ali:

preje ustvariti vite

To bi moralo postaviti oder za prazen projekt Vite. Vnesite ime projekta, nastavite okvir na "Vanilla" in različico na "Vanilla". Ko to storite, se pomaknite do imenika projekta z cd ukaz, nato zaženite:

npm i

ali:

preja

Ko namestite vse odvisnosti, odprite projekt v izbranem urejevalniku besedil, nato spremenite strukturo projekta, da bo videti nekako takole:

Zdaj počistite vsebino index.html datoteko in jo nadomestite z naslednjim:

html>
<htmljezik="en">
<glavo>
<metanabor znakov="UTF-8" />
<povezavarel="ikona"vrsta="slika/svg+xml"href="/vite.svg" />
<metaime="viewport"vsebino="width=device-width, initial-scale=1.0" />
<naslov>Lorem Ipsum Generatornaslov>
glavo>
<telo>
<h1>Lorem Ipsum Generatorh1>
<divid="aplikacija">
<divrazred="kontrole">
<oblika>
<divrazred="nadzor">
<oznakaza="w-count">Besed na odstavekoznaka>
<div>
<vnosvrsta="razpon"id="w-count"min="10"maks="100"vrednost="25"korak="10">
<razponid="w-count-label">25razpon>
div>
div>
<divrazred="nadzor">
<oznakaza="p-štetje">Število odstavkovoznaka>
<div>
<vnosvrsta="razpon"id="p-štetje"min="1"maks="20"korak="1"vrednost="3">
<razponid="p-count-label">3razpon>
div>
div>
<gumbvrsta="oddaj">Ustvarigumb>
oblika>
<gumbrazred="kopirati">Kopirati v odložiščegumb>
<divrazred="info">
 Uporabite drsnike za nastavitev parametrov, nato pritisnite gumb »Ustvari«.

 Besedilo lahko kopirate tako, da pritisnete gumb "Kopiraj v odložišče".
div>
div>
<divrazred="izhod">div>
div>
<scenarijvrsta="modul"src="/main.js">scenarij>
telo>
html>

Ta oznaka preprosto definira uporabniški vmesnik. Na levi strani zaslona so prikazani kontrolniki, na desni pa izhod. Nato odprite main.js datoteko, počistite njeno vsebino in dodajte eno vrstico za uvoz style.css:

uvoz'./style.css'

Uvoz datoteke Lorem in definiranje globalnih spremenljivk

Odprite repozitorij GitHub tega projekta, kopirajte vsebino lorem.js in jih prilepite v svojo lokalno kopijo lorem.js. lorem.js preprosto izvozi zelo dolg niz besedila Lorem Ipsum, ki ga lahko uporabljajo druge datoteke JavaScript.

V main.js datoteko, uvozite lorem niz iz lorem.js datoteko in definirajte potrebne spremenljivke:

uvoz { lorem } od'./lorem';
pustiti besedilo = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").split(' ');
pustiti lastChar;
pustiti wordCountControl = dokument.querySelector("#w-štetje");
pustiti odstavekCountControl = dokument.querySelector("#p-štetje");
pustiti wordCountLabel = dokument.querySelector("#w-count-label");
pustiti odstavekCountLabel = dokument.querySelector("#p-count-label");
pustiti wordCount = wordCountControl.value;
pustiti odstavekCount = odstavekCountControl.value;
pustiti kopija = dokument.querySelector(".kopirati");

Ta koda uporablja regularni izraz da odstranite morebitna ločila v lorem besedilo. The besedilo spremenljivka veže to spremenjeno različico lorem besedilo. To bi moralo olajšati ustvarjanje besed in odstavkov.

Ustvarjanje funkcij generatorja

Da bi bil kateri koli naključno ustvarjen stavek ali odstavek videti "resničen", morajo obstajati ločila. Ko definirate globalne spremenljivke, ustvarite funkcijo, imenovano createRandomPunctuation() in v tej funkciji ustvarite niz, imenovan znakov in ga naseli.

funkcijocreateRandomPunctuation() {
pustiti znakov = [",", "!", ".", "?"];
pustiti znak = znaki[matematika.nadstropje(matematika.random() * characters.length)];
 lastChar = znak;
vrnitev značaj;
}

Zgornji blok kode definira matriko, znakov, ki vsebuje različna ločila. Določa drugo spremenljivko, značaj, ki ga nastavi na naključni element iz znakov niz. Globalna spremenljivka, lastChar, shrani isto vrednost, ki jo funkcija nato vrne.

Nato ustvarite a generirajOdstavek() funkcija z a štetje parameter, ki ima privzeto vrednost 100.

funkcijogenerateParagraph(štetje = 100) {
}

V tej funkciji deklarirajte a odstavek niz in pridobivanje naključnih besed iz globala besedilo polje, nato pa ga potisnite v odstavek.

pustiti odstavek = [];
za (pustiti jaz = 1; i <= štetje; i++) {
 odstavek.push (besedilo[matematika.nadstropje(matematika.random() * text.length)].toLowerCase());
}

Nato dodajte kodo za veliko začetnico v prvi besedi vsakega odstavka:

pustiti fl=odstavek[0];
odstavek [0] = fl.replace (fl[0], fl[0].toUpperCase());

Vsak odstavek se konča z ločilom (običajno s piko), zato dodajte kodo, ki doda piko na koncu vsakega odstavka.

pustiti lwPos = dolžina odstavka - 1;
pustiti lWord = odstavek [lwPos];
odstavek[lwPos] = lWord.replace (lWord, lWord + ".");

Nato implementirajte funkcionalnost za dodajanje naključno ustvarjenih ločil naključnemu elementu v odstavek niz.

odstavek.zaVsak((beseda, indeks) => {
če (indeks > 0 && indeks % 100) {
pustiti naključnoŠtevilo = matematika.nadstropje(matematika.naključen() * 4);
pustiti pos = indeks + randomNum;
pustiti randWord = odstavek [pos];
 odstavek[pos] = randWord.replace (randWord, randWord + generateRandomPunctuation());
pustiti nBeseda=odstavek[poz + 1];
če (zadnji znak !== ",") {
 odstavek [pos + 1] = nWord.replace (nWord[0], nBeseda[0].toUpperCase());
 }
 }
})

Ta kodni blok ustvari naključno ločilo in ga doda na konec naključnega elementa iz odstavek niz. Po dodajanju ločila zapiše z veliko prvo črko naslednjega elementa, če ločilo ni vejica.

Končno vrnite odstavek matrika, oblikovana kot niz:

vrnitev odstavek.join(" ");

Besedilo lorem ipsum mora imeti 'strukturo' glede na število odstavkov, ki jih določi uporabnik. Za definiranje te 'strukture' lahko uporabite niz. Na primer, če uporabnik želi besedilo lorem ipsum s tremi odstavki, bi morala matrika 'struktura' izgledati takole:

struktura = ["Prvi odstavek.", "\n \n", "Drugi odstavek.", "\n \n", "Tretji odstavek"]

V zgornjem bloku kode vsak "\n \n" predstavlja razmik med posameznimi odstavki. Če se prijavite struktura.join("") v konzoli brskalnika bi morali videti naslednje:

Ustvarite funkcijo, ki samodejno ustvari to strukturo in pokliče generateParagraph funkcija:

funkcijocreateStructure(število besed, odstavek = 1) {
pustiti struktura = [];
za (pustiti jaz = 0; i < odstavek * 2; i++) {
če (jaz % 20) struktura[i] = generirajodstavek (število besed);
drugačeče (i < (odstavek * 2) - 1) struktura[i] = "\n \n";
 }
vrnitev struktura.join("");
}

Dodajanje poslušalcev dogodkov kontrolnikom

Dodajte poslušalca dogodka "vhod" v wordCountControl vnosni element in v funkciji povratnega klica nastavite Število besed na vhodno vrednost. Nato posodobite oznako.

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

Nato dodajte »vhodni« poslušalec dogodkov v odstavekCountControl vhodni element in v funkciji povratnega klica nastavite štetje odstavkov na vhodno vrednost in posodobite oznako.

параграфCountControl.addEventListener("vnos", (e) => {
 štetje odstavkov= e.target.value;
 параграфCountLabel.textContent = e.target.value;
})

Dodajte poslušalca dogodka »klik« v kopirati gumb, ki pokliče nazaj na copyText() ko se dogodek sproži.

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

Na koncu dodajte poslušalca dogodka »pošlji«. oblika element HTML in pokličite updateUI funkcijo v funkciji povratnega klica.

dokument.querySelector("oblika").addEventListener('predloži', (e) => {
 e.preventDefault();
 updateUI();
})

Dokončanje in posodabljanje uporabniškega vmesnika

Ustvarite funkcijo getControlValues ki se vrača Število besed in štetje odstavkov kot predmet.

funkcijogetControlValues() {
vrnitev {število besed, število odstavkov};
}

Nato ustvarite updateUI() funkcija, ki ustvarjeno besedilo upodablja na zaslonu za uporabnika:

funkcijoupdateUI() {
pustiti output = generateStructure (getControlValues().wordCount, getControlValues().paragraphCount)
dokument.querySelector(".output").innerText = izhod;
}

Skoraj končano. Ustvarite copyText() funkcija, ki zapiše besedilo v odložišče vsakič, ko uporabnik klikne gumb "Kopiraj v odložišče".

asinhfunkcijocopyText() {
pustiti besedilo = dokument.querySelector(".output").notranjeBesedilo;
poskusi {
čakati navigator.clipboard.writeText (besedilo);
 opozorilo('Kopirano v odložišče');
 } ulov (napaka) {
 opozorilo('Kopiranje ni uspelo:', napaka);
 }
 }

Potem pokličite updateUI() funkcija:

updateUI();

čestitke! Izdelali ste generator besedila lorem ipsum z JavaScriptom in Vite.

Napolnite svoj JavaScript razvoj z Vite

Vite je priljubljeno čelno orodje, ki olajša nastavitev vašega čelnega ogrodja. Podpira različna ogrodja, kot so React, Svelte, SolidJS in celo navaden JavaScript. Številni razvijalci JavaScript uporabljajo Vite, ker je zelo enostaven za nastavitev in zelo hiter.