Praktikkan keterampilan Vite Anda dengan pembuat teks dummy berbasis GUI ini.

Lorem ipsum adalah teks yang digunakan pengembang dan desainer di seluruh dunia sebagai pengganti. Jika Anda berinteraksi dengan banyak prototipe UI, Anda mungkin pernah menemukannya sebelumnya.

Pelajari cara membuat generator Lorem ipsum yang fleksibel dengan Vite dan JavaScript dan Anda akan meningkatkan keterampilan pengembangan Anda dengan hasil yang bermanfaat.

Mengapa Lorem Ipsum Begitu Banyak Digunakan?

Anda mungkin bertanya-tanya mengapa begitu banyak pengembang dan desainer memilih lorem ipsum padahal mereka hanya bisa menyalin halaman dari buku domain publik atau sejenisnya. Alasan utamanya adalah memungkinkan pengguna atau pemirsa merasakan bentuk visual dokumen atau prototipe, tanpa mengarahkan terlalu banyak fokus ke teks placeholder itu sendiri.

Bayangkan Anda sedang mendesain koran. Alih-alih bersusah payah menyalin teks dari berbagai sumber untuk membuat desain seperti itu serealistis mungkin, Anda cukup menyalin teks placeholder lorem ipsum standar dan menggunakannya alih-alih.

instagram viewer

Lorem ipsum sangat dikenal luas sehingga Anda bahkan tidak perlu menentukan bahwa itu adalah teks placeholder—hampir setiap orang yang menemukannya, akan segera mengenali bahwa teks tersebut adalah pengisi.

Menyiapkan Proyek dan Server Pengembangan

Kode yang digunakan dalam proyek ini tersedia di a repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT. Salin isi dari style.css dan lorem.js file dan rekatkan ke salinan lokal Anda sendiri dari file-file ini.

Jika Anda ingin melihat versi langsung dari proyek ini, Anda dapat melihatnya demo.

Anda akan menggunakan Alat pembuatan Vite untuk mengatur hal-hal. Pastikan Anda memiliki Node.js dan Manajer Paket Node (NPM) atau Yarn terinstal di mesin Anda, lalu buka terminal Anda dan jalankan:

npm buat vite

Atau:

benang buat vite

Ini harus merancah proyek Vite yang kosong. Masukkan nama proyek, atur kerangka kerja ke "Vanilla" dan, variannya ke "Vanilla". Setelah melakukan itu, arahkan ke direktori proyek dengan CD perintah, lalu jalankan:

npm saya

Atau:

benang

Setelah menginstal semua dependensi, buka proyek di editor teks pilihan Anda, lalu ubah struktur proyek agar terlihat seperti ini:

Sekarang, bersihkan isi dari index.html file dan ganti dengan yang berikut:

html>
<htmllang="en">
<kepala>
<metacharset="UTF-8" />
<tautanrel="ikon"jenis="gambar/svg+xml"href="/vite.svg" />
<metanama="area pandang"isi="width=device-width, initial-scale=1.0" />
<judul>Pembuat Lorem Ipsumjudul>
kepala>
<tubuh>
<h1>Pembuat Lorem Ipsumh1>
<divpengenal="aplikasi">
<divkelas="kontrol">
<membentuk>
<divkelas="kontrol">
<labeluntuk="w-menghitung">Kata per paragraflabel>
<div>
<memasukkanjenis="jangkauan"pengenal="w-menghitung"min="10"maks="100"nilai="25"melangkah="10">
<menjangkaupengenal="w-count-label">25menjangkau>
div>
div>
<divkelas="kontrol">
<labeluntuk="p-hitungan">Jumlah paragraflabel>
<div>
<memasukkanjenis="jangkauan"pengenal="p-hitungan"min="1"maks="20"melangkah="1"nilai="3">
<menjangkaupengenal="p-hitung-label">3menjangkau>
div>
div>
<tomboljenis="kirim">Menghasilkantombol>
membentuk>
<tombolkelas="menyalin">Menyalin ke clipboardtombol>
<divkelas="informasi">
 Gunakan penggeser untuk mengatur parameter, lalu tekan tombol "Hasilkan".

 Anda dapat menyalin teks dengan menekan tombol "Salin ke Clipboard".
div>
div>
<divkelas="keluaran">div>
div>
<naskahjenis="modul"src="/main.js">naskah>
tubuh>
html>

