Kako stvoriti knjigu recepata koristeći HTML, CSS i JavaScript

Ovaj projekt pomoći će vam da usavršite svoje vještine front-enda i naučit će vas kako izgraditi sučelje pomoću temeljnih web standarda.

Projekti su sjajan način da poboljšate svoje vještine HTML-a, CSS-a i JavaScripta i učvrstite važne koncepte i tehnike.

Jedan projekt s kojim možete započeti je knjiga recepata, koju možete pokrenuti u pregledniku kao što je Google Chrome ili Firefox.

U knjizi recepata, lijeva strana web stranice sadrži odjeljak u koji korisnik može dodati nove recepte. Na desnoj strani stranice korisnik može pregledavati i pretraživati postojeće recepte.

Kako zamoliti korisnika da doda novi recept

Dodajte početni sadržaj u HTML, CSS i JavaScript datoteke. Ako niste upoznati s konceptima web razvoja, postoji mnogo mjesta gdje to možete učiniti naučite web razvoj online.

Ovdje također možete pogledati cijeli primjer knjige recepata GitHub repo.

Dodajte osnovnu HTML strukturu u novu HTML datoteku pod nazivom index.html:

html>
<html>
<glava>
<titula>Aplikacija za receptetitula>
instagram viewer


glava>
<tijelo>
<nav>
<h1>Aplikacija za recepteh1>
nav>
<divrazreda="kontejner">
 Sadržaj ovdje 
div>
tijelo>
html>

Unutar klase spremnika, odvojite stranicu u lijevi i desni stupac:
```
<divrazreda="lijevi stupac">div>
<divrazreda="desni stupac">div>
```

Unutar lijevog stupca dodajte obrazac za korisnikovo dodavanje novog recepta. Korisnik može unijeti naziv recepta, popis sastojaka i metodu:

<h3>Dodaj recepth3><oblik>
<označitiza="naziv-recepta">Ime:označiti>
<ulaznitip="tekst"iskaznica="naziv-recepta"potreban>
<br />
<označitiza="recept-sastojci">Sastojci:označiti>
<tekstualno područjeiskaznica="recept-sastojci"redaka="5"potreban>tekstualno područje>
<br />
<označitiza="recept-metoda">metoda:označiti>
<tekstualno područjeiskaznica="recept-metoda"redaka="5"potreban>tekstualno područje>
<br /><dugmetip="podnijeti">Dodaj receptdugme>
oblik>

U oznaku head HTML datoteke dodajte vezu na novu CSS datoteku pod nazivom styles.css. Stvorite datoteku u istoj mapi kao i vaša HTML datoteka:
```
<vezarel="list stilova"href="styles.css">
```

Unutar CSS datoteke dodajte neki stil za cjelokupnu stranicu:

tijelo {
obitelj-fontova: sans-serif;
}nav {
boja pozadine: #333;
položaj: fiksni;
vrh: 0;
širina: 100%;
podstava: 20px;
lijevo: 0;
boja: bijela;
poravnanje teksta: centar;
}
.kontejner {
prikaz: savijati;
flex-direction: red;
opravdati-sadržaj: razmak između;
margina: 150px 5%;
}
.lijevi-stupac {
širina: 25%;
}.desni stupac {
širina: 65%;
}

Dodajte malo stila za Dodajte recepte oblik:

oblik {
prikaz: savijati;
flex-direction: stupac;
}označiti {
margina-dno: 10px;
}
ulazni[vrsta="tekst"], tekstualno područje {
podstava: 10px;
margina-dno: 10px;
granični radijus: 5px;
granica: 1pxčvrsta#ccc;
širina: 100%;
dimenzioniranje kutije: rubni okvir;
}dugme[vrsta="podnijeti"] {
podstava: 10px;
boja pozadine: #3338;
boja: #F F F;
granica: nikakav;
granični radijus: 5px;
kursor: pokazivač;
}

Na dnu oznake tijela u vašoj HTML datoteci dodajte vezu na JavaScript datoteku pod nazivom script.js. Stvorite datoteku u istoj mapi:
```
<tijelo>
 Sadržaj 
<skriptasrc="script.js">skripta>
tijelo>
```
Unutar script.js upotrijebite metodu querySelector za prijeći DOM i dohvatite element obrasca sa stranice.
```
konst oblik = dokument.querySelector('oblik');
```
Napravite novi niz za pohranu recepata koje korisnik unese u obrazac:
```
neka recepti = [];
```

