Kako ustvariti knjigo receptov z uporabo HTML, CSS in JavaScript

Ta projekt vam bo pomagal izpopolniti vaše sprednje spretnosti in vas naučil, kako zgraditi vmesnik z uporabo osnovnih spletnih standardov.

Projekti so odličen način za izboljšanje vaših veščin HTML, CSS in JavaScript ter utrjevanje pomembnih konceptov in tehnik.

En projekt, s katerim lahko začnete, je knjiga receptov, ki jo lahko zaženete v brskalniku, kot sta Google Chrome ali Firefox.

V knjigi receptov je na levi strani spletne strani razdelek, kjer lahko uporabnik dodaja nove recepte. Na desni strani si lahko uporabnik ogleda in išče obstoječe recepte.

Kako prositi uporabnika, da doda nov recept

Dodajte začetno vsebino v datoteke HTML, CSS in JavaScript. Če niste seznanjeni s koncepti spletnega razvoja, lahko to storite na številnih mestih učenje spletnega razvoja na spletu.

Tukaj si lahko ogledate tudi primer celotne knjige receptov GitHub repo.

Dodajte osnovno strukturo HTML v novo datoteko HTML z imenom index.html:

html>
<html>
<glavo>
<naslov>Aplikacija za receptenaslov>
glavo>
<telo>
<nav>
<h1>Aplikacija za recepteh1>
nav>
<divrazred="posoda">
 Vsebina tukaj 
div>
telo>
html>

instagram viewer

Znotraj razreda vsebnika ločite stran na levi in desni stolpec:
```
<divrazred="levi stolpec">div>
<divrazred="desni stolpec">div>
```

Znotraj levega stolpca dodajte obrazec, da uporabnik doda nov recept. Uporabnik lahko vnese ime recepta, seznam sestavin in metodo:

<h3>Dodaj recepth3><oblika>
<oznakaza="ime-recepta">ime:oznaka>
<vnosvrsta="besedilo"id="ime-recepta"potrebno>
<št />
<oznakaza="recept-sestavine">Sestavine:oznaka>
<textareaid="recept-sestavine"vrstice="5"potrebno>textarea>
<št />
<oznakaza="recept-metoda">metoda:oznaka>
<textareaid="recept-metoda"vrstice="5"potrebno>textarea>
<št /><gumbvrsta="oddaj">Dodaj receptgumb>
oblika>

V oznaki head datoteke HTML dodajte povezavo do nove datoteke CSS, imenovane styles.css. Ustvarite datoteko v isti mapi kot vaša datoteka HTML:
```
<povezavarel="stylesheet"href="styles.css">
```

Znotraj datoteke CSS dodajte nekaj sloga za celotno stran:

telo {
družina pisav: sans-serif;
}nav {
Barva ozadja: #333;
položaj: fiksno;
vrh: 0;
premer: 100%;
oblazinjenje: 20px;
levo: 0;
barva: bela;
poravnava besedila: center;
}
.posoda {
zaslon: flex;
flex-direction: vrstica;
justify-content: presledek med;
marža: 150px 5%;
}
.levi stolpec {
premer: 25%;
}.desni stolpec {
premer: 65%;
}

Dodajte nekaj stila za Dodajte recepte oblika:

oblika {
zaslon: flex;
flex-direction: stolpec;
}oznaka {
margin-bottom: 10px;
}
vnos[vrsta="besedilo"], textarea {
oblazinjenje: 10px;
margin-bottom: 10px;
mejni polmer: 5px;
meja: 1pxtrdna#ccc;
premer: 100%;
velikost škatle: border-box;
}gumb[vrsta="oddaj"] {
oblazinjenje: 10px;
Barva ozadja: #3338;
barva: #fff;
meja: nič;
mejni polmer: 5px;
kazalec: kazalec;
}

Na dnu oznake body v datoteki HTML dodajte povezavo do datoteke JavaScript, imenovane script.js. Ustvarite datoteko v isti mapi:
```
<telo>
 Vsebina 
<scenarijsrc="script.js">scenarij>
telo>
```
Znotraj script.js uporabite metodo querySelector za prečkati DOM in pridobite element obrazca s strani.
```
konst oblika = dokument.querySelector('oblika');
```
Ustvarite novo polje za shranjevanje receptov, ki jih uporabnik vnese v obrazec:
```
pustiti recepti = [];
```

V novi funkciji dobite polja z imenom, sestavinami in metodo, ki jih vnesete prek obrazca. Lahko tudi izvajate preverjanje obrazca na strani odjemalca da preprečite neveljavne vnose ali da preverite, ali recept že obstaja.

