Rakendage oma Vite oskusi selle GUI-põhise näivtekstitegijaga.

Lorem ipsum on tekst, mida arendajad ja kujundajad üle maailma kasutavad kohatäitena. Kui suhtlete paljude kasutajaliidese prototüüpidega, olete tõenäoliselt sellega varem kokku puutunud.

Õppige Vite ja JavaScriptiga paindlikku Lorem ipsum generaatorit koostama ning parandate oma arendusoskusi kasuliku tulemusega.

Miks Lorem Ipsumit nii laialdaselt kasutatakse?

Võib tekkida küsimus, miks nii paljud arendajad ja disainerid valivad lorem ipsumi, kui nad saavad lihtsalt kopeerida lehe avalikust omandist või muust sarnasest raamatust. Peamine põhjus on see, et see võimaldab kasutajal või vaatajal saada aimu dokumendi või prototüübi visuaalsest vormist, ilma et see keskenduks liiga palju kohatäite tekstile.

Kujutage ette, et kujundate ajalehte. Selle asemel, et teha raskusi teksti kopeerimisega erinevatest allikatest, et kujundada selline võimalikult realistlik, võite lihtsalt kopeerida standardse lorem ipsumi kohatäite teksti ja seda kasutada selle asemel.

instagram viewer

Lorem ipsum on nii laialt tuntud, et te ei pea isegi täpsustama, et tegemist on kohatäidetekstiga – peaaegu kõik, kes sellega kokku puutuvad, tunnevad kohe ära, et tekst on täiteaine.

Projekti- ja arendusserveri seadistamine

Selles projektis kasutatav kood on saadaval a GitHubi hoidla ja seda saate MIT-i litsentsi alusel tasuta kasutada. Kopeerige faili sisu stiil.css ja lorem.js failid ja kleepige need nende failide kohalikesse koopiatesse.

Kui soovite vaadata selle projekti reaalajas versiooni, saate seda vaadata demo.

Te hakkate kasutama Vite ehitustööriist asju paika panema. Veenduge, et teil oleks Node.js ja Sõlme paketihaldur (NPM) või teie masinasse installitud lõng, seejärel avage terminal ja käivitage:

npm luua vite

Või:

lõng luua vite

See peaks moodustama tühja Vite projekti. Sisestage projekti nimi, määrake raamistikuks "Vanilla" ja variandiks "Vanilla". Pärast seda liikuge nupuga projektikataloogi cd käsk, seejärel käivitage:

npm i

Või:

lõng

Pärast kõigi sõltuvuste installimist avage projekt valitud tekstiredaktoris, seejärel muutke projekti struktuuri, et see näeks välja umbes selline:

Nüüd tühjendage sisu index.html faili ja asenda see järgmisega:

html>
<htmllang="en">
<pea>
<metamärgistik="UTF-8" />
<linkrel="ikoon"tüüp="image/svg+xml"href="/vite.svg" />
<metanimi="vaateava"sisu="laius = seadme laius, esialgne skaala = 1,0" />
<pealkiri>Lorem Ipsumi generaatorpealkiri>
pea>
<keha>
<h1>Lorem Ipsumi generaatorh1>
<divid="rakendus">
<divklass="kontrollid">
<vormi>
<divklass="kontroll">
<siltjaoks="w-count">Sõnad lõigu kohtasilt>
<div>
<sisendtüüp="vahemik"id="w-count"min="10"max="100"väärtus="25"samm="10">
<ulatusid="w-count-label">25ulatus>
div>
div>
<divklass="kontroll">
<siltjaoks="p-count">Lõikude arvsilt>
<div>
<sisendtüüp="vahemik"id="p-count"min="1"max="20"samm="1"väärtus="3">
<ulatusid="p-count-label">3ulatus>
div>
div>
<nupputüüp="Esita">Genereerinuppu>
vormi>
<nuppuklass="koopia">Kopeerida lõikelaualenuppu>
<divklass="info">
 Kasutage parameetrite määramiseks liugureid, seejärel vajutage nuppu "Genereeri".

 Saate teksti kopeerida, vajutades nuppu "Kopeeri lõikelauale".
div>
div>
<divklass="väljund">div>
div>
<stsenaariumtüüp="moodul"src="/main.js">stsenaarium>
keha>
html>