U novoj funkciji dobijte polja za naziv, sastojke i metodu unesena putem obrasca. Također možete implementirati provjera valjanosti obrazaca na strani klijenta kako biste spriječili nevažeće unose ili provjerili postoji li recept.

funkcijarukovanjePošalji(događaj) {
// Sprječavanje zadanog ponašanja podnošenja obrasca
 event.preventDefault();

// Dobivanje naziva recepta, sastojaka i ulaznih vrijednosti metode
konst nameInput = dokument.querySelector('#naziv-recepta');
konst ingrInput = dokument.querySelector('#recept-sastojci');
konst methodInput = dokument.querySelector('#recept-metoda');
konst ime = imeInput.vrijednost.trim();
konst sastojci = ingrInput.value.trim().split(',').karta(ja => i.trim());
konst metoda = methodInput.value.trim();
}

Ako su unosi valjani, dodajte ih u polje recepata:

ako (ime && sastojci.duljina > 0 && metoda) {
konst newRecipe = { ime, sastojci, metoda };
 recepti.push (noviRecept);
}

Obrišite unose na obrascu:

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

Nakon funkcije handleSubmit(), dodajte slušatelj događaja za pozivanje funkcije kada korisnik pošalje obrazac:
```
form.addEventListener('podnijeti', handleSubmit);
```
Otvorite index.html u pregledniku i pogledajte obrazac s lijeve strane:

Kako prikazati dodane recepte

Možete prikazati recepte pohranjene u nizu recepata na desnoj strani stranice.

U HTML datoteku dodajte div za prikaz popisa recepata unutar desnog stupca. Dodajte još jedan div za prikaz poruke ako nema recepata:
```
<divrazreda="desni stupac">
<diviskaznica="popis recepata">div>
<diviskaznica="bez recepata">Nemate recepte.div>
div>
```

Dodajte malo CSS stila za popis recepata:

#popis-recepata {
prikaz: rešetka;
rešetka-predložak-stupci: ponoviti(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}#bez-recepata {
prikaz: savijati;
boja pozadine: #FFCCCC;
podstava: 20px;
granični radijus: 8px;
margin-top: 44px;
}

Na vrhu JavaScript datoteke preuzmite HTML elemente koji se koriste za prikaz popisa recepata i poruke o pogrešci:

konst popis recepata = dokument.querySelector('#popis-recepata');
konst noRecipes = dokument.getElementById('bez recepata');

Unutar nove funkcije, prođite kroz svaki recept u nizu recepata. Za svaki recept izradite novi div za prikaz tog recepta:

funkcijadisplayRecipes() {
 recipeList.innerHTML = '';
 recipes.forEach((recept, indeks) => {
konst receptDiv = dokument.createElement('div');
 });
}

Dodajte neki sadržaj pojedinačnom divu recepta za prikaz naziva, sastojaka i metode. Div će također sadržavati gumb za brisanje. Ovu ćete funkciju dodati u kasnijim koracima:

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


<snažna>Sastojci:snažna></p>



 ${recept.ingredients.map(ingr =>`${ingr}
`).pridružiti('')}
 </ul>
<snažna>metoda:snažna></p>

${recept.metoda}</p>

Dodajte klasu za stiliziranje diva:
```
recipeDiv.classList.add('recept');
```
Dodajte novi div u HTML element recipeList:
```
RecipeList.appendChild (recipeDiv);
```

Dodajte stil za klasu u CSS datoteku:

.recept {
granica: 1pxčvrsta#ccc;
podstava: 10px;
granični radijus: 5px;
kutija-sjena: 0 2px 4pxrgba(0,0,0,.2);
}.recepth3 {
margin-top: 0;
margina-dno: 10px;
}
.receptul {
margina: 0;
podstava: 0;
u stilu popisa: nikakav;
}.receptulli {
margina-dno: 5px;
}

Provjerite postoji li više od jednog recepta. Ako je tako, sakrijte poruku pogreške:
```
noRecipes.style.display = recipes.length > 0? 'ništa': 'fleksibilno';
```
Pozovite novu funkciju unutar funkcije handleSubmit(), nakon dodavanja novog recepta u niz recepata:
```
prikazRecepti();
```
Otvorite index.html u pregledniku:
Dodajte recepte na popis i gledajte kako se pojavljuju na desnoj strani:

Kako izbrisati recepte

Recepte možete izbrisati klikom na Izbrisati gumb ispod uputa za recept.

Dodajte neki CSS stil za gumb za brisanje:

.gumb za brisanje {
boja pozadine: #dc3545;
boja: #F F F;
granica: nikakav;
granični radijus: 5px;
podstava: 5px 10px;
kursor: pokazivač;
}.gumb za brisanje:lebdjeti {
boja pozadine: #c82333;
}

