Jak vytvořit knihu receptů pomocí HTML, CSS a JavaScriptu

Tento projekt vám pomůže zdokonalit vaše front-endové dovednosti a naučí vás, jak vytvořit rozhraní pomocí základních webových standardů.

Projekty jsou skvělým způsobem, jak zlepšit své dovednosti v HTML, CSS a JavaScriptu a posílit důležité koncepty a techniky.

Jedním z projektů, se kterým můžete začít, je kniha receptů, kterou můžete spustit v prohlížeči, jako je Google Chrome nebo Firefox.

V knize receptů obsahuje levá strana webové stránky sekci, do které může uživatel přidávat nové recepty. V pravé části stránky může uživatel prohlížet a vyhledávat existující receptury.

Jak požádat uživatele o přidání nového receptu

Přidejte počáteční obsah do souborů HTML, CSS a JavaScript. Pokud nejste obeznámeni s koncepty vývoje webu, existuje mnoho míst, kde můžete naučit se vývoj webu online.

Zde si také můžete prohlédnout celý příklad knihy receptů úložiště GitHub.

Přidejte základní strukturu HTML do nového souboru HTML s názvem index.html:

html>
<html>
<hlava>
<titul>Aplikace receptůtitul>
hlava>
<tělo>
<nav>
<h1>Aplikace receptůh1>
nav>
<divtřída="kontejner">
 Obsah zde 
div>
tělo>
html>

instagram viewer

Uvnitř třídy kontejneru rozdělte stránku na levý a pravý sloupec:
```
<divtřída="levý sloupec">div>
<divtřída="pravý sloupec">div>
```

Do levého sloupce přidejte formulář pro uživatele, aby mohl přidat nový recept. Uživatel může zadat název receptu, seznam ingrediencí a metodu:

<h3>Přidat recepth3><formulář>
<označenípro="název receptu">Název:označení>
<vstuptyp="text"id="název receptu"Požadované>
<br />
<označenípro="ingredience receptury">Ingredience:označení>
<textareaid="ingredience receptury"řádky="5"Požadované>textarea>
<br />
<označenípro="metoda receptu">Metoda:označení>
<textareaid="metoda receptu"řádky="5"Požadované>textarea>
<br /><knoflíktyp="Předložit">Přidat receptknoflík>
formulář>

Do značky head souboru HTML přidejte odkaz na nový soubor CSS s názvem styles.css. Vytvořte soubor ve stejné složce jako soubor HTML:
```
<odkazrel="stylesheet"href="styles.css">
```

Do souboru CSS přidejte nějaký styl pro celkovou stránku:

tělo {
rodina písem: sans-serif;
}nav {
barva pozadí: #333;
pozice: pevný;
horní: 0;
šířka: 100%;
vycpávka: 20px;
vlevo, odjet: 0;
barva: bílý;
zarovnání textu: centrum;
}
.kontejner {
Zobrazit: flex;
flex-direction: řádek;
ospravedlnit-obsah: prostor-mezi;
okraj: 150px 5%;
}
.levý sloupec {
šířka: 25%;
}.pravý sloupec {
šířka: 65%;
}

Přidejte nějaký styl pro Přidat recepty formulář:

formulář {
Zobrazit: flex;
flex-direction: sloupec;
}označení {
okraj-dole: 10px;
}
vstup[typ="text"], textarea {
vycpávka: 10px;
okraj-dole: 10px;
hraniční poloměr: 5px;
okraj: 1pxpevný#ccc;
šířka: 100%;
velikost krabice: border-box;
}knoflík[typ="Předložit"] {
vycpávka: 10px;
barva pozadí: #3338;
barva: #fff;
okraj: žádný;
hraniční poloměr: 5px;
kurzor: ukazatel;
}

Do spodní části značky body v souboru HTML přidejte odkaz na soubor JavaScript s názvem script.js. Vytvořte soubor ve stejné složce:
```
<tělo>
 Obsah 
<skriptsrc="script.js">skript>
tělo>
```
Uvnitř skriptu script.js použijte metodu querySelector procházet DOM a získat prvek formuláře ze stránky.
```
konst forma = dokument.querySelector('formulář');
```
Vytvořte nové pole pro uložení receptů, které uživatel zadá do formuláře:
```
nechat recepty = [];
```

V nové funkci získejte název, ingredience a pole metody zadané prostřednictvím formuláře. Můžete také implementovat ověření formuláře na straně klienta abyste zabránili neplatným vstupům nebo zkontrolovali, zda již existuje recept.