funkcijohandleSubmit(dogodek) {
// Prepreči privzeto vedenje oddaje obrazca
 event.preventDefault();

// Pridobite ime recepta, sestavine in vhodne vrednosti metode
konst nameInput = dokument.querySelector('#ime-recepta');
konst ingrInput = dokument.querySelector('#recept-sestavine');
konst methodInput = dokument.querySelector('#recept-metoda');
konst ime = nameInput.value.trim();
konst sestavine = ingrInput.value.trim().split(',').zemljevid(jaz => i.trim());
konst metoda = methodInput.value.trim();
}

Če so vnosi veljavni, jih dodajte v matriko receptov:

če (ime && sestavine.dolžina > 0 && metoda) {
konst newRecipe = {ime, sestavine, metoda};
 recepti.push (novRecept);
}

Počistite vnose na obrazcu:

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

Po funkciji handleSubmit() dodajte poslušalec dogodkov za klic funkcije, ko uporabnik odda obrazec:
```
form.addEventListener('predloži', handleSubmit);
```
Odprite index.html v brskalniku in si oglejte obrazec na levi:

Kako prikazati dodane recepte

Recepte, shranjene v nizu receptov, lahko prikažete na desni strani strani.

V datoteko HTML dodajte div za prikaz seznama receptov v desnem stolpcu. Dodajte še en div za prikaz sporočila, če ni receptov:
```
<divrazred="desni stolpec">
<divid="seznam receptov">div>
<divid="brez receptov">Nimate receptov.div>
div>
```

Dodajte nekaj stilov CSS za seznam receptov:

#seznam receptov {
zaslon: mreža;
mreža-predloga-stolpci: ponovite(samodejno prilagajanje, minmax(300px, 1fr));
mrežna vrzel: 20px;
}#brezreceptov {
zaslon: flex;
Barva ozadja: #FFCCCC;
oblazinjenje: 20px;
mejni polmer: 8px;
margin-top: 44px;
}

Na vrhu datoteke JavaScript dobite elemente HTML, ki se uporabljajo za prikaz seznama receptov in sporočila o napaki:

konst Seznam receptov = dokument.querySelector('#seznam-receptov');
konst noRecipes = dokument.getElementById('brez receptov');

Znotraj nove funkcije se pomikajte po vsakem receptu v matriki receptov. Za vsak recept ustvarite nov div za prikaz tega recepta:

funkcijodisplayRecipes() {
 recipeList.innerHTML = '';
 recepti.zaVsak((recept, kazalo) => {
konst receptDiv = dokument.createElement('div');
 });
}

Dodajte nekaj vsebine v div posameznega recepta, da prikažete ime, sestavine in metodo. Div bo vključeval tudi gumb za brisanje. To funkcijo boste dodali v kasnejših korakih:

