Овај пројекат ће вам помоћи да усавршите своје фронт-енд вештине и научите вас како да направите интерфејс користећи основне веб стандарде.
Пројекти су одличан начин да побољшате своје ХТМЛ, ЦСС и ЈаваСцрипт вештине и да ојачате важне концепте и технике.
Један пројекат са којим можете започети је књига рецепата, коју можете покренути у претраживачу као што је Гоогле Цхроме или Фирефок.
У књизи рецепата, лева страна веб странице укључује одељак у који корисник може да додаје нове рецепте. На десној страни странице, корисник може прегледати и претраживати постојеће рецепте.
Како замолити корисника да дода нови рецепт
Додајте почетни садржај у ХТМЛ, ЦСС и ЈаваСцрипт датотеке. Ако нисте упознати са концептима веб развоја, постоји много места где можете научите веб развој на мрежи.
Такође можете погледати цео пример књиге рецепата у овом ГитХуб репо.
- Додајте основну ХТМЛ структуру у нову ХТМЛ датотеку под називом индек.хтмл:
хтмл>
<хтмл>
<глава>
<наслов>Реципе Аппнаслов>
глава>
<тело>
<нав>
<х1>Реципе Аппх1>
нав>
<дивкласа="контејнер">
Садржај овде
див>
тело>
хтмл> - Унутар класе контејнера, одвојите страницу на леву колону и десну колону:
<дивкласа="лева колона">див>
<дивкласа="десна колона">див> - Унутар леве колоне додајте образац за корисника да дода нови рецепт. Корисник може да унесе назив рецепта, листу састојака и метод:
<х3>Додај рецептх3><форму>
<етикетаза="име-рецепта">име:етикета>
<улазнитип="текст"ид="име-рецепта"потребан>
<бр /><етикетаза="састојци за рецепт">Састојци:етикета>
<тектареаид="састојци за рецепт"редова="5"потребан>тектареа>
<бр /><етикетаза="рецепт-метод">Метод:етикета>
<тектареаид="рецепт-метод"редова="5"потребан>тектареа>
<бр /><дугметип="прихвати">Додај рецептдугме>
форму> - У ознаку хеад ХТМЛ датотеке додајте везу до нове ЦСС датотеке под називом стилес.цсс. Направите датотеку у истој фасцикли као и ваша ХТМЛ датотека:
<линкрел="стилесхеет"хреф="стилес.цсс"> - Унутар ЦСС датотеке додајте неки стил за целокупну страницу:
тело {
породица фонтова: Санс Сериф;
}нав {
боја позадине: #333;
положај: фиксно;
топ: 0;
ширина: 100%;
паддинг: 20пк;
лево: 0;
боја: бео;
Поравнање текста: центар;
}.контејнер {
приказ: флек;
флек-дирецтион: ред;
оправдати-садржај: простор-између;
маргина: 150пк 5%;
}.лева колона {
ширина: 25%;
}.десна колона {
ширина: 65%;
} - Додајте мало стила за Додајте рецепте образац:
форму {
приказ: флек;
флек-дирецтион: колона;
}етикета {
маргина-дно: 10пк;
}улазни[типе="текст"], тектареа {
паддинг: 10пк;
маргина-дно: 10пк;
граница-радијус: 5пк;
граница: 1пкчврст#ццц;
ширина: 100%;
бок-сизинг: гранична кутија;
}дугме[типе="прихвати"] {
паддинг: 10пк;
боја позадине: #3338;
боја: #ффф;
граница: ниједан;
граница-радијус: 5пк;
курсор: показивач;
} - На дну ознаке тела у вашој ХТМЛ датотеци додајте везу до ЈаваСцрипт датотеке под називом сцрипт.јс. Направите датотеку у истој фасцикли:
<тело>
Садржај
<скриптасрц="сцрипт.јс">скрипта>
тело> - Унутар сцрипт.јс користите метод куериСелецтор да прећи ДОМ и преузмите елемент форме са странице.
конст форм = документ.куериСелецтор('форма'); - Креирајте нови низ за чување рецепата које корисник унесе у образац:
дозволити рецепти = []; - У новој функцији, добијте поља за назив, састојке и метод унесена преко обрасца. Такође можете имплементирати валидација обрасца на страни клијента да спречите неважеће уносе или да проверите да ли рецепт већ постоји.
функцијахандлеСубмит(догађај) {
// Спречавање подразумеваног понашања при слању обрасца
евент.превентДефаулт();
// Добија назив рецепта, састојке и улазне вредности методе
конст намеИнпут = документ.куериСелецтор('#реципе-наме');
конст ингрИнпут = документ.куериСелецтор('#рецепт-састојци');
конст метходИнпут = документ.куериСелецтор('#рецепт-метод');
конст наме = намеИнпут.валуе.трим();
конст састојци = ингрИнпут.валуе.трим().сплит(',').Мапа(и => и.трим());
конст метход = метходИнпут.валуе.трим();
} - Ако су улази исправни, додајте их у низ рецепата:
ако (име && састојци.дужина > 0 && метод) {
конст невРеципе = { име, састојци, метод };
реципес.пусх (невРеципе);
} - Обришите уносе на обрасцу:
намеИнпут.валуе = '';
ингрИнпут.валуе = '';
метходИнпут.валуе = ''; - Након функције хандлеСубмит(), додајте слушалац догађаја да позовете функцију када корисник пошаље образац:
форм.аддЕвентЛистенер('прихвати', хандлеСубмит); - Отворите индек.хтмл у прегледачу и погледајте образац са леве стране:
Како приказати додате рецепте
Можете приказати рецепте сачуване у низу рецепата на десној страни странице.
- У ХТМЛ датотеци додајте див да бисте приказали листу рецепата унутар десне колоне. Додајте још један див да бисте приказали поруку ако нема рецепата:
<дивкласа="десна колона">
<дивид="листа рецепата">див>
<дивид="без рецепата">Немате рецепте.див>
див> - Додајте неки ЦСС стил за листу рецепата:
#реципе-лист {
приказ: грид;
грид-темплате-колумнс: понављање(ауто-фит, минмак(300пк, 1фр));
грид-гап: 20пк;
}#без рецепата {
приказ: флек;
боја позадине: #ФФЦЦЦЦ;
паддинг: 20пк;
граница-радијус: 8пк;
маргин-топ: 44пк;
} - На врху ЈаваСцрипт датотеке преузмите ХТМЛ елементе који се користе за приказ листе рецепата и поруке о грешци:
конст реципеЛист = документ.куериСелецтор('#реципе-лист');
конст ноРеципес = документ.гетЕлементБиИд('без рецепата'); - Унутар нове функције, прођите кроз сваки рецепт у низу рецепата. За сваки рецепт направите нови див да бисте приказали тај рецепт:
функцијадисплаиРеципес() {
реципеЛист.иннерХТМЛ = '';
реципес.форЕацх((рецепт, индекс) => {
конст реципеДив = документ.цреатеЕлемент('див');
});
} - Додајте нешто садржаја у појединачни див рецепта да бисте приказали име, састојке и метод. Див ће такође садржати дугме за брисање. Ову функцију ћете додати у каснијим корацима:
реципеДив.иннерХТМЛ = `${реципе.наме}</h3>
<јака>Састојци:јака></p>
- ${ингр} `).придружити('')}
${реципе.ингредиентс.мап(ингр =>`
</ul><јака>Метод:јака></p>
${реципе.метход}</p>
- Додајте класу за стил див:
реципеДив.цлассЛист.адд('рецепт'); - Додајте нови див ХТМЛ елементу реципеЛист:
реципеЛист.аппендЦхилд (реципеДив); - Додајте стил за класу у ЦСС датотеку:
.рецепт {
граница: 1пкчврст#ццц;
паддинг: 10пк;
граница-радијус: 5пк;
кутија-сенка: 0 2пк 4пкргба(0,0,0,.2);
}.рецептх3 {
маргин-топ: 0;
маргина-дно: 10пк;
}.рецептул {
маргина: 0;
паддинг: 0;
у стилу листе: ниједан;
}.рецептулли {
маргина-дно: 5пк;
} - Проверите да ли постоји више од једног рецепта. Ако јесте, сакријте поруку о грешци:
ноРеципес.стиле.дисплаи = реципес.ленгтх > 0? 'ноне': 'флек';
- Позовите нову функцију унутар функције хандлеСубмит(), након што додате нови рецепт у низ рецепата:
дисплаиРеципес(); - Отворите индек.хтмл у прегледачу:
- Додајте рецепте на листу и гледајте како се појављују на десној страни:
Како избрисати рецепте
Можете избрисати рецепте кликом на Избриши дугме испод упутстава за рецепт.
- Додајте неки ЦСС стил за дугме за брисање:
.дугме за брисање {
боја позадине: #дц3545;
боја: #ффф;
граница: ниједан;
граница-радијус: 5пк;
паддинг: 5пк 10пк;
курсор: показивач;
}.дугме за брисање:лебдети {
боја позадине: #ц82333;
} - У ЈаваСцрипт датотеци додајте нову функцију за брисање рецепта:
функцијахандлеДелете(догађај) {} - Помоћу ЈаваСцрипт догађаја пронађите индекс рецепта на који је корисник кликнуо:
ако (евент.таргет.цлассЛист.цонтаинс('дугме за брисање')) {
конст индекс = евент.таргет.датасет.индек;
} - Користите индекс да избришете изабрани рецепт из низа рецепата:
реципес.сплице (индекс, 1); - Освежите листу рецепата приказаних на страници:
дисплаиРеципес(); - Додајте слушалац догађаја да позове функцију хандлеДелете() када корисник кликне на дугме за брисање:
реципеЛист.аддЕвентЛистенер('кликни', хандлеДелете); - Отворите индек.хтмл у претраживачу. Додајте рецепт да бисте видели дугме за брисање:
Како тражити рецепте
Можете да тражите рецепте користећи траку за претрагу да бисте проверили да ли одређени рецепт постоји.
- Унутар десне колоне додајте траку за претрагу испред листе рецепата:
<дивид="секција за претрагу">
<х3>Листа рецепатах3>
<етикетаза="оквир за претрагу">Претрага:етикета>
<улазнитип="текст"ид="оквир за претрагу">
див> - Додајте ЦСС стил за ознаку траке за претрагу:
етикета[за="оквир за претрагу"] {
приказ: блокирати;
маргина-дно: 10пк;
} - У сцрипт.јс, преузмите ХТМЛ елемент оквира за претрагу:
конст сеарцхБок = документ.гетЕлементБиИд('оквир за претрагу'); - Унутар нове функције креирајте нови низ који садржи рецепте чије име одговара уносу за претрагу:
функцијаПретрага(упит) {
конст филтередРеципес = реципес.филтер(рецепт => {
повратак реципе.наме.тоЛоверЦасе().инцлудес (куери.тоЛоверЦасе());
});
} - Обришите листу рецепата који се тренутно приказују на екрану:
реципеЛист.иннерХТМЛ = ''; - Прођите кроз сваки филтрирани рецепт који одговара резултату претраге и креирајте нови елемент див:
филтередРеципес.форЕацх(рецепт => {
конст реципеЕл = документ.цреатеЕлемент('див');
}); - Додајте ХТМЛ садржај за филтрирани рецепт у див:
реципеЕл.иннерХТМЛ = `${реципе.наме}</h3>
<јака>Састојци:јака></p>
- ${ингр} `).придружити('')}
${реципе.ингредиентс.мап(ингр =>`
</ul><јака>Метод:јака></p>
${реципе.метход}</p>
- Додајте исту класу рецепата за конзистентан стил. Додајте нови див на листу приказану на страници:
реципеЕл.цлассЛист.адд('рецепт');
реципеЛист.аппендЦхилд (реципеЕл); - Додајте слушалац догађаја да позове функцију сеарцх() када корисник унесе у траку за претрагу:
сеарцхБок.аддЕвентЛистенер('улазни', догађај => претрага (евент.таргет.валуе)); - Унутар функције хандлеДелете() обришите поље за претрагу ако корисник избрише ставку да бисте освежили листу:
сеарцхБок.валуе = ''; - Отворите индек.хтмл у веб прегледачу да видите нову траку за претрагу и додате неке рецепте:
- Додајте назив рецепта у траку за претрагу да бисте филтрирали листу рецепата:
Прављење пројеката помоћу ХТМЛ-а, ЦСС-а и ЈаваСцрипт-а
Овај пројекат показује како да се направи фронт-енд интерфејс за једноставну књигу рецепата. Имајте на уму да не постоји позадински сервер и да апликација не задржава податке; ако освежите страницу, изгубићете промене. Једно могуће проширење на којем бисте могли да радите је механизам за чување и учитавање података користећи лоцалСтораге.
Да бисте побољшали своје вештине веб развоја, наставите да истражујете друге забавне пројекте које можете да креирате на сопственом рачунару.