U JavaScript datoteku dodajte novu funkciju za brisanje recepta:
```
funkcijarukovanjeDelete(događaj) {}
```

Pomoću JavaScript događaja pronađite indeks recepta na koji je korisnik kliknuo:

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

Pomoću indeksa izbrišite odabrani recept iz niza recepata:
```
recipes.splice (indeks, 1);
```
Osvježite popis recepata prikazanih na stranici:
```
prikazRecepti();
```
Dodajte slušatelja događaja za pozivanje funkcije handleDelete() kada korisnik klikne gumb za brisanje:
```
recipeList.addEventListener('klik', handleDelete);
```
Otvorite index.html u pregledniku. Dodajte recept za prikaz gumba za brisanje:

Kako tražiti recepte

Možete tražiti recepte pomoću trake za pretraživanje kako biste provjerili postoji li određeni recept.

Unutar desnog stupca dodajte traku za pretraživanje prije popisa recepata:

<diviskaznica="odjeljak za pretraživanje">
<h3>Popis recepatah3>
<označitiza="okvir za pretraživanje">Traži:označiti>
<ulaznitip="tekst"iskaznica="okvir za pretraživanje">
div>

Dodajte CSS stil za oznaku trake za pretraživanje:

označiti[za="okvir za pretraživanje"] {
prikaz: blok;
margina-dno: 10px;
}

U script.js preuzmite HTML element okvira za pretraživanje:

konst SearchBox = dokument.getElementById('okvir za pretraživanje');

Unutar nove funkcije stvorite novi niz koji sadrži recepte čiji naziv odgovara unosu pretraživanja:

funkcijatraži(upit) {
konst filteredRecipes = recipes.filter(recept => {
povratak recipe.name.toLowerCase().uključuje (query.toLowerCase());
 });
}

Obrišite popis recepata trenutno prikazanih na ekranu:
```
recipeList.innerHTML = '';
```
Prođite kroz svaki filtrirani recept koji odgovara rezultatu pretraživanja i izradite novi element div:
```
filteredRecipes.forEach(recept => {
konst receptEl = dokument.createElement('div'); 
});
```

Dodajte HTML sadržaj za filtrirani recept u div:

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


<snažna>Sastojci:snažna></p>



 ${recept.ingredients.map(ingr =>`${ingr}
`).pridružiti('')}
 </ul>
<snažna>metoda:snažna></p>

${recept.metoda}</p>

Dodajte istu klasu recepata za dosljedan stil. Dodajte novi div na popis prikazan na stranici:
```
receptEl.classList.add('recept');
recipeList.appendChild (receptEl);
```
Dodajte slušatelja događaja za pozivanje funkcije search() kada korisnik upisuje u traku za pretraživanje:
```
searchBox.addEventListener('ulazni', događaj => pretraživanje (event.target.value));
```
Unutar funkcije handleDelete(), poništite okvir za pretraživanje ako korisnik izbriše stavku, kako biste osvježili popis:
```
searchBox.value = '';
```
Otvorite index.html u web pregledniku da vidite novu traku za pretraživanje i dodajte neke recepte:
Dodajte naziv recepta u traku za pretraživanje kako biste filtrirali popis recepata:

Izrada projekata s HTML-om, CSS-om i JavaScriptom

Ovaj projekt pokazuje kako izgraditi front-end sučelje za jednostavnu knjigu recepata. Imajte na umu da ne postoji pozadinski poslužitelj i da aplikacija ne čuva podatke; ako osvježite stranicu, izgubit ćete promjene. Jedno moguće proširenje na kojem biste mogli raditi je mehanizam za spremanje i učitavanje podataka pomoću localStorage.

Kako biste poboljšali svoje vještine web razvoja, nastavite istraživati druge zabavne projekte koje možete izraditi na vlastitom računalu.

About Technology - denizatm.com

Kako stvoriti knjigu recepata koristeći HTML, CSS i JavaScript

Kako zamoliti korisnika da doda novi recept

Kako prikazati dodane recepte

${recept.name}</h3>

Kako izbrisati recepte

Kako tražiti recepte

${recept.name}</h3>

Izrada projekata s HTML-om, CSS-om i JavaScriptom

Kategorije

Recent Post

6 najiritantnijih stvari o Teslinim električnim vozilima

Kako koristiti CSS varijable kao profesionalac

Što su Intelova Adaptive Boost tehnologija i Thermal Velocity Boost?