funkcehandleSubmit(událost) {
// Zabránění výchozímu chování při odesílání formuláře
 event.preventDefault();

// Získání názvu receptu, ingrediencí a vstupních hodnot metody
konst nameInput = dokument.querySelector('#recipe-name');
konst ingInput = dokument.querySelector('#recipe-ingredients');
konst metodaVstup = dokument.querySelector('#recipe-metoda');
konst name = nameInput.value.trim();
konst přísady = ingrInput.value.trim().split(',').mapa(i => i.trim());
konst metoda = methodInput.value.trim();
}

Pokud jsou vstupy platné, přidejte je do pole receptů:

-li (název && ingredience.délka > 0 && metoda) {
konst newRecipe = { název, přísady, metoda };
 recepty.push (novýRecept);
}

Vymažte vstupy ve formuláři:

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

Po funkci handleSubmit() přidejte posluchač události pro volání funkce, když uživatel odešle formulář:
```
form.addEventListener('Předložit', handleSubmit);
```
Otevřete index.html v prohlížeči a zobrazte formulář vlevo:

Jak zobrazit přidané recepty

Recepty uložené v poli receptů můžete zobrazit na pravé straně stránky.

V souboru HTML přidejte div, aby se v pravém sloupci zobrazil seznam receptů. Přidejte další div pro zobrazení zprávy, pokud neexistují žádné recepty:
```
<divtřída="pravý sloupec">
<divid="seznam receptů">div>
<divid="bez receptů">Nemáte žádné recepty.div>
div>
```

Přidejte nějaké styly CSS pro seznam receptů:

#seznam receptů {
Zobrazit: mřížka;
mřížka-šablona-sloupce: opakovat(automatické přizpůsobení, minmax(300px, 1fr));
grid-gap: 20px;
}#bez receptů {
Zobrazit: flex;
barva pozadí: #FFCCCC;
vycpávka: 20px;
hraniční poloměr: 8px;
margin-top: 44px;
}

V horní části souboru JavaScript použijte prvky HTML k zobrazení seznamu receptů a chybové zprávy:

konst Seznam receptů = dokument.querySelector('#recipe-list');
konst noRecepty = dokument.getElementById('žádné recepty');

Uvnitř nové funkce procházejte každý recept v poli receptů. Pro každý recept vytvořte nový div pro zobrazení tohoto receptu:

funkcezobrazitRecepty() {
 recipeList.innerHTML = '';
 recepty.proKaždý((recept, index) => {
konst receptDiv = dokument.createElement('div');
 });
}

Přidejte nějaký obsah do jednotlivého oddílu receptů, abyste zobrazili název, přísady a metodu. Div bude také obsahovat tlačítko pro odstranění. Tuto funkci přidáte v pozdějších krocích:

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


<silný>Ingredience:silný></p>



 ${recipe.ingredients.map(Ing =>`${ingr}
`).připojit se('')}
 </ul>
<silný>Metoda:silný></p>

${recipe.method}</p>

Přidejte třídu pro stylování div:
```
receptDiv.classList.add('recept');
```
Připojte nový div k prvku HTML recipeList:
```
recipeList.appendChild (recipeDiv);
```

Přidejte styl třídy do souboru CSS:

.recept {
okraj: 1pxpevný#ccc;
vycpávka: 10px;
hraniční poloměr: 5px;
box-shadow: 0 2px 4pxrgba(0,0,0,.2);
}.recepth3 {
margin-top: 0;
okraj-dole: 10px;
}
.receptul {
okraj: 0;
vycpávka: 0;
ve stylu seznamu: žádný;
}.receptulli {
okraj-dole: 5px;
}

Zkontrolujte, zda existuje více než jeden recept. Pokud ano, skryjte chybovou zprávu:
```
noRecipes.style.display = recepty.délka > 0? 'none': 'flex';
```
Po přidání nového receptu do pole receptů zavolejte novou funkci uvnitř funkce handleSubmit():
```
displayRecipes();
```
Otevřete index.html v prohlížeči:
Přidejte recepty do seznamu a sledujte, jak se objeví na pravé straně:

Jak odstranit recepty

Recepty můžete smazat kliknutím na Vymazat tlačítko pod pokyny k receptu.

Přidejte nějaký styl CSS pro tlačítko Odstranit:

.tlačítko smazat {
barva pozadí: #dc3545;
barva: #fff;
okraj: žádný;
hraniční poloměr: 5px;
vycpávka: 5px 10px;
kurzor: ukazatel;
}.tlačítko smazat:vznášet se {
barva pozadí: #c82333;
}

