Käytä Vite-taitojasi tällä graafiseen käyttöliittymään perustuvalla tekstinvalmistajalla.

Lorem ipsum on tekstiä, jota kehittäjät ja suunnittelijat ympäri maailmaa käyttävät paikkamerkkinä. Jos olet vuorovaikutuksessa monien käyttöliittymäprototyyppien kanssa, olet todennäköisesti törmännyt siihen aiemmin.

Opi rakentamaan joustava Lorem ipsum -generaattori Viten ja JavaScriptin avulla, niin kehität kehitystaitojasi hyödyllisellä tuloksella.

Miksi Lorem Ipsumia käytetään niin laajasti?

Saatat ihmetellä, miksi niin monet kehittäjät ja suunnittelijat valitsevat lorem ipsumin, vaikka he voisivat vain kopioida sivun vapaasti käytettävissä olevasta kirjasta tai vastaavasta. Pääsyynä on se, että se antaa käyttäjälle tai katsojalle käsityksen asiakirjan tai prototyypin visuaalisesta muodosta ilman, että liiallinen keskittyminen itse paikkamerkkitekstiin.

Kuvittele, että suunnittelet sanomalehteä. Sen sijaan, että joutuisit kopioimaan tekstiä eri lähteistä tehdäksesi suunnittelusta sellaisen mahdollisimman realistinen, voit kopioida tavallisen lorem ipsum -paikkamerkkitekstin ja käyttää sitä sen sijaan.

instagram viewer

Lorem ipsum on niin laajalti tunnettu, että sinun ei tarvitse edes määritellä, että se on paikkamerkkiteksti – käytännössä jokainen, joka törmää siihen, tunnistaa heti, että teksti on täyte.

Projekti- ja kehityspalvelimen määrittäminen

Tässä projektissa käytetty koodi on saatavilla a GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssin alaisena. Kopioi tiedoston sisältö tyyli.css ja lorem.js tiedostot ja liitä ne omiin paikallisiin kopioihisi näistä tiedostoista.

Jos haluat katsoa tämän projektin live-versiota, voit katsoa tämän demo.

Tulet käyttämään Vite-rakennustyökalu laittamaan asioita kuntoon. Varmista, että sinulla on Node.js ja Node Package Manager (NPM) tai lanka asennettuna koneellesi, avaa sitten pääte ja suorita:

npm luo vite

Tai:

lanka luo vite

Tämän pitäisi rakentaa tyhjä Vite-projekti. Anna projektin nimi, aseta puitteeksi "Vanilla" ja variantiksi "Vanilla". Kun olet tehnyt tämän, siirry projektihakemistoon -painikkeella CD komento ja suorita sitten:

npm i

Tai:

lanka

Kun olet asentanut kaikki riippuvuudet, avaa projekti haluamassasi tekstieditorissa ja muokkaa sitten projektin rakennetta tältä:

Tyhjennä nyt tiedoston sisältö index.html tiedosto ja korvaa se seuraavalla:

html>
<htmllang="en">
<pää>
<metamerkkisetti="UTF-8" />
<linkkirel="kuvake"tyyppi="image/svg+xml"href="/vite.svg" />
<metanimi="näkymä"sisältö="leveys = laitteen leveys, alkumittakaava = 1,0" />
<otsikko>Lorem Ipsum -generaattoriotsikko>
pää>
<kehon>
<h1>Lorem Ipsum -generaattorih1>
<divid="sovellus">
<divluokkaa="ohjaukset">
<muodossa>
<divluokkaa="valvonta">
<etikettivarten="w-count">Sanat kappaletta kohtietiketti>
<div>
<syöttötyyppi="alue"id="w-count"min="10"max="100"arvo="25"askel="10">
<jänneväliid="w-count-label">25jänneväli>
div>
div>
<divluokkaa="valvonta">
<etikettivarten="p-count">Kappaleiden määräetiketti>
<div>
<syöttötyyppi="alue"id="p-count"min="1"max="20"askel="1"arvo="3">
<jänneväliid="p-count-label">3jänneväli>
div>
div>
<-painikettatyyppi="Lähetä">Tuottaa-painiketta>
muodossa>
<-painikettaluokkaa="kopio">Kopioi leikepöydälle-painiketta>
<divluokkaa="tiedot">
 Aseta parametrit liukusäätimillä ja paina sitten "Luo" -painiketta.

 Voit kopioida tekstin painamalla "Kopioi leikepöydälle" -painiketta
div>
div>
<divluokkaa="lähtö">div>
div>
<käsikirjoitustyyppi="moduuli"src="/main.js">käsikirjoitus>
kehon>
html>

