Ako vytvoriť knihu receptov pomocou HTML, CSS a JavaScriptu

Tento projekt vám pomôže zdokonaliť vaše front-endové zručnosti a naučí vás, ako vytvoriť rozhranie pomocou základných webových štandardov.

Projekty sú skvelým spôsobom, ako zlepšiť svoje zručnosti v HTML, CSS a JavaScript a posilniť dôležité koncepty a techniky.

Jedným z projektov, s ktorým môžete začať, je kniha receptov, ktorú môžete spustiť v prehliadači, ako je Google Chrome alebo Firefox.

V knihe receptov obsahuje ľavá strana webovej stránky sekciu, do ktorej môže používateľ pridávať nové recepty. V pravej časti stránky si používateľ môže prezerať a vyhľadávať existujúce recepty.

Ako požiadať používateľa o pridanie nového receptu

Pridajte počiatočný obsah do súborov HTML, CSS a JavaScript. Ak nie ste oboznámení s konceptmi vývoja webu, existuje veľa miest, kde môžete naučiť sa vývoj webu online.

Môžete si tiež pozrieť celý príklad knihy receptov Úložisko GitHub.

Pridajte základnú štruktúru HTML do nového súboru HTML s názvom index.html:

html>
<html>
<hlavu>
<titul>Aplikácia receptovtitul>
hlavu>
<telo>
<nav>
<h1>Aplikácia receptovh1>
nav>
<divtrieda="kontajner">
 Obsah tu 
div>
telo>
html>

instagram viewer

V triede kontajnera rozdeľte stránku na ľavý a pravý stĺpec:
```
<divtrieda="ľavý stĺpec">div>
<divtrieda="pravý stĺpec">div>
```

Do ľavého stĺpca pridajte formulár pre používateľa na pridanie nového receptu. Používateľ môže zadať názov receptu, zoznam ingrediencií a metódu:

<h3>Pridať recepth3><formulár>
<štítokpre="názov receptu">Názov:štítok>
<vstuptypu="text"id="názov receptu"požadovaný>
<br />
<štítokpre="prísady do receptu">Ingrediencie:štítok>
<textareaid="prísady do receptu"riadkov="5"požadovaný>textarea>
<br />
<štítokpre="metóda receptu">metóda:štítok>
<textareaid="metóda receptu"riadkov="5"požadovaný>textarea>
<br /><tlačidlotypu="Predložiť">Pridať recepttlačidlo>
formulár>

Do značky head súboru HTML pridajte odkaz na nový súbor CSS s názvom styles.css. Vytvorte súbor v rovnakom priečinku ako súbor HTML:
```
<odkazrel="štýlov"href="styles.css">
```

Do súboru CSS pridajte nejaký štýl pre celú stránku:

telo {
font-family: sans-serif;
}nav {
farba pozadia: #333;
pozíciu: pevné;
top: 0;
šírka: 100%;
vypchávka: 20px;
vľavo: 0;
farba: biely;
zarovnanie textu: stred;
}
.kontajner {
displej: flex;
flex-direction: riadok;
ospravedlniť-obsah: priestor-medzi;
marža: 150px 5%;
}
.ľavý stĺpec {
šírka: 25%;
}.pravý stĺpec {
šírka: 65%;
}

Pridajte nejaký štýl pre Pridať recepty forma:

formulár {
displej: flex;
flex-direction: stĺpec;
}štítok {
okraj-dole: 10px;
}
vstup[typ="text"], textarea {
vypchávka: 10px;
okraj-dole: 10px;
hraničný polomer: 5px;
hranica: 1pxpevný#ccc;
šírka: 100%;
box-size: border-box;
}tlačidlo[typ="Predložiť"] {
vypchávka: 10px;
farba pozadia: #3338;
farba: #fff;
hranica: žiadny;
hraničný polomer: 5px;
kurzor: ukazovateľ;
}

Do spodnej časti značky body v súbore HTML pridajte odkaz na súbor JavaScript s názvom script.js. Vytvorte súbor v rovnakom priečinku:
```
<telo>
 Obsah 
<skriptsrc="script.js">skript>
telo>
```
V script.js použite metódu querySelector prejsť DOM a získajte prvok formulára zo stránky.
```
konšt forma = dokument.querySelector('form');
```
Vytvorte nové pole na ukladanie receptov, ktoré používateľ zadá do formulára:
```
nech recepty = [];
```

V novej funkcii získate názov, prísady a polia metódy zadané cez formulár. Môžete tiež implementovať validácia formulára na strane klienta aby ste zabránili neplatným vstupom alebo aby ste skontrolovali, či recept už existuje.