Do souboru JavaScript přidejte novou funkci pro odstranění receptury:
```
funkcehandleDelete(událost) {}
```

Pomocí události JavaScript najděte index receptu, na který uživatel klikl:

-li (event.target.classList.contains('tlačítko smazat')) {
konst index = event.target.dataset.index;
}

Pomocí indexu odstraňte vybraný recept z pole receptů:
```
recepty.splice (index, 1);
```
Obnovte seznam receptů zobrazený na stránce:
```
displayRecipes();
```
Přidejte posluchač události, který zavolá funkci handleDelete(), když uživatel klikne na tlačítko Odstranit:
```
recipeList.addEventListener('kliknout', handleDelete);
```
Otevřete index.html v prohlížeči. Přidat recept pro zobrazení tlačítka smazat:

Jak hledat recepty

Recepty můžete vyhledávat pomocí vyhledávací lišty a zkontrolovat, zda určitý recept existuje.

Do pravého sloupce přidejte vyhledávací lištu před seznam receptů:

<divid="hledací sekce">
<h3>Seznam receptůh3>
<označenípro="vyhledávací pole">Vyhledávání:označení>
<vstuptyp="text"id="vyhledávací pole">
div>

Přidejte styl CSS pro štítek vyhledávacího pole:

označení[pro="vyhledávací pole"] {
Zobrazit: blok;
okraj-dole: 10px;
}

V script.js získejte prvek HTML vyhledávacího pole:

konst vyhledávací pole = dokument.getElementById('vyhledávací pole');

Uvnitř nové funkce vytvořte nové pole obsahující recepty, jejichž název odpovídá zadání vyhledávání:

funkceVyhledávání(dotaz) {
konst filterRecipes = recepty.filtr(recept => {
vrátit se recept.název.toLowerCase().zahrnuje (query.toLowerCase());
 });
}

Vymažte seznam receptů aktuálně zobrazených na obrazovce:
```
recipeList.innerHTML = '';
```
Projděte každý filtrovaný recept, který odpovídá výsledku vyhledávání, a vytvořte nový prvek div:
```
filterRecipes.forEach(recept => {
konst receptEl = dokument.createElement('div'); 
});
```

Přidejte obsah HTML pro filtrovaný recept do div:

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


<silný>Ingredience:silný></p>



 ${recipe.ingredients.map(Ing =>`${ingr}
`).připojit se('')}
 </ul>
<silný>Metoda:silný></p>

${recipe.method}</p>

Přidejte stejnou třídu receptů pro konzistentní styl. Přidejte nový div do seznamu zobrazeného na stránce:
```
receptEl.classList.add('recept');
recipeList.appendChild (recipeEl);
```
Přidejte posluchač události, který zavolá funkci search(), když uživatel zadá do vyhledávacího pole:
```
searchBox.addEventListener('vstup', událost => hledat (událost.cílová.hodnota));
```
Uvnitř funkce handleDelete() vymažte vyhledávací pole, pokud uživatel odstraní položku, aby se obnovil seznam:
```
searchBox.value = '';
```
Otevřete index.html ve webovém prohlížeči a zobrazte nový vyhledávací panel a přidejte některé recepty:
Chcete-li filtrovat seznam receptů, přidejte do vyhledávacího pole název receptu:

Vytváření projektů pomocí HTML, CSS a JavaScriptu

Tento projekt ukazuje, jak vytvořit rozhraní front-end pro jednoduchou knihu receptů. Všimněte si, že neexistuje žádný backendový server a aplikace neuchovává data; pokud stránku obnovíte, ztratíte své změny. Jedním z možných rozšíření, na kterém byste mohli pracovat, je mechanismus pro ukládání a načítání dat pomocí localStorage.

Chcete-li zlepšit své dovednosti v oblasti vývoje webu, pokračujte ve zkoumání dalších zábavných projektů, které můžete vytvořit na svém vlastním počítači.

About Technology - denizatm.com

Jak vytvořit knihu receptů pomocí HTML, CSS a JavaScriptu

Jak požádat uživatele o přidání nového receptu

Jak zobrazit přidané recepty

${recipe.name}</h3>

Jak odstranit recepty

Jak hledat recepty

${recipe.name}</h3>

Vytváření projektů pomocí HTML, CSS a JavaScriptu

kategorie

Recent Post

3 Skutečná bezpečnostní rizika ohrožující vaši zábavu v chytré televizi

Globální výzva rozzlobených ptáků [INFOGRAPHIC]

Nejlepší webové stránky k nalezení bezplatných oprav virů a malwaru