Tämä merkintä yksinkertaisesti määrittelee käyttöliittymän. Näytön vasemmalla puolella näkyvät säätimet, kun taas oikealla puolella näkyy tulos. Avaa seuraavaksi main.js tiedosto, tyhjennä sen sisältö ja lisää yksi rivi tuotavaksi tyyli.css:

tuonti'./style.css'

Lorem-tiedoston tuonti ja globaalien muuttujien määrittäminen

Avaa tämän projektin GitHub-arkisto, kopioi sen sisältö lorem.js tiedosto ja liitä ne paikalliseen kopioosi lorem.js. lorem.js yksinkertaisesti vie hyvin pitkän merkkijonon Lorem Ipsum -tekstiä, jota muut JavaScript-tiedostot voivat käyttää.

Vuonna main.js tiedosto, tuo lorem merkkijono lorem.js tiedosto ja määritä tarvittavat muuttujat:

tuonti { lorem } alkaen'./lorem';
antaa text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").jakaa(' ');
antaa lastChar;
antaa wordCountControl = asiakirja.querySelector("#w-count");
antaa kohtaCountControl = asiakirja.querySelector("#p-count");
antaa wordCountLabel = asiakirja.querySelector("#w-count-label");
antaa paragraphCountLabel = asiakirja.querySelector("#p-count-label");
antaa wordCount = wordCountControl.value;
antaa kohtaLaskuri = kappaleenlasku.Control.value;
antaa kopioi = asiakirja.querySelector(".kopio");

Tämä koodi käyttää säännöllinen lauseke poistaaksesi kaikki välimerkit lorem teksti. The teksti muuttuja sitoo tämän muokatun version lorem teksti. Tämän pitäisi helpottaa sanojen ja kappaleiden luomista.

Generaattoritoimintojen luominen

Jotta mikä tahansa satunnaisesti luotu lause tai kappale näyttäisi "todelliselta", siinä on oltava välimerkit. Kun olet määrittänyt globaalit muuttujat, luo funktio nimeltä gener RandomPunctuation() ja luo siinä funktiossa taulukko nimeltä hahmoja ja täyttää sen.

toimintogeneroi RandomPunctuation() {
antaa merkkiä = [",", "!", ".", "?"];
antaa merkki = merkkiä[Matematiikka.lattia(Matematiikka.random() * merkit.pituus)];
 lastChar = merkki;
palata merkki;
}

Yllä oleva koodilohko määrittää taulukon, hahmoja, joka sisältää erilaisia ​​välimerkkejä. Se määrittelee toisen muuttujan, merkki, jonka se asettaa satunnaiseksi elementiksi kohteesta hahmoja joukko. Globaali muuttuja, lastChar, tallentaa saman arvon, jonka funktio sitten palauttaa.

Luo seuraavaksi a generateParagraph() toiminto a Kreivi parametri, jonka oletusarvo on 100.

toimintogeneroParagraph(laske = 100) {
}

Ilmoita tässä funktiossa a kohta taulukkoon ja hakea satunnaisia ​​sanoja globaalista teksti taulukkoon ja työnnä se sitten sisään kohta.

antaa kappale = [];
varten (antaa minä = 1; i <= laskea; i++) {
 kappale.push (teksti[Matematiikka.lattia(Matematiikka.random() * text.length)].toLowerCase());
}

Lisää seuraavaksi koodi jokaisen kappaleen ensimmäisen sanan ensimmäisestä kirjaimesta:

antaa fl=kohta[0];
kohta[0] = fl.korvaa (fl[0], fl[0].UpperCase());

Jokainen kappale päättyy välimerkkiin (yleensä pisteeseen), joten lisää koodi, joka lisää pisteen jokaisen kappaleen loppuun.

antaa lwPos = kappaleen pituus - 1;
antaa lWord = kappale[lwPos];
kohta[lwPos] = lWord.replace (lWord, lWord + ".");

Toteuta seuraavaksi toiminto lisätäksesi satunnaisesti luodut välimerkit satunnaiseen elementtiin kohta joukko.

kohta.forEach((sana, indeksi) => {
jos (indeksi > 0 && indeksi % 100) {
antaa randomNum = Matematiikka.lattia(Matematiikka.random() * 4);
antaa pos = indeksi + satunnaisluku;
antaa randWord = kappale[pos];
 kappale[pos] = randWord.replace (randWord, randWord + generoRandomPunctuation());
antaa nWord=kappale[pos + 1];
jos (lastChar !== ",") {
 kappale[pos + 1] = nWord.replace (nWord[0], nWord[0].UpperCase());
 }
 }
})

