Praktiškai pritaikykite savo Vite įgūdžius su šia GUI pagrindu sukurta netikra teksto kūrėja.

Lorem ipsum yra tekstas, kurį kūrėjai ir dizaineriai visame pasaulyje naudoja kaip rezervuotą vietą. Jei bendraujate su daugybe vartotojo sąsajos prototipų, tikriausiai jau esate su tuo susidūrę.

Sužinokite, kaip sukurti lankstų „Lorem ipsum“ generatorių su „Vite“ ir „JavaScript“, ir pagerinsite savo tobulinimo įgūdžius, gaudami naudingų rezultatų.

Kodėl Lorem Ipsum taip plačiai naudojamas?

Jums gali kilti klausimas, kodėl tiek daug kūrėjų ir dizainerių pasirenka lorem ipsum, kai gali tiesiog nukopijuoti puslapį iš viešai prieinamos knygos ar panašiai. Pagrindinė priežastis yra ta, kad tai leidžia vartotojui ar žiūrinčiajam pajusti vaizdinę dokumento ar prototipo formą, per daug nekreipiant dėmesio į patį vietos rezervavimo tekstą.

Įsivaizduokite, kad kuriate laikraštį. Užuot tekę nukopijuoti tekstą iš skirtingų šaltinių, kad dizainas būtų toks jei įmanoma, galite tiesiog nukopijuoti standartinį lorem ipsum rezervuotos vietos tekstą ir jį naudoti vietoj to.

instagram viewer

Lorem ipsum yra taip plačiai atpažįstamas, kad net nereikia nurodyti, kad tai yra vietos rezervavimo tekstas – beveik kiekvienas, su juo susidūręs, iš karto atpažins, kad tekstas yra užpildas.

Projekto ir plėtros serverio nustatymas

Šiame projekte naudojamas kodas yra prieinamas a GitHub saugykla ir jūs galite nemokamai naudotis pagal MIT licenciją. Nukopijuokite turinį stilius.css ir lorem.js failus ir įklijuokite juos į savo vietines šių failų kopijas.

Jei norite pažvelgti į tiesioginę šio projekto versiją, galite tai patikrinti demo.

Jūs naudosite Vite kūrimo įrankis susidėlioti reikalus. Įsitikinkite, kad turite Node.js ir Mazgo paketų tvarkyklė (NPM) arba jūsų kompiuteryje įdiegtas verpalas, tada atidarykite terminalą ir paleiskite:

npm sukurti vite

Arba:

verpalai sukurti vite

Tai turėtų sukurti tuščią Vite projektą. Įveskite projekto pavadinimą, nustatykite pagrindą į „Vanilla“, o variantą į „Vanilla“. Tai atlikę, eikite į projekto katalogą naudodami cd komandą, tada paleiskite:

npm i

Arba:

verpalai

Įdiegę visas priklausomybes, atidarykite projektą pasirinktoje teksto rengyklėje, tada pakeiskite projekto struktūrą, kad atrodytų maždaug taip:

Dabar išvalykite turinį index.html failą ir pakeiskite jį taip:

html>
<htmllang="en">
<galva>
<metasimbolių rinkinys="UTF-8" />
<nuorodarel="piktograma"tipo="image/svg+xml"href="/vite.svg" />
<metavardas="žiūros sritis"turinys="plotis = įrenginio plotis, pradinė skalė = 1,0" />
<titulą>Lorem Ipsum generatoriustitulą>
galva>
<kūnas>
<h1>Lorem Ipsum generatoriush1>
<divid="programėlė">
<divklasė="valdikliai">
<forma>
<divklasė="kontrolė">
<etiketėdėl="w-count">Žodžiai pastraipojeetiketė>
<div>
<įvestistipo="diapazonas"id="w-count"min="10"maks="100"vertė="25"žingsnis="10">
<spanid="w-count-label">25span>
div>
div>
<divklasė="kontrolė">
<etiketėdėl="p skaičius">Pastraipų skaičiusetiketė>
<div>
<įvestistipo="diapazonas"id="p skaičius"min="1"maks="20"žingsnis="1"vertė="3">
<spanid="p-count-label">3span>
div>
div>
<mygtukątipo="Pateikti">Generuotimygtuką>
forma>
<mygtukąklasė="kopijuoti">Nukopijuoti į iškarpinęmygtuką>
<divklasė="informacija">
 Norėdami nustatyti parametrus, naudokite slankiklius, tada paspauskite mygtuką „Generuoti“.

 Galite nukopijuoti tekstą paspausdami mygtuką "Kopijuoti į mainų sritį".
div>
div>
<divklasė="išvestis">div>
div>
<scenarijustipo="modulis"src="/main.js">scenarijus>
kūnas>
html>