funkciurukoväťOdoslať(udalosť) {
// Zabránenie predvolenému správaniu pri odosielaní formulárov
 event.preventDefault();

// Získanie názvu receptu, prísad a vstupných hodnôt metódy
konšt nameInput = dokument.querySelector('#recipe-name');
konšt ingInput = dokument.querySelector('#recipe-ingredients');
konšt metódaVstup = dokument.querySelector('#recipe-method');
konšt name = nameInput.value.trim();
konšt ingrediencie = ingrInput.value.trim().split(',').mapa(i => i.trim());
konšt metóda = methodInput.value.trim();
}

Ak sú vstupy platné, pridajte ich do poľa receptov:

ak (názov && ingrediencie.dĺžka > 0 && metóda) {
konšt newRecipe = { názov, ingrediencie, metóda };
 recepty.push (novýRecept);
}

Vymažte vstupy vo formulári:

nameInput.value = '';
ingrInput.value = '';
methodInput.value = '';

Po funkcii handleSubmit() pridajte poslucháč udalosti na zavolanie funkcie, keď používateľ odošle formulár:
```
form.addEventListener('Predložiť', handleSubmit);
```
Otvorte index.html v prehliadači a zobrazte formulár vľavo:

Ako zobraziť pridané recepty

Môžete zobraziť recepty uložené v poli receptov na pravej strane stránky.

Do súboru HTML pridajte div, aby sa v pravom stĺpci zobrazil zoznam receptov. Pridajte ďalší div, aby sa zobrazila správa, ak neexistujú žiadne recepty:
```
<divtrieda="pravý stĺpec">
<divid="zoznam receptov">div>
<divid="bez receptov">Nemáte žiadne recepty.div>
div>
```

Pridajte nejaký štýl CSS pre zoznam receptov:

#zoznam receptov {
displej: mriežka;
mriežka-šablóna-stĺpce: opakovať(automatické prispôsobenie, minmax(300px, 1fr));
grid-gap: 20px;
}#bez receptov {
displej: flex;
farba pozadia: #FFCCCC;
vypchávka: 20px;
hraničný polomer: 8px;
margin-top: 44px;
}

V hornej časti súboru JavaScript použite prvky HTML na zobrazenie zoznamu receptov a chybového hlásenia:

konšt Zoznam receptov = dokument.querySelector('#recipe-list');
konšt noRecepty = dokument.getElementById(„bez receptov“);

V rámci novej funkcie prechádzajte každým receptom v poli receptov. Pre každý recept vytvorte nový div na zobrazenie tohto receptu:

funkciuzobraziťRecepty() {
 recipeList.innerHTML = '';
 recepty.pre kazdeho((recept, index) => {
konšt receptDiv = dokument.createElement('div');
 });
}

Pridajte nejaký obsah do samostatného oddielu receptov, aby sa zobrazil názov, prísady a metóda. Div bude tiež obsahovať tlačidlo vymazať. Túto funkciu pridáte v neskorších krokoch:

receptDiv.innerHTML = `
${recipe.name}</h3>


<silný>Ingrediencie:silný></p>



 ${recipe.ingredients.map(Ing =>`${ingr}
