Bu GUI tabanlı kukla metin oluşturucu ile Vite becerilerinizi uygulamaya koyun.

Lorem ipsum, dünyanın dört bir yanındaki geliştiricilerin ve tasarımcıların yer tutucu olarak kullandıkları bir metindir. Çok sayıda UI prototipi ile etkileşime giriyorsanız, muhtemelen daha önce karşılaşmışsınızdır.

Vite ve JavaScript ile esnek bir Lorem ipsum üretecini nasıl oluşturacağınızı öğrenin ve yararlı bir sonuçla geliştirme becerilerinizi geliştirin.

Lorem Ipsum Neden Bu Kadar Yaygın Olarak Kullanılıyor?

Kamuya açık bir kitaptan veya benzerlerinden bir sayfayı kopyalamak varken neden bu kadar çok geliştirici ve tasarımcının lorem ipsum'u seçtiğini merak ediyor olabilirsiniz. Bunun ana nedeni, kullanıcının veya izleyicinin, yer tutucu metnin kendisine çok fazla odaklanmadan bir belgenin veya prototipin görsel biçimini anlamasına olanak sağlamasıdır.

Bir gazete tasarladığınızı hayal edin. Tasarımı yapmak için farklı kaynaklardan metin kopyalama zahmetine girmek yerine mümkün olduğu kadar gerçekçi, standart lorem ipsum yer tutucu metnini kopyalayabilir ve onu kullanabilirsiniz yerine.

instagram viewer

Lorem ipsum o kadar geniş çapta tanınır ki, bunun bir yer tutucu metin olduğunu belirtmenize bile gerek kalmaz; onunla karşılaşan hemen hemen herkes metnin dolgu olduğunu hemen anlayacaktır.

Proje ve Geliştirme Sunucusunu Kurma

Bu projede kullanılan kod bir GitHub deposu ve MIT lisansı altında ücretsiz olarak kullanabilirsiniz. içeriğini kopyala stil.css ve lorem.js dosyaları kopyalayın ve bu dosyaların kendi yerel kopyalarınıza yapıştırın.

Bu projenin canlı bir versiyonuna göz atmak isterseniz, buna göz atabilirsiniz. gösteri.

kullanıyor olacaksın Vite oluşturma aracı bir şeyler ayarlamak için. Node.js'ye sahip olduğunuzdan emin olun ve Düğüm Paket Yöneticisi (NPM) veya Makinenize kurulu Yarn, ardından terminalinizi açın ve çalıştırın:

npm davet oluştur

Veya:

İplik davet oluştur

Bu, boş bir Vite projesini iskele etmelidir. Proje adını girin, çerçeveyi "Vanilya" olarak ve değişkeni "Vanilya" olarak ayarlayın. Bunu yaptıktan sonra, proje dizinine gidin. CD komut, ardından çalıştırın:

npm ben

Veya:

iplik

Tüm bağımlılıkları kurduktan sonra, projeyi seçtiğiniz metin düzenleyicide açın, ardından proje yapısını aşağıdaki gibi görünecek şekilde değiştirin:

Şimdi, içindekileri temizleyin index.html dosyasını açın ve aşağıdakiyle değiştirin:

html>
<htmldil="tr">
<KAFA>
<metakarakter kümesi="UTF-8" />
<bağlantırel="simge"tip="resim/svg+xml"href="/vite.svg" />
<metaisim="görüntü alanı"içerik="genişlik=cihaz genişliği, başlangıç ​​ölçeği=1.0" />
<başlık>Lorem Ipsum Jeneratörbaşlık>
KAFA>
<vücut>
<h1>Lorem Ipsum Jeneratörh1>
<divİD="uygulama">
<divsınıf="kontroller">
<biçim>
<divsınıf="kontrol">
<etiketiçin="w-sayısı">Paragraf başına kelimeetiket>
<div>
<giriştip="menzil"İD="w-sayısı"dakika="10"maks.="100"değer="25"adım="10">
<açıklıkİD="w-count-etiketi">25açıklık>
div>
div>
<divsınıf="kontrol">
<etiketiçin="p-sayısı">paragraf sayısıetiket>
<div>
<giriştip="menzil"İD="p-sayısı"dakika="1"maks.="20"adım="1"değer="3">
<açıklıkİD="p-count-etiketi">3açıklık>
div>
div>
<düğmetip="göndermek">oluşturdüğme>
biçim>
<düğmesınıf="kopyalamak">Panoya kopyaladüğme>
<divsınıf="bilgi">
 Parametreleri ayarlamak için kaydırıcıları kullanın, ardından "Oluştur" düğmesine basın.

 Metni "Panoya Kopyala" düğmesine basarak kopyalayabilirsiniz.
div>
div>
<divsınıf="çıktı">div>
div>
<senaryotip="modül"kaynak="/main.js">senaryo>
vücut>
html>