Šis žymėjimas tiesiog apibrėžia vartotojo sąsają. Kairėje ekrano pusėje rodomi valdikliai, o dešinėje - išvestis. Tada atidarykite main.js failą, išvalykite jo turinį ir pridėkite vieną eilutę, kurią norite importuoti stilius.css:

importuoti'./style.css'

Lorem failo importavimas ir visuotinių kintamųjų apibrėžimas

Atidarykite šio projekto „GitHub“ saugyklą, nukopijuokite jos turinį lorem.js failą ir įklijuokite juos į vietinę kopiją lorem.js. lorem.js tiesiog eksportuoja labai ilgą Lorem Ipsum teksto eilutę, kurią gali naudoti kiti JavaScript failai.

Viduje main.js failą, importuokite lorem eilutė iš lorem.js failą ir apibrėžkite reikiamus kintamuosius:

importuoti {lorem} iš'./lorem';
leisti tekstas = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "".split(' ');
leisti lastChar;
leisti wordCountControl = dokumentas.querySelector("#w-count");
leisti paragrafasCountControl = dokumentas.querySelector("#p-count");
leisti wordCountLabel = dokumentas.querySelector(„#w-count-label“);
leisti paragrafasCountLabel = dokumentas.querySelector(„#p-count-label“);
leisti wordCount = wordCountControl.value;
leisti paragrafų skaičius = paragrafų skaičiusControl.value;
leisti kopija = dokumentas.querySelector(".copy");

Šis kodas naudoja reguliarioji išraiška kad pašalintumėte bet kokius skyrybos ženklus lorem tekstą. The tekstą kintamasis susieja šią modifikuotą versiją lorem tekstą. Tai turėtų palengvinti žodžių ir pastraipų generavimą.

Generatoriaus funkcijų kūrimas

Kad bet kuris atsitiktinai sugeneruotas sakinys ar pastraipa atrodytų „tikra“, reikia skirti skyrybos ženklų. Apibrėžę visuotinius kintamuosius, sukurkite funkciją, vadinamą generuoti RandomPunctuation() ir toje funkcijoje sukurkite masyvą, vadinamą personažai ir užpildyti jį.

funkcijageneruoti Random Punctuation() {
leisti simboliai = [",", "!", ".", "?"];
leisti simbolis = simboliai[Matematika.floor(Matematika.random() * simboliai.ilgis)];
 lastChar = simbolis;
grąžinti charakteris;
}

Aukščiau pateiktas kodo blokas apibrėžia masyvą, personažai, kuriame yra skirtingų skyrybos ženklų. Jis apibrėžia kitą kintamąjį, charakteris, kurį jis nustato į atsitiktinį elementą iš personažai masyvas. Pasaulinis kintamasis, paskutinis Char, išsaugo tą pačią reikšmę, kurią grąžina funkcija.

Tada sukurkite a GeneParagraph() funkcija su a skaičiuoti parametras, kurio numatytoji reikšmė yra 100.

funkcijageneruoti pastraipą(skaičiuoti = 100) {
}

Šioje funkcijoje deklaruokite a pastraipą masyvą ir gauti atsitiktinius žodžius iš pasaulio tekstą masyvą, tada įstumkite jį į pastraipą.

leisti pastraipa = [];
dėl (leisti aš = 1; i <= skaičiuoti; i++) {
 paragrafas.push (tekstas[Matematika.floor(Matematika.random() * text.length)].toLowerCase());
}

Tada pridėkite kodą, kad kiekvienos pastraipos pirmame žodyje būtų rašoma didžioji raidė:

leisti fl=pastraipa[0];
pastraipa[0] = fl.pakeisti (fl[0], fl[0].didžiosios raidės());

Kiekviena pastraipa baigiasi skyrybos ženklu (dažniausiai tašku), todėl kiekvienos pastraipos pabaigoje pridėkite kodą, kuris prideda tašką.

leisti lwPos = pastraipa.ilgis - 1;
leisti lWord = pastraipa[lwPos];
paragrafas[lwPos] = lWord.replace (lWord, lWord + ".");

Tada įdiekite funkciją, kad pridėtumėte atsitiktinai sugeneruotą skyrybos ženklą prie atsitiktinio elemento pastraipą masyvas.

paragrafas.forEach((žodis, rodyklė) => {
jeigu (rodyklė > 0 && indeksas % 100) {
leisti atsitiktinisSkaičius = Matematika.floor(Matematika.random() * 4);
leisti poz = indeksas + atsitiktinis skaičius;
leisti randWord = pastraipa[poz];
 paragrafas[pos] = randWord.replace (randWord, randWord + generuotiRandomPunctuation());
leisti nWord=pastraipa[pozicija + 1];
jeigu (paskutinė diagrama !== ",") {
 pastraipa [poz. + 1] = nWord.replace (nWord[0], nWord[0].didžiosios raidės());
 }
 }
})

Šis kodo blokas sugeneruoja atsitiktinį skyrybos ženklą ir prideda jį prie atsitiktinio elemento pabaigos pastraipą masyvas. Pridėjus skyrybos ženklą, kito elemento pirmoji raidė rašoma didžiąja raide, jei skyrybos ženklas nėra kablelis.

Galiausiai grąžinkite pastraipą masyvas suformatuotas kaip eilutė:

grąžinti paragrafas.join(" ");

Lorem ipsum tekstas turi turėti „struktūrą“, pagrįstą naudotojo nurodytų pastraipų skaičiumi. Šiai „struktūrai“ apibrėžti galite naudoti masyvą. Pavyzdžiui, jei vartotojas nori lorem ipsum teksto su trimis pastraipomis, masyvas „structure“ turėtų atrodyti taip:

struktūra = ["Pirma pastraipa"., "\n \n", "Antra pastraipa"., "\n \n", "Trečia pastraipa"]

Aukščiau esančiame kodo bloke kiekvienas „\n \n“ reiškia tarpą tarp kiekvienos pastraipos. Jei prisiregistruosite structure.join("") naršyklės konsolėje turėtumėte matyti šiuos dalykus:

Sukurkite funkciją, kuri automatiškai generuoja šią struktūrą ir iškviečia generuoti pastraipą funkcija:

funkcijageneruotiStruktūrą(wordCount, pastraipa = 1) {
leisti struktūra = [];
dėl (leisti aš = 0; i < pastraipa * 2; i++) {
jeigu (i % 20) struktūra[i] = generuotiPastraipa (wordCount);
Kitasjeigu (i < (pastraipa * 2) - 1) struktūra[i] = "\n \n";
 }
grąžinti structure.join("");
}

Įvykių klausytojų įtraukimas į valdiklius

Pridėkite „įvesties“ įvykių klausytoją prie wordCountControl įvesties elementą ir atgalinio skambinimo funkcijoje nustatykite žodžių skaičius į įvesties vertę. Tada atnaujinkite etiketę.

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

Tada prie „įvesties“ pridėkite įvykių klausytoją paragrafasCountControl įvesties elementą ir atgalinio skambinimo funkcijoje nustatykite pastraipaSkaičius į įvesties vertę ir atnaujinkite etiketę.

paragrafasCountControl.addEventListener("įvestis", (e) => {
 paragrafų skaičius= e.target.value;
 paragrafasCountLabel.textContent = e.target.value;
})

Pridėkite „spustelėjimo“ įvykių klausytoją prie kopija mygtuką, kuris iškviečia atgal į copyText() kai įvykis suveikia.

copy.addEventListener("spausti", ()=>kopijuotiText());

Galiausiai pridėkite įvykių klausytoją „pateikti“. forma HTML elementą ir iškvieskite atnaujinti vartotojo sąsają funkcija atgalinio skambinimo funkcijoje.

dokumentas.querySelector("forma").addEventListener('Pateikti', (e) => {
 e.preventDefault();
 updateUI();
})

UI užbaigimas ir atnaujinimas

Sukurkite funkciją getControlValues kad grįžta žodžių skaičius ir pastraipaSkaičius kaip objektas.

funkcijagetControlValues() {
grąžinti { žodžių skaičius, pastraipų skaičius };
}

Tada sukurkite updateUI() funkcija, kuri vartotojui pateikia sugeneruotą tekstą ekrane:

funkcijaatnaujinti vartotojo sąsają() {
leisti išvestis = generuotiStructure (getControlValues().wordCount, getControlValues().paragraphCount)
dokumentas.querySelector(".output").innerText = išvestis;
}

Beveik baigta. Sukurti copyText() funkcija, kuri įrašo tekstą į mainų sritį, kai vartotojas spusteli mygtuką „Kopijuoti į mainų sritį“.

asyncfunkcijacopyText() {
leisti tekstas = dokumentas.querySelector(".output").innerText;
bandyti {
laukti navigator.clipboard.writeText (tekstas);
 budrus(„Nukopijuota į mainų sritį“);
 } sugauti (err) {
 budrus(„Nepavyko nukopijuoti:“, klaida);
 }
 }

Tada skambinkite updateUI() funkcija:

updateUI();

Sveikiname! Sukūrėte lorem ipsum teksto generatorių su JavaScript ir Vite.

Padidinkite savo „JavaScript“ kūrimą naudodami „Vite“.

„Vite“ yra populiarus sąsajos įrankis, leidžiantis lengvai nustatyti sąsajos sistemą. Jis palaiko įvairias sistemas, tokias kaip „React“, „Svelte“, „SolidJS“ ir net paprastą „JavaScript“. Daugelis „JavaScript“ kūrėjų naudoja „Vite“, nes ją labai lengva nustatyti ir labai greitai.