Примени своје Вите вештине у пракси са овим творцем лажних текстова заснованим на ГУИ.

Лорем ипсум је текст који програмери и дизајнери широм света користе као чувар места. Ако комуницирате са много прототипова корисничког интерфејса, вероватно сте већ наишли на то.

Научите како да направите флексибилан Лорем ипсум генератор са Вите-ом и ЈаваСцрипт-ом и побољшаћете своје развојне вештине са корисним резултатом.

Зашто се Лорем Ипсум тако широко користи?

Можда се питате зашто толико програмера и дизајнера бира лорем ипсум када могу само да копирају страницу из књиге јавног домена или сличног. Главни разлог је тај што омогућава кориснику или гледаоцу да стекне осећај визуелне форме документа или прототипа, без претераног фокусирања на сам текст чувара места.

Замислите да дизајнирате новине. Уместо да пролазите кроз проблеме копирања текста из различитих извора да бисте дизајнирали као што је могуће реалније, можете једноставно копирати стандардни лорем ипсум текст чувара места и користити га уместо тога.

instagram viewer

Лорем ипсум је толико познат да не морате чак ни да прецизирате да је то текст чувара места — практично свако ко наиђе на њега, одмах ће препознати да је текст пунилац.

Подешавање сервера за пројекат и развој

Код који се користи у овом пројекту доступан је у а ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом. Копирајте садржај стиле.цсс анд тхе лорем.јс датотеке и налепите их у сопствене локалне копије ових датотека.

Ако желите да погледате живу верзију овог пројекта, можете погледати ово демо.

Ви ћете користити Вите алат за прављење да постави ствари. Уверите се да имате Ноде.јс и Ноде Пацкаге Манагер (НПМ) или Иарн инсталиран на вашој машини, а затим отворите свој терминал и покрените:

нпм цреате вите

Или:

предиво створити вите

Ово би требало да буде скела за празан Вите пројекат. Унесите назив пројекта, поставите оквир на "Ванилла", а варијанту на "Ванилла". Након што то урадите, идите до директоријума пројекта помоћу цд команду, а затим покрените:

нпм и

Или:

пређе

Након што инсталирате све зависности, отворите пројекат у уређивачу текста по избору, а затим модификујте структуру пројекта да изгледа овако:

Сада, очистите садржај индек.хтмл датотеку и замените је следећим:

хтмл>
<хтмлланг="ен">
<глава>
<метацхарсет="УТФ-8" />
<линкрел="икона"тип="имаге/свг+кмл"хреф="/вите.свг" />
<метаиме="виевпорт"садржаја="видтх=девице-видтх, инитиал-сцале=1.0" />
<наслов>Лорем Ипсум Генераторнаслов>
глава>
<тело>
<х1>Лорем Ипсум Генераторх1>
<дивид="апликација">
<дивкласа="контроле">
<форму>
<дивкласа="контрола">
<етикетаза="в-цоунт">Речи по пасусуетикета>
<див>
<улазнитип="домет"ид="в-цоунт"мин="10"мак="100"вредност="25"Корак="10">
<спанид="в-цоунт-лабел">25спан>
див>
див>
<дивкласа="контрола">
<етикетаза="п-цоунт">Број параграфаетикета>
<див>
<улазнитип="домет"ид="п-цоунт"мин="1"мак="20"Корак="1"вредност="3">
<спанид="п-цоунт-лабел">3спан>
див>
див>
<дугметип="прихвати">Генеришидугме>
форму>
<дугмекласа="копија">Копирај у међуспремникдугме>
<дивкласа="инфо">
 Користите клизаче да подесите параметре, а затим притисните дугме „Генерирај“.

 Текст можете копирати притиском на дугме „Копирај у међуспремник“.
див>
див>
<дивкласа="излаз">див>
див>
<скриптатип="модул"срц="/маин.јс">скрипта>
тело>
хтмл>

Ова ознака једноставно дефинише кориснички интерфејс. Лева страна екрана приказује контроле, док десна страна приказује излаз. Затим отворите маин.јс датотеку, обришите њен садржај и додајте једну линију за увоз стиле.цсс:

увоз'./стиле.цсс'

Увоз Лорем датотеке и дефинисање глобалних променљивих