See märgistus lihtsalt määratleb kasutajaliidese. Ekraani vasakus servas kuvatakse juhtnupud, paremal pool aga väljund. Järgmisena avage main.js faili, tühjendage selle sisu ja lisage importimiseks üks rida stiil.css:

importida'./style.css'

Loremi faili importimine ja globaalsete muutujate määratlemine

Avage selle projekti GitHubi hoidla, kopeerige selle sisu lorem.js faili ja kleepige need oma kohalikku koopiasse lorem.js. lorem.js ekspordib lihtsalt väga pika Lorem Ipsumi tekstijada, mida teised JavaScripti failid kasutada saavad.

Aastal main.js fail, importige lorem string alates lorem.js faili ja määrake vajalikud muutujad:

importida {lorem} alates'./lorem';
lase text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "".split(' ');
lase lastChar;
lase wordCountControl = dokument.querySelector("#w-count");
lase paragrahvCountControl = dokument.querySelector("#p-count");
lase wordCountLabel = dokument.querySelector("#w-count-label");
lase paragrahvCountLabel = dokument.querySelector("#p-count-label");
lase wordCount = wordCountControl.value;
lase paragrahv = paragrahvCountControl.value;
lase koopia = dokument.querySelector(".copy");

See kood kasutab regulaaravaldis kirjavahemärkide eemaldamiseks lorem tekst. The tekst muutuja seob selle modifitseeritud versiooni lorem tekst. See peaks hõlbustama sõnade ja lõikude loomist.

Generaatori funktsioonide loomine

Selleks, et iga juhuslikult genereeritud lause või lõik näeks välja "päris", peavad olema kirjavahemärgid. Pärast globaalsete muutujate määratlemist looge funktsioon nimega gener RandomPunctuation() ja loo selles funktsioonis massiiv nimega tegelased ja asustada see.

funktsioonigenereeri RandomPunctuation() {
lase märgid = [",", "!", ".", "?"];
lase märk = tähemärki[matemaatika.floor(matemaatika.random() * märgid.pikkus)];
 lastChar = märk;
tagasi iseloom;
}

Ülaltoodud koodiplokk määratleb massiivi, tegelased, mis sisaldab erinevaid kirjavahemärke. See määratleb teise muutuja, iseloomu, mille see määrab juhuslikuks elemendiks tegelased massiivi. globaalne muutuja, lastChar, salvestab sama väärtuse, mille funktsioon seejärel tagastab.

Järgmisena looge a generParagraph() funktsioon koos a loendama parameeter, mille vaikeväärtus on 100.

funktsioonigenereeridaLõige(arv = 100) {
}

Selles funktsioonis deklareerige a lõik massiivi ja hankige globaalselt juhuslikke sõnu tekst massiivi, seejärel lükake see sisse lõik.

lase lõik = [];
jaoks (lase i = 1; i <= loendama; i++) {
 paragrahv.push (text[matemaatika.floor(matemaatika.random() * text.length)].toLowerCase());
}

Seejärel lisage kood iga lõigu esimese sõna esimese tähe suureks kirjutamiseks:

lase fl=lõik[0];
lõik[0] = fl.asendada (fl[0], fl[0].Suurtähe());

Iga lõik lõpeb kirjavahemärgiga (tavaliselt punkt), seega lisage iga lõigu lõppu kood, mis lisab punkti.

lase lwPos = lõik.pikkus - 1;
lase lWord = lõik[lwPos];
paragrahv[lwPos] = lWord.replace (lWord, lWord + ".");

Järgmisena rakendage funktsioon, et lisada juhuslikult genereeritud kirjavahemärgid juhuslikule elemendile lõik massiivi.

paragrahv.forEach((sõna, indeks) => {
kui (indeks > 0 && indeks % 100) {
lase juhuslikNum = matemaatika.floor(matemaatika.random() * 4);
lase pos = indeks + juhuslik arv;
lase randWord = lõik[pos];
 paragrahv[pos] = randWord.replace (randWord, randWord + generRandomPunctuation());
lase nWord=lõik[pos + 1];
kui (viimane joonis !== ",") {
 lõik[pos + 1] = nWord.asenda (nWord[0], nWord[0].Suurtähe());
 }
 }
})

See koodiplokk genereerib juhusliku kirjavahemärgi ja lisab selle failist juhusliku elemendi lõppu lõik massiivi. Kui kirjavahemärk ei ole koma, kirjutab see pärast kirjavahemärkide lisamist järgmise elemendi algustähe suureks.