Tämä koodilohko luo satunnaisen välimerkin ja lisää sen satunnaisen elementin loppuun kohta joukko. Kun välimerkit on lisätty, se kirjoittaa isolla seuraavan elementin ensimmäisen kirjaimen, jos välimerkki ei ole pilkku.

Lopuksi palauta kohta jono muotoiltu jono:

palata kohta.join(" ");

Lorem ipsum -tekstillä tulee olla "rakenne", joka perustuu käyttäjän määrittämien kappaleiden määrään. Voit määrittää tämän "rakenteen" taulukon avulla. Jos käyttäjä esimerkiksi haluaa lorem ipsum -tekstin, jossa on kolme kappaletta, "rakenne"-taulukon pitäisi näyttää tältä:

rakenne = ["Ensimmäinen kappale.", "\n \n", "Toinen kappale.", "\n \n", "Kolmas kappale"]

Yllä olevassa koodilohkossa jokainen "\n \n" edustaa kunkin kappaleen välistä väliä. Jos kirjaudut rakenne.join("") selainkonsolissa sinun pitäisi nähdä seuraava:

Luo funktio, joka luo tämän rakenteen automaattisesti ja kutsuu generoParagraph toiminto:

toimintogeneroi rakenne(sanamäärä, kappale = 1) {
antaa rakenne = [];
varten (antaa minä = 0; minä < kappale * 2; i++) {
jos (i % 20) rakenne[i] = generoiKappale (wordCount);
muujos (i < (kohta * 2) - 1) rakenne[i] = "\n \n";
 }
palata structure.join("");
}

Tapahtumaseurainten lisääminen säätimiin

Lisää "tulo"-tapahtuman kuuntelija wordCountControl syöttöelementti ja aseta takaisinsoittotoiminnossa sanamäärä syöttöarvoon. Päivitä sitten etiketti.

wordCountControl.addEventListener("syöttö", (e) => {
 sanamäärä = e.target.value;
 wordCountLabel.textContent= e.target.value;
})

Lisää seuraavaksi "syöte"-tapahtuman kuuntelija kohtaCountControl syöttöelementti ja aseta takaisinsoittotoimintoon kappalemäärä syötearvoon ja päivitä tarra.

paragraphCountControl.addEventListener("syöttö", (e) => {
 kappalemäärä= e.target.value;
 paragraphCountLabel.textContent = e.target.value;
})

Lisää "click"-tapahtuman kuuntelija kopio painiketta, joka kutsuu takaisin copyText() kun tapahtuma käynnistyy.

copy.addEventListener("klikkaus", ()=>kopioiTeksti());

Lisää lopuksi "lähetä" -tapahtuman kuuntelija muodossa HTML-elementti ja kutsu updateUI toiminto takaisinsoittotoiminnossa.

asiakirja.querySelector("lomake").addEventListener('Lähetä', (e) => {
 e.preventDefault();
 updateUI();
})

Käyttöliittymän viimeistely ja päivitys

Luo funktio getControlValues joka palaa sanamäärä ja kappalemäärä esineenä.

toimintogetControlValues() {
palata { sanamäärä, kappalemäärä };
}

Luo sitten updateUI() toiminto, joka näyttää luodun tekstin näytölle käyttäjälle:

toimintoupdateUI() {
antaa output = generatorStructure (getControlValues().wordCount, getControlValues().paragraphCount)
asiakirja.querySelector(".lähtö").innerText = tulos;
}

Melkein valmis. Luo copyText() toiminto, joka kirjoittaa tekstin leikepöydälle aina, kun käyttäjä napsauttaa "Kopioi leikepöydälle" -painiketta.

asynktoimintocopyText() {
antaa teksti = asiakirja.querySelector(".lähtö").innerText;
yrittää {
odottaa navigator.clipboard.writeText (teksti);
 hälytys ("Kopioitu leikepöydälle");
 } ottaa kiinni (err) {
 hälytys ('Kopiointi epäonnistui:', err);
 }
 }

Soita sitten updateUI() toiminto:

updateUI();

Onnittelut! Olet rakentanut lorem ipsum -tekstigeneraattorin JavaScriptillä ja Vitellä.

Lataa JavaScript-kehitys Vitellä

Vite on suosittu käyttöliittymätyökalu, jonka avulla käyttöliittymäkehyksen määrittäminen on helppoa. Se tukee useita kehyksiä, kuten React, Svelte, SolidJS ja jopa tavallinen vanilja JavaScript. Monet JavaScript-kehittäjät käyttävät Viteä, koska se on erittäin helppo asentaa ja erittäin nopea.