Markup ini hanya mendefinisikan antarmuka pengguna. Sisi kiri layar menampilkan kontrol, sedangkan sisi kanan menampilkan output. Selanjutnya, buka main.js file, hapus isinya, dan tambahkan satu baris untuk diimpor style.css:

impor'./style.css'

Mengimpor File Lorem dan Menentukan Variabel Global

Buka repositori GitHub proyek ini, salin konten file lorem.js file, dan rekatkan ke salinan lokal Anda lorem.js. lorem.js cukup ekspor string teks Lorem Ipsum yang sangat panjang yang dapat digunakan oleh file JavaScript lainnya.

Dalam main.js file, impor lorem string dari lorem.js file dan tentukan variabel yang diperlukan:

impor { lorem } dari'./lorem';
membiarkan teks = lorem.ganti(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").membelah(' ');
membiarkan lastChar;
membiarkan KontrolHitungkata = dokumen.querySelector("#w-hitung");
membiarkan paragrafCountControl = dokumen.querySelector("#p-hitungan");
membiarkan kataHitungLabel = dokumen.querySelector("#w-count-label");
membiarkan paragrafHitungLabel = dokumen.querySelector("#p-hitung-label");
membiarkan JumlahKata = JumlahKataKontrol.Nilai;
membiarkan ParagraphCount = ParagraphCountControl.value;
membiarkan salinan = dokumen.querySelector(".menyalin");

Kode ini menggunakan ekspresi reguler untuk menghapus tanda baca di lorem teks. Itu teks variabel mengikat versi modifikasi dari lorem teks. Ini akan membuatnya lebih mudah untuk menghasilkan kata dan paragraf.

Membuat Fungsi Generator

Agar kalimat atau paragraf yang dihasilkan secara acak tampak "nyata", perlu ada tanda baca. Setelah mendefinisikan variabel global, buat fungsi yang disebut generateRandomPunctuation() dan dalam fungsi itu buat sebuah array bernama karakter dan mengisinya.

fungsigenerateRandomPunctuation() {
membiarkan karakter = [",", "!", ".", "?"];
membiarkan karakter = karakter[Matematika.lantai(Matematika.random() * karakter.panjang)];
 lastChar = karakter;
kembali karakter;
}

Blok kode di atas mendefinisikan sebuah array, karakter, yang berisi tanda baca berbeda. Ini mendefinisikan variabel lain, karakter, yang disetel ke elemen acak dari karakter Himpunan. Variabel global, lastChar, menyimpan nilai yang sama yang kemudian dikembalikan oleh fungsi.

Selanjutnya, buat a generateParagraph() berfungsi dengan a menghitung parameter yang memiliki nilai default 100.

fungsigenerateParagraph(menghitung = 100) {
}

Dalam fungsi ini, nyatakan a gugus kalimat array dan ambil kata-kata acak dari global teks array, lalu dorong ke dalam gugus kalimat.

membiarkan paragraf = [];
untuk (membiarkan saya = 1; saya <= hitung; saya++) {
 paragraf.push (teks[Matematika.lantai(Matematika.random() * teks.panjang)].toLowerCase());
}

Selanjutnya, tambahkan kode untuk mengkapitalisasi huruf pertama di kata pertama setiap paragraf:

membiarkan fl=paragraf[0];
gugus kalimat[0] = fl.ganti (fl[0], fl[0].toUpperCase());

Setiap paragraf diakhiri dengan tanda baca (biasanya titik), jadi tambahkan kode yang menambahkan titik di akhir setiap paragraf.

membiarkan lwPos = panjang paragraf - 1;
membiarkan lKata = paragraf[lwPos];
paragraf[lwPos] = lWord.ganti (lWord, lWord + ".");

Selanjutnya, terapkan fungsi untuk menambahkan tanda baca yang dibuat secara acak ke elemen acak di gugus kalimat Himpunan.

paragraf.untukSetiap((kata, indeks) => {
jika (indeks > 0 && indeks % 100) {
membiarkan AngkaAcak = Matematika.lantai(Matematika.acak() * 4);
membiarkan pos = indeks + AngkaAcak;
membiarkan randWord = paragraf[pos];
 paragraf[pos] = randWord.replace (randWord, randWord + generateRandomPunctuation());
membiarkan nWord=paragraf[pos + 1];
jika (lastChar !== ",") {
 paragraf[pos + 1] = nWord.ganti (nWord[0], kata[0].toUpperCase());
 }
 }
})

Blok kode ini menghasilkan karakter tanda baca acak dan menambahkannya ke akhir elemen acak dari gugus kalimat Himpunan. Setelah menambahkan tanda baca, huruf pertama dari elemen berikutnya menjadi huruf besar jika tanda baca tersebut bukan koma.

Terakhir, kembalikan gugus kalimat array diformat sebagai string:

kembali paragraf.gabung(" ");

Teks lorem ipsum harus memiliki 'struktur' berdasarkan jumlah paragraf yang ditentukan pengguna. Anda dapat menggunakan larik untuk mendefinisikan 'struktur' ini. Misalnya, jika pengguna menginginkan teks lorem ipsum dengan tiga paragraf, susunan 'struktur' akan terlihat seperti ini:

struktur = ["Paragraf pertama.", "\ n \ n", "Paragraf kedua.", "\ n \ n", "Paragraf ketiga"]

Pada blok kode di atas, setiap "\n\n" mewakili jarak antara setiap paragraf. Jika Anda login struktur.bergabung("") di konsol browser, Anda akan melihat yang berikut:

Buat fungsi yang secara otomatis menghasilkan struktur ini dan memanggil generateParagraph fungsi:

fungsigenerateStructure(jumlah kata, paragraf = 1) {
membiarkan struktur = [];
untuk (membiarkan saya = 0; i < paragraf * 2; saya++) {
jika (Saya % 20) struktur[i] = generateParagraph (Jumlahkata);
kalau tidakjika (i < (paragraf * 2) - 1) struktur[i] = "\ n \ n";
 }
kembali struktur.gabung("");
}

Menambahkan Pendengar Acara ke Kontrol

Tambahkan pendengar acara "input" ke WordCountControl elemen input dan dalam fungsi callback, atur jumlah kata ke nilai masukan. Kemudian perbarui labelnya.

wordCountControl.addEventListener("memasukkan", (e) => {
 jumlahkata = e.target.nilai;
 wordCountLabel.textContent= e.target.nilai;
})

Selanjutnya, tambahkan event listener "input" ke file ParagraphCountControl elemen input dan dalam fungsi callback atur jumlah paragraf ke nilai input dan perbarui label.

paragrafCountControl.addEventListener("memasukkan", (e) => {
 jumlahparagraf= e.target.nilai;
 paragraphCountLabel.textContent = e.target.nilai;
})

Tambahkan pendengar acara "klik" ke menyalin tombol yang memanggil kembali ke copyText() ketika peristiwa itu dipicu.

salin.addEventListener("klik", ()=>copyText());

Terakhir, tambahkan pendengar acara "kirim" ke membentuk elemen HTML dan memanggil updateUI fungsi dalam fungsi callback.

dokumen.querySelector("membentuk").addEventListener('kirim', (e) => {
 e.preventDefault();
 updateUI();
})

Menyelesaikan dan Memperbarui UI

Buat fungsi getControlValues yang kembali jumlah kata Dan jumlah paragraf sebagai objek.

fungsigetControlValues() {
kembali { jumlah kata, jumlah paragraf };
}

Kemudian buat updateUI() fungsi yang merender teks yang dihasilkan di layar untuk pengguna:

fungsiupdateUI() {
membiarkan output = generateStructure (getControlValues().wordCount, getControlValues().paragraphCount)
dokumen.querySelector(".keluaran").innerText = keluaran;
}

Hampir selesai. Buat copyText() fungsi yang menulis teks ke papan klip setiap kali pengguna mengeklik tombol "Salin ke Papan Klip".

asinkronfungsicopyText() {
membiarkan teks = dokumen.querySelector(".keluaran").innerText;
mencoba {
menunggu navigator.clipboard.writeText (teks);
 peringatan('Disalin ke papan klip');
 } menangkap (salah) {
 peringatan('Gagal menyalin:', salah);
 }
 }

Lalu panggil updateUI() fungsi:

updateUI();

Selamat! Anda telah membuat pembuat teks lorem ipsum dengan JavaScript dan Vite.

Tingkatkan Pengembangan JavaScript Anda Dengan Vite

Vite adalah alat frontend populer yang memudahkan pengaturan framework frontend Anda. Ini mendukung berbagai kerangka kerja seperti React, Svelte, SolidJS, dan bahkan JavaScript vanilla biasa. Banyak pengembang JavaScript menggunakan Vite karena sangat mudah diatur dan sangat cepat.