recipeDiv.innerHTML = `
${recept.name}</h3>


<močan>Sestavine:močan></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).pridruži se('')}
 </ul>
<močan>metoda:močan></p>

${recept.metoda}</p>

Dodajte razred za oblikovanje diva:
```
recipeDiv.classList.add('recept');
```
Dodajte nov element div elementu HTML recipeList:
```
recipeList.appendChild (recipeDiv);
```

Dodajte slog za razred v datoteko CSS:

.recept {
meja: 1pxtrdna#ccc;
oblazinjenje: 10px;
mejni polmer: 5px;
box-shadow: 0 2px 4pxrgba(0,0,0,.2);
}.recepth3 {
margin-top: 0;
margin-bottom: 10px;
}
.receptul {
marža: 0;
oblazinjenje: 0;
v slogu seznama: nič;
}.receptulli {
margin-bottom: 5px;
}

Preverite, ali obstaja več kot en recept. Če je tako, skrijte sporočilo o napaki:
```
noRecipes.style.display = recipes.length > 0? 'brez': 'flex';
```
Pokličite novo funkcijo znotraj funkcije handleSubmit(), potem ko dodate nov recept v matriko receptov:
```
displayRecipes();
```
Odprite index.html v brskalniku:
Dodajte recepte na seznam in opazujte, kako se prikazujejo na desni strani:

Kako izbrisati recepte

Recepte lahko izbrišete s klikom na Izbriši gumb pod navodili za recept.

Dodajte nekaj sloga CSS za gumb za brisanje:

.gumb za brisanje {
Barva ozadja: #dc3545;
barva: #fff;
meja: nič;
mejni polmer: 5px;
oblazinjenje: 5px 10px;
kazalec: kazalec;
}.gumb za brisanje:lebdi {
Barva ozadja: #c82333;
}

V datoteko JavaScript dodajte novo funkcijo za brisanje recepta:
```
funkcijohandleDelete(dogodek) {}
```

Z dogodkom JavaScript poiščite indeks recepta, na katerega je uporabnik kliknil:

če (event.target.classList.contains('gumb za brisanje')) {
konst indeks = event.target.dataset.index;
}

Z indeksom izbrišite izbrani recept iz matrike receptov:
```
recepti.splice (indeks, 1);
```
Osvežite seznam receptov, prikazanih na strani:
```
displayRecipes();
```
Dodajte poslušalca dogodkov za klic funkcije handleDelete(), ko uporabnik klikne gumb za brisanje:
```
recipeList.addEventListener('klik', handleDelete);
```
Odprite index.html v brskalniku. Dodajte recept za ogled gumba za brisanje:

Kako iskati recepte

Z iskalno vrstico lahko iščete recepte, da preverite, ali določen recept obstaja.

Znotraj desnega stolpca dodajte iskalno vrstico pred seznam receptov:

<divid="section-search">
<h3>Seznam receptovh3>
<oznakaza="iskalno polje">Iskanje:oznaka>
<vnosvrsta="besedilo"id="iskalno polje">
div>

Dodajte slog CSS za oznako iskalne vrstice:

oznaka[za="iskalno polje"] {
zaslon: blok;
margin-bottom: 10px;
}

V script.js pridobite element HTML iskalnega polja:

konst iskalno polje = dokument.getElementById('search-box');

Znotraj nove funkcije ustvarite novo matriko, ki vsebuje recepte, katerih ime se ujema z iskalnim vnosom:

funkcijoIskanje(poizvedbo) {
konst filteredRecipes = recipes.filter(recept => {
vrnitev recept.name.toLowerCase().vključuje (query.toLowerCase());
 });
}

Počistite seznam receptov, ki so trenutno prikazani na zaslonu:
```
recipeList.innerHTML = '';
```
Preglejte vsak filtriran recept, ki se ujema z rezultatom iskanja, in ustvarite nov element div:
```
filteredRecipes.forEach(recept => {
konst receptEl = dokument.createElement('div'); 
});
```

Dodajte vsebino HTML za filtrirani recept v div:

recipeEl.innerHTML = `
${recept.name}</h3>


<močan>Sestavine:močan></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).pridruži se('')}
 </ul>
<močan>metoda:močan></p>

${recept.metoda}</p>

Dodajte isti razred receptov za skladen stil. Dodajte nov element div na seznam, prikazan na strani:
```
receptEl.classList.add('recept');
recipeList.appendChild (recipeEl);
```
Dodajte poslušalca dogodkov za klic funkcije search(), ko uporabnik vnese v iskalno vrstico:
```
searchBox.addEventListener('vhod', dogodek => iskanje (event.target.value));
```
Znotraj funkcije handleDelete() počistite iskalno polje, če uporabnik izbriše element, da osvežite seznam:
```
searchBox.value = '';
```
Odprite index.html v spletnem brskalniku, da si ogledate novo iskalno vrstico in dodajte nekaj receptov:
Dodajte ime recepta v iskalno vrstico, da filtrirate seznam receptov:

Izdelava projektov s HTML, CSS in JavaScript

Ta projekt prikazuje, kako zgraditi sprednji vmesnik za preprosto knjigo receptov. Upoštevajte, da ni zalednega strežnika in da aplikacija ne ohranja podatkov; če osvežite stran, boste izgubili spremembe. Ena možna razširitev, na kateri bi lahko delali, je mehanizem za shranjevanje in nalaganje podatkov z uporabo localStorage.

Če želite izboljšati svoje veščine spletnega razvoja, nadaljujte z raziskovanjem drugih zabavnih projektov, ki jih lahko ustvarite na svojem računalniku.

About Technology - denizatm.com

Kako ustvariti knjigo receptov z uporabo HTML, CSS in JavaScript

Kako prositi uporabnika, da doda nov recept

Kako prikazati dodane recepte

${recept.name}</h3>

Kako izbrisati recepte

Kako iskati recepte

${recept.name}</h3>

Izdelava projektov s HTML, CSS in JavaScript

Kategorije

Recent Post

Google priporoča postopek v dveh korakih za zaščito vašega računa [novice]

5 novih načinov za učenje zgodovine na internetu

Kako uporabljati Applove zmogljive nove funkcije funkcije Note v iOS 11