Kā izveidot Lorem Ipsum teksta ģeneratoru, izmantojot JavaScript un Vite

Lorem ipsum ir teksts, ko izstrādātāji un dizaineri visā pasaulē izmanto kā vietturi. Ja mijiedarbojaties ar daudziem lietotāja interfeisa prototipiem, jūs, iespējams, ar to esat saskāries jau iepriekš.

Uzziniet, kā izveidot elastīgu Lorem ipsum ģeneratoru, izmantojot Vite un JavaScript, un attīstīsit savas attīstības prasmes ar noderīgu rezultātu.

Kāpēc Lorem Ipsum tiek plaši izmantots?

Jums varētu rasties jautājums, kāpēc tik daudzi izstrādātāji un dizaineri izvēlas lorem ipsum, ja viņi var vienkārši kopēt lapu no publiskas grāmatas vai līdzīgas grāmatas. Galvenais iemesls ir tas, ka tas ļauj lietotājam vai skatītājam iegūt priekšstatu par dokumenta vai prototipa vizuālo formu, nepievēršot pārāk lielu uzmanību viettura tekstam.

Iedomājieties, ka veidojat laikrakstu. Tā vietā, lai pārdzīvotu problēmas, kopējot tekstu no dažādiem avotiem, lai dizains būtu kā cik vien iespējams reālistisku, jūs varētu vienkārši nokopēt standarta lorem ipsum viettura tekstu un izmantot to vietā.

Lorem ipsum ir tik plaši atpazīstams, ka jums pat nav jānorāda, ka tas ir viettura teksts — gandrīz katrs, kas ar to saskaras, uzreiz atpazīs, ka teksts ir aizpildījums.

Projektu un izstrādes servera iestatīšana

Šajā projektā izmantotais kods ir pieejams a GitHub repozitorijs un to varat izmantot bez maksas saskaņā ar MIT licenci. Kopējiet saturu stils.css un lorem.js failus un ielīmējiet tos savās šo failu lokālajās kopijās.

Ja vēlaties apskatīt šī projekta tiešraides versiju, varat to apskatīt demo.

Jūs izmantosiet Vite veidošanas rīks lai sakārtotu lietas. Pārliecinieties, vai jums ir Node.js un Mezglu pakotņu pārvaldnieks (NPM) vai jūsu datorā instalēta dzija, pēc tam atveriet termināli un palaidiet:

npm izveidot vite

Vai:

dzija izveidot vite

Tam vajadzētu izveidot tukšu Vites projektu. Ievadiet projekta nosaukumu, iestatiet ietvaru uz "Vanilla" un variantu uz "Vanilla". Pēc tam dodieties uz projekta direktoriju, izmantojot cd komandu, pēc tam palaidiet:

npm i

Vai:

dzija

Pēc visu atkarību instalēšanas atveriet projektu izvēlētajā teksta redaktorā un pēc tam modificējiet projekta struktūru, lai tas izskatītos apmēram šādi:

Tagad notīriet saturu index.html failu un aizstājiet to ar šādu:

html>
<htmllang="lv">
<galvu>
<metarakstzīmju kopa="UTF-8" />
<saiterel="ikona"veids="image/svg+xml"href="/vite.svg" />
<metanosaukums="skata logs"saturu="platums = ierīces platums, sākotnējais mērogs = 1,0" />
<virsraksts>Lorem Ipsum ģeneratorsvirsraksts>
galvu>
<ķermeni>
<h1>Lorem Ipsum ģeneratorsh1>
<divid="lietotne">
<divklasē="kontrole">
<formā>
<divklasē="kontrole">
<etiķetepriekš="w-count">Vārdi vienā rindkopāetiķete>
<div>
<ievadeveids="diapazons"id="w-count"min="10"maks="100"vērtību="25"solis="10">
<spanid="w-count-label">25span>
div>
div>
<divklasē="kontrole">
<etiķetepriekš="p-skaits">Rindkopu skaitsetiķete>
<div>
<ievadeveids="diapazons"id="p-skaits"min="1"maks="20"solis="1"vērtību="3">
<spanid="p-count-label">3span>
div>
div>
<poguveids="Iesniegt">Ģenerētpogu>
formā>
<poguklasē="kopēt">Kopēt starpliktuvēpogu>
<divklasē="informācija">
 Izmantojiet slīdņus, lai iestatītu parametrus, pēc tam nospiediet pogu "Ģenerēt".

 Varat kopēt tekstu, noklikšķinot uz pogas "Kopēt starpliktuvē".
div>
div>
<divklasē="izeja">div>
div>
<skriptsveids="modulis"src="/main.js">skripts>
ķermeni>
html>