Bu işaretleme, yalnızca kullanıcı arayüzünü tanımlar. Ekranın sol tarafı kontrolleri, sağ tarafı ise çıktıyı gösterir. Ardından, ana.js dosya, içeriğini temizleyin ve içe aktarmak için tek bir satır ekleyin stil.css:

içe aktarmak'./style.css'

Lorem Dosyasını İçe Aktarma ve Global Değişkenleri Tanımlama

Bu projenin GitHub deposunu açın, içeriğini kopyalayın lorem.js dosyasını kopyalayın ve yerel kopyanıza yapıştırın. lorem.js. lorem.js diğer JavaScript dosyalarının kullanabileceği çok uzun bir Lorem Ipsum metni dizesini dışa aktarmanız yeterlidir.

İçinde ana.js dosya, içe aktar lorem gelen dize lorem.js dosyasını açın ve gerekli değişkenleri tanımlayın:

içe aktarmak { lorem } itibaren'./lorem';
izin vermek metin = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").bölmek(' ');
izin vermek son Karakter;
izin vermek wordCountControl = belge.querySelector("#w-sayım");
izin vermek paragrafSayımKontrolü = belge.querySelector("#p sayısı");
izin vermek kelimeSayıEtiketi = belge.querySelector("#w-count-etiketi");
izin vermek paragrafSayıEtiketi = belge.querySelector("#p-count-etiketi");
izin vermek wordCount = wordCountControl.value;
izin vermek paragrafSayı = paragrafSayıKontrol.değer;
izin vermek kopya = belge.querySelector(".kopya");

Bu kod kullanır normal ifade herhangi bir noktalama işaretini kaldırmak için lorem metin. bu metin değişkeni, bu değiştirilmiş sürümü bağlar lorem metin. Bu, kelime ve paragraf oluşturmayı kolaylaştırmalıdır.

Oluşturucu İşlevlerini Oluşturma

Rastgele oluşturulmuş herhangi bir cümle veya paragrafın "gerçek" görünmesi için noktalama işaretleri olması gerekir. Global değişkenleri tanımladıktan sonra, adında bir işlev oluşturun. Rastgele Noktalama İşareti() ve bu işlevde adlı bir dizi oluşturun karakterler ve doldurun.

işlevRastgele noktalama işareti oluştur() {
izin vermek karakterler = [",", "!", ".", "?"];
izin vermek karakter = karakterler[Matematik.zemin(Matematik.random() * karakterler.uzunluk)];
 lastChar = karakter;
geri dönmek karakter;
}

Yukarıdaki kod bloğu bir dizi tanımlar, karakterler, farklı noktalama işaretleri içerir. Başka bir değişken tanımlar, karakter, rastgele bir öğeye ayarladığı karakterler sıralamak. Küresel değişken, son karakter, işlevin daha sonra döndürdüğü değeri saklar.

Ardından, bir Paragraf oluşturmak() ile işlev saymak varsayılan değeri 100 olan parametre.

işlevParagraf oluşturmak(saymak = 100) {
}

Bu işlevde, bir bildirimde bulunun paragraf dizi ve globalden rastgele kelimeler getir metin dizi, ardından içine itin paragraf.

izin vermek paragraf = [];
için (izin vermek ben = 1; ben <= sayım; ben++) {
 paragraf.push (metin[Matematik.zemin(Matematik.random() * metin.uzunluk)].toLowerCase());
}

Ardından, her paragrafın ilk kelimesindeki ilk harfi büyük yapmak için kodu ekleyin:

izin vermek fl=paragraf[0];
paragraf[0] = fl.değiştir (fl[0], fl[0].toUpperCase());

Her paragraf bir noktalama işaretiyle (genellikle nokta) biter, bu nedenle her paragrafın sonuna nokta ekleyen kodu ekleyin.

izin vermek lwPos = paragraf.uzunluk - 1;
izin vermek lKelime = paragraf[lwPos];
paragraf[lwPos] = lWord.replace (lWord, lWord + ".");

Ardından, rastgele oluşturulmuş bir noktalama işaretini rastgele öğeye ekleme işlevini uygulayın. paragraf sıralamak.

paragraf.her biri için((kelime, indeks) => {
eğer (dizin > 0 && dizin % 100) {
izin vermek rasgeleSayı = Matematik.zemin(Matematik.rastgele() * 4);
izin vermek konum = dizin + rasgeleNum;
izin vermek randWord = paragraf[konum];
 paragraf[konum] = RandWord.replace (RandWord, RandWord + createRandomPunctuation());
izin vermek nKelime=paragraf[konum + 1];
eğer (sonKarakter !== ",") {
 paragraf[konum + 1] = nWord.değiştir (nWord[0], nKelime[0].toUpperCase());
 }
 }
})