Отворите ГитХуб спремиште овог пројекта, копирајте садржај лорем.јс датотеку и налепите их у своју локалну копију лорем.јс. лорем.јс једноставно извози веома дугачак низ Лорем Ипсум текста који друге ЈаваСцрипт датотеке могу да користе.

У маин.јс датотеку, увезите лорем низ из лорем.јс датотеку и дефиниши потребне променљиве:

увоз { лорем } из'./лорем';
дозволити текст = лорем.реплаце(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").разделити(' ');
дозволити ластЦхар;
дозволити вордЦоунтЦонтрол = документ.куериСелецтор("#в-цоунт");
дозволити параграфЦоунтЦонтрол = документ.куериСелецтор(„#п-цоунт“);
дозволити вордЦоунтЛабел = документ.куериСелецтор(„#в-цоунт-лабел“);
дозволити параграфЦоунтЛабел = документ.куериСелецтор(„#п-цоунт-лабел“);
дозволити вордЦоунт = вордЦоунтЦонтрол.валуе;
дозволити параграфЦоунт = параграфЦоунтЦонтрол.валуе;
дозволити цопи = документ.куериСелецтор(".цопи");

Овај код користи регуларни израз да бисте уклонили било какву интерпункцију у лорем текст. Тхе текст променљива повезује ову модификовану верзију лорем текст. Ово би требало да олакша генерисање речи и пасуса.

Креирање функција генератора

Да би било која насумично генерисана реченица или пасус изгледао „стварно“, мора да постоји интерпункција. Након дефинисања глобалних променљивих, креирајте функцију под називом ГенерирајРандомПунцтуатион() и у тој функцији креирати низ тзв ликова и населити га.

функцијагенератеРандомПунцтуатион() {
дозволити знакови = [",", "!", ".", "?"];
дозволити карактер = знакови[Матх.под(Матх.рандом() * цхарацтерс.ленгтх)];
 ластЦхар = карактер;
повратак карактер;
}

Блок кода изнад дефинише низ, ликова, који садржи различите знакове интерпункције. Дефинише другу променљиву, карактера, који поставља на случајни елемент из ликова низ. Глобална варијабла, ластЦхар, чува исту вредност коју функција затим враћа.

Затим креирајте а Генерирај Параграф() функција са а цоунт параметар који има подразумевану вредност 100.

функцијагенератеПараграпх(цоунт = 100) {
}

У овој функцији, прогласите а став низ и дохвати насумичне речи из глобалног текст низ, а затим га гурните у став.

дозволити параграф = [];
за (дозволити и = 1; и <= цоунт; и++) {
 параграф.пусх (текст[Матх.под(Матх.рандом() * тект.ленгтх)].тоЛоверЦасе());
}

Затим додајте код да прво слово у првој речи сваког пасуса буде велико:

дозволити фл=параграф[0];
параграф[0] = фл.замени (фл[0], фл[0].тоУпперЦасе());

Сваки пасус се завршава знаком интерпункције (обично тачком), па додајте код који додаје тачку на крај сваког пасуса.

дозволити лвПос = параграф.ленгтх - 1;
дозволити лВорд = параграф[лвПос];
параграф[лвПос] = лВорд.реплаце (лВорд, лВорд + ".");

Затим примените функционалност за додавање насумично генерисане интерпункције на случајни елемент у став низ.

параграф.форЕацх((реч, индекс) => {
ако (индекс > 0 && индекс % 100) {
дозволити рандомНум = Матх.под(Матх.рандом() * 4);
дозволити пос = индек + рандомНум;
дозволити рандВорд = параграф[пос];
 параграф[пос] = рандВорд.реплаце (рандВорд, рандВорд + генератеРандомПунцтуатион());
дозволити нВорд=параграф[поз + 1];
ако (последњи знак !== ",") {
 параграф [поз + 1] = нВорд.реплаце (нВорд[0], нВорд[0].тоУпперЦасе());
 }
 }
})

Овај блок кода генерише насумични знак интерпункције и додаје га на крај случајног елемента из став низ. Након додавања интерпункције, прво слово следећег елемента се пише великим словом ако интерпункција није зарез.

На крају, вратите став низ форматиран као стринг:

повратак параграф.јоин(" ");

Текст лорем ипсум треба да има 'структуру' засновану на броју пасуса које корисник наведе. Можете користити низ да дефинишете ову 'структуру'. На пример, ако корисник жели лорем ипсум текст са три пасуса, низ 'струцтуре' би требало да изгледа овако:

структура = ["Први параграф.", "\н \н", "Други пасус.", "\н \н", "Трећи пасус"]

У блоку кода изнад, сваки „\н \н“ представља размак између сваког пасуса. Ако се пријавите структура.јоин("") у конзоли претраживача, требало би да видите следеће:

Креирајте функцију која аутоматски генерише ову структуру и позива генератеПараграпх функција:

функцијагенератеСтруцтуре(вордЦоунт, параграф = 1) {
дозволити структура = [];
за (дозволити и = 0; и < пасус * 2; и++) {
ако (и % 20) структура[и] = генерис Параграпх (вордЦоунт);
другоако (и < (параграф * 2) - 1) структура[и] = "\н \н";
 }
повратак структура.јоин("");
}

Додавање слушалаца догађаја контролама

Додајте "улазни" слушалац догађаја у вордЦоунтЦонтрол улазни елемент и у функцији повратног позива, подесите вордЦоунт на улазну вредност. Затим ажурирајте етикету.

вордЦоунтЦонтрол.аддЕвентЛистенер("улазни", (е) => {
 вордЦоунт = е.таргет.валуе;
 вордЦоунтЛабел.тектЦонтент= е.таргет.валуе;
})

Затим додајте слушалац догађаја „улаз“ у параграфЦоунтЦонтрол улазни елемент и у функцији повратног позива подесити параграфЦоунт на улазну вредност и ажурирајте ознаку.

параграфЦоунтЦонтрол.аддЕвентЛистенер("улазни", (е) => {
 параграфЦоунт= е.таргет.валуе;
 параграфЦоунтЛабел.тектЦонтент = е.таргет.валуе;
})

Додајте слушалац догађаја „клик“ у копија дугме које позива назад на цопиТект() када се догађај покрене.

цопи.аддЕвентЛистенер("кликни", ()=>цопиТект());

На крају, додајте слушаоца догађаја „субмит“. форму ХТМЛ елемент и позовите упдатеУИ функцију у функцији повратног позива.

документ.куериСелецтор("форма").аддЕвентЛистенер('прихвати', (е) => {
 е.превентДефаулт();
 упдатеУИ();
})

Завршавање и ажурирање корисничког интерфејса

Креирајте функцију гетЦонтролВалуес који се враћа вордЦоунт и параграфЦоунт као објекат.

функцијагетЦонтролВалуес() {
повратак { вордЦоунт, параграфЦоунт};
}

Затим креирајте упдатеУИ() функција која кориснику приказује генерисани текст на екрану:

функцијаупдатеУИ() {
дозволити оутпут = генератеСтруцтуре (гетЦонтролВалуес().вордЦоунт, гетЦонтролВалуес().параграпхЦоунт)
документ.куериСелецтор(".излаз").иннерТект = излаз;
}

Скоро готов. Цреате тхе цопиТект() функција која уписује текст у међуспремник кад год корисник кликне на дугме „Копирај у међуспремник“.

асинцфункцијацопиТект() {
дозволити текст = документ.куериСелецтор(".излаз").иннерТект;
покушати {
чекати навигатор.цлипбоард.вритеТект (текст);
 упозорење ('Копирано у међуспремник');
 } улов (ерр) {
 упозорење ('Копирање није успело:', ерр);
 }
 }

Затим позовите упдатеУИ() функција:

упдатеУИ();

Честитам! Направили сте лорем ипсум генератор текста са ЈаваСцрипт-ом и Вите-ом.

Напуните свој ЈаваСцрипт развој помоћу Вите-а

Вите је популаран фронтенд алат који олакшава постављање вашег фронтенд оквира. Подржава различите оквире као што су Реацт, Свелте, СолидЈС, па чак и обичан ванилла ЈаваСцрипт. Многи ЈаваСцрипт програмери користе Вите јер је врло једноставан за подешавање и веома брз.