Šis marķējums vienkārši definē lietotāja interfeisu. Ekrāna kreisajā pusē ir redzamas vadīklas, bet labajā pusē ir redzama izvade. Pēc tam atveriet galvenais.js failu, notīriet tā saturu un pievienojiet vienu rindiņu importēšanai stils.css:

imports'./style.css'

Lorem faila importēšana un globālo mainīgo definēšana

Atveriet šī projekta GitHub repozitoriju, kopējiet saturu lorem.js failu un ielīmējiet tos vietējā kopijā lorem.js. lorem.js vienkārši eksportē ļoti garu Lorem Ipsum teksta virkni, ko var izmantot citi JavaScript faili.

Iekš galvenais.js failu, importējiet lorem virkne no lorem.js failu un definējiet nepieciešamos mainīgos:

imports {lorem} no'./lorem';
ļaut teksts = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "".split(' ');
ļaut lastChar;
ļaut wordCountControl = dokumentu.querySelector("#w-count");
ļaut paragrāfsCountControl = dokumentu.querySelector("#p-count");
ļaut wordCountLabel = dokumentu.querySelector("#w-count-label");
ļaut paragrāfsCountLabel = dokumentu.querySelector("#p-count-label");
ļaut wordCount = wordCountControl.value;
ļaut paragrāfsCount = paragraphCountControl.value;
ļaut kopēt = dokumentu.querySelector(". Copy");

Šis kods izmanto regulāra izteiksme lai noņemtu visas pieturzīmes lorem tekstu. The tekstu mainīgais saista šo modificēto versiju lorem tekstu. Tam vajadzētu atvieglot vārdu un rindkopu ģenerēšanu.

Ģeneratora funkciju izveide

Lai jebkurš nejauši ģenerēts teikums vai rindkopa izskatītos kā "īsts", ir jābūt pieturzīmēm. Pēc globālo mainīgo definēšanas izveidojiet funkciju ar nosaukumu ģenerētRandomPunctuation() un šajā funkcijā izveidojiet masīvu, ko sauc rakstzīmes un aizpildiet to.

funkcijuģenerētRandomPieturzīmes() {
ļaut rakstzīmes = [",", "!", ".", "?"];
ļaut rakstzīme = rakstzīmes[Matemātika.floor(Matemātika.random() * rakstzīmes.garums)];
 lastChar = rakstzīme;
atgriezties raksturs;
}

Iepriekš minētais koda bloks definē masīvu, rakstzīmes, kurā ir dažādas pieturzīmes. Tas definē citu mainīgo, raksturs, ko tas iestata uz nejaušu elementu no rakstzīmes masīvs. Globālais mainīgais, LastChar, saglabā to pašu vērtību, ko funkcija pēc tam atgriež.

Pēc tam izveidojiet a GeneParagraph() funkcija ar a skaitīt parametrs, kura noklusējuma vērtība ir 100.

funkcijuģenerētParagraph(skaits = 100) {
}

Šajā funkcijā deklarējiet a paragrāfs masīvu un ienesiet nejaušus vārdus no globālā tekstu masīvs, pēc tam iespiediet to paragrāfs.

ļaut rindkopa = [];
priekš (ļaut i = 1; i <= skaitīt; i++) {
 paragrāfs.push (text[Matemātika.floor(Matemātika.random() * text.length)].to LowerCase());
}

Pēc tam pievienojiet kodu, lai katras rindkopas pirmajā vārdā rakstītu pirmo burtu ar lielo burtu:

ļaut fl=paragrāfs[0];
paragrāfs[0] = fl.aizstāt (fl[0], fl[0].UpperCase());

Katra rindkopa beidzas ar pieturzīmi (parasti ar punktu), tāpēc katras rindkopas beigās pievienojiet kodu, kas pievieno punktu.

ļaut lwPos = rindkopas garums - 1;
ļaut lWord = rindkopa[lwPos];
rindkopa[lwPos] = lWord.replace (lWord, lWord + ".");

Pēc tam ieviesiet funkcionalitāti, lai nejauši ģenerētu pieturzīmi pievienotu izlases elementam paragrāfs masīvs.

rindkopa.forEach((vārds, rādītājs) => {
ja (indekss > 0 && indekss % 100) {
ļaut randomNum = Matemātika.floor(Matemātika.random() * 4);
ļaut poz = indekss + randomNum;
ļaut randWord = rindkopa[poz];
 rindkopa[pos] = randWord.replace (randWord, randWord + ģenerētRandomPieturzīmes());
ļaut nWord=rindkopa[pozīcija + 1];
ja (pēdējaisChar !== ",") {
 rindkopa[poz + 1] = nWord.aizvietot (nWord[0], nWord[0].UpperCase());
 }
 }
})