`).pripojiť sa('')}
 </ul>
<silný>metóda:silný></p>

${recipe.method}</p>

Pridajte triedu na štýl div:
```
receptDiv.classList.add('recept');
```
Pripojte nový prvok div k prvku HTML recipeList:
```
recipeList.appendChild (recipeDiv);
```

Pridajte štýl triedy do súboru CSS:

.recept {
hranica: 1pxpevný#ccc;
vypchávka: 10px;
hraničný polomer: 5px;
box-shadow: 0 2px 4pxrgba(0,0,0,.2);
}.recepth3 {
margin-top: 0;
okraj-dole: 10px;
}
.receptul {
marža: 0;
vypchávka: 0;
v štýle zoznamu: žiadny;
}.receptulli {
okraj-dole: 5px;
}

Skontrolujte, či existuje viac ako jeden recept. Ak áno, skryte chybové hlásenie:
```
noRecipes.style.display = recepty.dĺžka > 0? 'none': 'flex';
```
Po pridaní nového receptu do poľa receptov zavolajte novú funkciu vo funkcii handleSubmit():
```
displayRecipes();
```
Otvorte index.html v prehliadači:
Pridajte recepty do zoznamu a sledujte, ako sa zobrazujú na pravej strane:

Ako vymazať recepty

Recepty môžete vymazať kliknutím na Odstrániť tlačidlo pod pokynmi receptu.

Pridajte nejaký štýl CSS pre tlačidlo Odstrániť:

.tlačidlo zmazať {
farba pozadia: #dc3545;
farba: #fff;
hranica: žiadny;
hraničný polomer: 5px;
vypchávka: 5px 10px;
kurzor: ukazovateľ;
}.tlačidlo zmazať:vznášať sa {
farba pozadia: #c82333;
}

Do súboru JavaScript pridajte novú funkciu na odstránenie receptu:
```
funkciuhandleDelete(udalosť) {}
```

Pomocou udalosti JavaScript nájdite index receptu, na ktorý používateľ klikol:

ak (event.target.classList.contains('tlačidlo zmazať')) {
konšt index = event.target.dataset.index;
}

Pomocou indexu odstráňte vybraný recept z poľa receptov:
```
recepty.splice (index, 1);
```
Obnovte zoznam receptov zobrazený na stránke:
```
displayRecipes();
```
Pridajte poslucháč udalostí na volanie funkcie handleDelete(), keď používateľ klikne na tlačidlo Odstrániť:
```
recipeList.addEventListener('klikni', handleDelete);
```
Otvorte index.html v prehliadači. Ak chcete zobraziť tlačidlo vymazať, pridajte recept:

Ako hľadať recepty

Recepty môžete vyhľadávať pomocou vyhľadávacieho panela, aby ste skontrolovali, či určitý recept existuje.

Do pravého stĺpca pridajte vyhľadávací panel pred zoznam receptov:

<divid="hľadacia sekcia">
<h3>Zoznam receptovh3>
<štítokpre="vyhľadávacie pole">Vyhľadávanie:štítok>
<vstuptypu="text"id="vyhľadávacie pole">
div>

Pridajte štýl CSS pre štítok vyhľadávacieho panela:

štítok[pre="vyhľadávacie pole"] {
displej: blokovať;
okraj-dole: 10px;
}

V script.js získajte prvok HTML vyhľadávacieho poľa:

konšt vyhľadávacie pole = dokument.getElementById('search-box');

V rámci novej funkcie vytvorte nové pole, ktoré obsahuje recepty, ktorých názov sa zhoduje so vstupom vyhľadávania:

funkciuVyhľadávanie(dopyt) {
konšt filterRecipes = recepty.filter(recept => {
vrátiť recipe.name.toLowerCase().zahŕňa (query.toLowerCase());
 });
}

Vymažte zoznam receptov aktuálne zobrazených na obrazovke:
```
recipeList.innerHTML = '';
```
Prejdite si každý filtrovaný recept, ktorý zodpovedá výsledku vyhľadávania, a vytvorte nový prvok div:
```
filterRecipes.forEach(recept => {
konšt receptEl = dokument.createElement('div'); 
});
```

Pridajte obsah HTML pre filtrovaný recept do div:

receptEl.innerHTML = `
${recipe.name}</h3>


<silný>Ingrediencie:silný></p>



 ${recipe.ingredients.map(Ing =>`${ingr}
`).pripojiť sa('')}
 </ul>
<silný>metóda:silný></p>

${recipe.method}</p>

Pridajte rovnakú triedu receptov pre konzistentný štýl. Pridajte nový div do zoznamu zobrazeného na stránke:
```
receptEl.classList.add('recept');
recipeList.appendChild (recipeEl);
```
Pridajte poslucháč udalostí, ktorý zavolá funkciu search(), keď používateľ zadá do vyhľadávacieho panela:
```
searchBox.addEventListener('vstup', udalosť => vyhľadávanie (udalosť.cieľová.hodnota));
```
Vo vnútri funkcie handleDelete() vymažte vyhľadávacie pole, ak používateľ odstráni položku, čím obnovíte zoznam:
```
searchBox.value = '';
```
Otvorte index.html vo webovom prehliadači a zobrazte nový panel vyhľadávania a pridajte niekoľko receptov:
Ak chcete filtrovať zoznam receptov, pridajte názov receptu do vyhľadávacieho panela:

Vytváranie projektov pomocou HTML, CSS a JavaScriptu

Tento projekt ukazuje, ako vytvoriť front-end rozhranie pre jednoduchú knihu receptov. Upozorňujeme, že neexistuje žiadny backendový server a aplikácia neuchováva údaje; ak obnovíte stránku, prídete o svoje zmeny. Jedným z možných rozšírení, na ktorých by ste mohli pracovať, je mechanizmus na ukladanie a načítanie údajov pomocou localStorage.

Ak chcete zlepšiť svoje zručnosti v oblasti vývoja webu, pokračujte v skúmaní ďalších zábavných projektov, ktoré môžete vytvoriť na svojom počítači.

About Technology - denizatm.com

Ako vytvoriť knihu receptov pomocou HTML, CSS a JavaScriptu

Ako požiadať používateľa o pridanie nového receptu

Ako zobraziť pridané recepty

${recipe.name}</h3>

Ako vymazať recepty

Ako hľadať recepty

${recipe.name}</h3>

Vytváranie projektov pomocou HTML, CSS a JavaScriptu

Kategórie

Recent Post

Ako používať slučky so zoznamami v Pythone

Dave Parrack, autor na MakeUseOf

Ako dlho vydržia notebooky? 5 spôsobov, ako predĺžiť životnosť vášho notebooku