Lõpuks tagastage lõik stringina vormindatud massiiv:

tagasi paragrahv.join(" ");

Lorem ipsum tekstil peaks olema „struktuur”, mis põhineb kasutaja määratud lõikude arvul. Selle "struktuuri" määratlemiseks saate kasutada massiivi. Näiteks kui kasutaja soovib kolme lõiguga lorem ipsum teksti, peaks massiiv "struktuur" välja nägema järgmine:

struktuur = ["Esimene lõik.", "\n \n", "Teine lõik.", "\n \n", "Kolmas lõik"]

Ülaltoodud koodiplokis tähistab iga "\n \n" iga lõigu vahet. Kui logite structure.join("") brauseri konsoolis peaksite nägema järgmist:

Looge funktsioon, mis genereerib selle struktuuri automaatselt ja kutsub esile genereeridaLõige funktsioon:

funktsioonigenereeridaStruktuur(wordCount, lõik = 1) {
lase struktuur = [];
jaoks (lase i = 0; i < lõik * 2; i++) {
kui (i % 20) struktuur[i] = genereerida paragrahv (wordCount);
muidukui (i < (lõik * 2) - 1) struktuur[i] = "\n \n";
 }
tagasi structure.join("");
}

Juhtelementidesse sündmustekuulajate lisamine

Lisage "sisend" sündmuste kuulaja wordCountControl sisendelement ja tagasihelistamisfunktsioonis määrake sõnade arv sisendväärtusele. Seejärel värskendage silti.

wordCountControl.addEventListener("sisend", (e) => {
 wordCount = e.sihtväärtus;
 wordCountLabel.textContent= e.target.value;
})

Järgmisena lisage "sisend" sündmuste kuulaja paragrahvCountControl sisendelement ja tagasihelistamisfunktsioonis määrake lõikArv sisendväärtusele ja värskendage silti.

paragraphCountControl.addEventListener("sisend", (e) => {
 paragrahv= e.target.value;
 paragrahvCountLabel.textContent = e.target.value;
})

Lisage "klõpsu" sündmuste kuulaja kopeerida nupp, mis helistab tagasi copyText() kui sündmus käivitub.

copy.addEventListener("klõpsake", ()=>kopeeriTekst());

Viimasena lisage sündmusekuulaja "Esita". vormi HTML-elementi ja helistage updateUI funktsioon tagasihelistamisfunktsioonis.

dokument.querySelector("vorm").addEventListener('Esita', (e) => {
 e.preventDefault();
 updateUI();
})

Kasutajaliidese lõpetamine ja värskendamine

Looge funktsioon getControlValues mis naaseb sõnade arv ja lõikArv objektina.

funktsioonigetControlValues() {
tagasi { wordCount, paragraphCount };
}

Seejärel looge updateUI() funktsioon, mis kuvab loodud teksti kasutaja jaoks ekraanil:

funktsiooniupdateUI() {
lase väljund = generateStructure (getControlValues().wordCount, getControlValues().paragraphCount)
dokument.querySelector(".väljund").innerText = väljund;
}

Peaaegu valmis. Looge copyText() funktsioon, mis kirjutab teksti lõikepuhvrisse alati, kui kasutaja klõpsab nuppu "Kopeeri lõikelauale".

asünkrfunktsioonicopyText() {
lase tekst = dokument.querySelector(".väljund").innerText;
proovi {
ootama navigator.clipboard.writeText (tekst);
 hoiatus ("Kopeeritud lõikelauale");
 } püüda (err) {
 hoiatus ("Kopeerimine ebaõnnestus:", eksitus);
 }
 }

Seejärel helistage updateUI() funktsioon:

updateUI();

Palju õnne! Olete loonud JavaScripti ja Vite abil lorem ipsum tekstigeneraatori.

Täiendage oma JavaScripti arendamist Vitega

Vite on populaarne kasutajaliidese tööriist, mis muudab kasutajaliidese raamistiku seadistamise lihtsaks. See toetab mitmesuguseid raamistikke, nagu React, Svelte, SolidJS ja isegi tavaline vanilje JavaScript. Paljud JavaScripti arendajad kasutavad Vitet, kuna seda on väga lihtne seadistada ja väga kiire.