Šis koda bloks ģenerē nejaušu pieturzīmes rakstzīmi un pievieno to nejauša elementa beigām no paragrāfs masīvs. Ja pieturzīme nav komats, pēc pieturzīmes pievienošanas nākamā elementa pirmais burts tiek rakstīts ar lielo burtu.

Visbeidzot atgrieziet paragrāfs masīvs, kas formatēts kā virkne:

atgriezties paragrāfs.join(" ");

Lorem ipsum tekstam ir jābūt “struktūrai”, kuras pamatā ir lietotāja norādītais rindkopu skaits. Varat izmantot masīvu, lai definētu šo "struktūru". Piemēram, ja lietotājs vēlas lorem ipsum tekstu ar trim rindkopām, masīvam "structure" vajadzētu izskatīties šādi:

struktūra = ["Pirmā rindkopa.", "\n \n", "Otrā rindkopa.", "\n \n", "Trešā rindkopa"]

Iepriekš esošajā koda blokā katrs "\n \n" apzīmē atstarpi starp katru rindkopu. Ja piesakāties structure.join("") pārlūkprogrammas konsolē jums vajadzētu redzēt šādu informāciju:

Izveidojiet funkciju, kas automātiski ģenerē šo struktūru un izsauc ģenerētParagraph funkcija:

funkcijuģenerētStructure(vārdu skaits, rindkopa = 1) {
ļaut struktūra = [];
priekš (ļaut i = 0; i < rindkopa * 2; i++) {
ja (i % 20) struktūra[i] = ģenerētParagrāfu (wordCount);
citsja (i < (punkts * 2) - 1) struktūra[i] = "\n \n";
 }
atgriezties structure.join("");
}

Notikumu uztvērēju pievienošana vadīklām

Pievienojiet "ievades" notikumu klausītāju WordCountControl ievades elementu un atzvanīšanas funkcijā iestatiet vārdu skaits uz ievades vērtību. Pēc tam atjauniniet etiķeti.

wordCountControl.addEventListener("ievade", (e) => {
 vārdu skaits = e.target.value;
 wordCountLabel.textContent= e.target.value;
})

Pēc tam pievienojiet "ievades" notikumu klausītāju rindkopaCountControl ievades elementu un atzvanīšanas funkcijā iestatiet rindkopa Skaits uz ievades vērtību un atjauniniet etiķeti.

paragraphCountControl.addEventListener("ievade", (e) => {
 paragrāfsCount= e.target.value;
 paragraphCountLabel.textContent = e.target.value;
})

Pievienojiet "klikšķa" notikumu uztvērēju kopiju poga, kas izsauc atpakaļ uz copyText() kad notikums tiek aktivizēts.

copy.addEventListener("klikšķis", ()=>kopētTekstu());

Visbeidzot, pievienojiet notikumu klausītāju “Iesniegt”. formā HTML elementu un izsauciet updateUI funkciju atzvanīšanas funkcijā.

dokumentu.querySelector("veidlapa").addEventListener('Iesniegt', (e) => {
 e.preventDefault();
 updateUI();
})

UI pabeigšana un atjaunināšana

Izveidojiet funkciju getControlValues kas atgriežas vārdu skaits un rindkopa Skaits kā objektu.

funkcijugetControlValues() {
atgriezties { vārdu skaits, rindkopu skaits };
}

Pēc tam izveidojiet updateUI() funkcija, kas lietotājam atveido ģenerēto tekstu ekrānā:

funkcijuupdateUI() {
ļaut izvade = generateStructure (getControlValues().wordCount, getControlValues().paragraphCount)
dokumentu.querySelector(".izeja").innerText = izvade;
}

Gandrīz pabeigts. Izveidojiet copyText() funkcija, kas ieraksta tekstu starpliktuvē ikreiz, kad lietotājs noklikšķina uz pogas "Kopēt starpliktuvē".

asinhronsfunkcijucopyText() {
ļaut teksts = dokumentu.querySelector(".izeja").innerText;
mēģināt {
gaidīt navigator.clipboard.writeText (teksts);
 brīdināt ("Kopēts starpliktuvē");
 } noķert (kļūda) {
 brīdināt ("Neizdevās kopēt:", kļūda);
 }
 }

Pēc tam zvaniet uz updateUI() funkcija:

updateUI();

Apsveicam! Jūs esat izveidojis lorem ipsum teksta ģeneratoru, izmantojot JavaScript un Vite.

Papildiniet savu JavaScript izstrādi ar Vite

Vite ir populārs priekšgala rīks, kas atvieglo priekšgala sistēmas iestatīšanu. Tas atbalsta dažādus ietvarus, piemēram, React, Svelte, SolidJS un pat vienkāršu vaniļas JavaScript. Daudzi JavaScript izstrādātāji izmanto Vite, jo to ir ļoti viegli iestatīt un ļoti ātri.