Bu kod bloğu, rasgele bir noktalama karakteri oluşturur ve bunu, rasgele öğenin sonuna ekler. paragraf sıralamak. Noktalama işaretlerini ekledikten sonra eğer noktalama işaretleri virgül değilse bir sonraki elemanın ilk harfini büyük yapar.

Son olarak, iade paragraf dizi olarak biçimlendirilmiş dizi:

geri dönmek paragraf.katılmak(" ");

lorem ipsum metni, kullanıcının belirttiği paragraf sayısına dayalı bir 'yapıya' sahip olmalıdır. Bu 'yapıyı' tanımlamak için bir dizi kullanabilirsiniz. Örneğin, kullanıcı üç paragraflı bir lorem ipsum metni istiyorsa, 'yapı' dizisi şöyle görünmelidir:

yapı = ["İlk paragraf.", "\n \n", "İkinci paragraf.", "\n \n", "Üçüncü paragraf"]

Yukarıdaki kod bloğunda, her bir "\n \n", her paragraf arasındaki boşluğu temsil eder. Eğer giriş yaparsan yapı.join("") tarayıcı konsolunda aşağıdakileri görmelisiniz:

Bu yapıyı otomatik olarak oluşturan ve çağıran bir işlev oluşturun. Paragraf oluşturmak işlev:

işlevYapı oluşturmak(kelimeSayısı, paragraf = 1) {
izin vermek yapı = [];
için (izin vermek ben = 0; ben < paragraf * 2; ben++) {
eğer (Ben % 20) yapı[i] = paragraf oluştur (wordCount);
başkaeğer (ben < (paragraf * 2) - 1) yapı[i] = "\n \n";
 }
geri dönmek yapı.katılmak("");
}

Kontrollere Olay Dinleyicileri Ekleme

Bir "giriş" olay dinleyicisi ekleyin. wordCountControl giriş öğesi ve geri arama işlevinde, sözcük sayısı giriş değerine Ardından etiketi güncelleyin.

wordCountControl.addEventListener("giriş", (e) => {
 wordCount = e.hedef.değer;
 wordCountLabel.textContent= e.target.value;
})

Ardından, bir "giriş" olay dinleyicisi ekleyin. paragrafSayı Denetimi giriş elemanı ve geri arama işlevinde paragraf sayısı giriş değerine getirin ve etiketi güncelleyin.

paragrafCountControl.addEventListener("giriş", (e) => {
 paragrafSayı= e.hedef.değer;
 paragrafCountLabel.textContent = e.target.value;
})

Bir "tıklama" olay dinleyicisi ekleyin. kopyalamak geri çağıran düğme Metni kopyala() olay tetiklendiğinde.

kopyala.addEventListener("tıklamak", ()=>kopyaMetin());

Son olarak, bir "gönder" olay dinleyicisi ekleyin. biçim HTML öğesini seçin ve güncellemeUI geri arama işlevinde işlev.

belge.querySelector("biçim").addEventListener('göndermek', (e) => {
 e.preventDefault();
 updateUI();
})

Kullanıcı Arayüzünü Tamamlama ve Güncelleme

Bir işlev oluştur getControlValues bu geri döner sözcük sayısı Ve paragraf sayısı bir nesne olarak.

işlevgetControlValues() {
geri dönmek { kelimeSayı, paragrafSayı };
}

Sonra oluştur güncellemeUI() Kullanıcı için ekranda oluşturulan metni oluşturan işlev:

işlevgüncellemeUI() {
izin vermek çıktı = buildStructure (getControlValues().wordCount, getControlValues().paragraphCount)
belge.querySelector(".çıktı").innerText = çıktı;
}

Neredeyse bitti. Oluştur Metni kopyala() Kullanıcı "Panoya Kopyala" düğmesini her tıkladığında metni panoya yazan işlev.

zaman uyumsuzişlevMetni kopyala() {
izin vermek metin = belge.querySelector(".çıktı").içMetin;
denemek {
beklemek gezgin.clipboard.writeText (metin);
 uyarı('Panoya kopyalandı');
 } yakalamak (hata) {
 uyarı('Kopyalama başarısız oldu:', hata);
 }
 }

O zaman ara güncellemeUI() işlev:

updateUI();

Tebrikler! JavaScript ve Vite ile bir lorem ipsum metin üreteci oluşturdunuz.

JavaScript Geliştirmenizi Vite ile Güçlendirin

Vite, ön uç çerçevenizi kurmayı kolaylaştıran popüler bir ön uç aracıdır. React, Svelte, SolidJS ve hatta basit JavaScript gibi çeşitli çerçeveleri destekler. Birçok JavaScript geliştiricisi, kurulumu çok kolay ve çok hızlı olduğu için Vite kullanıyor.