Cum se creează o carte de rețete folosind HTML, CSS și JavaScript

Acest proiect vă va ajuta să vă perfecționați abilitățile de front-end și vă va învăța cum să construiți o interfață folosind standardele web de bază.

Proiectele sunt o modalitate excelentă de a vă îmbunătăți abilitățile HTML, CSS și JavaScript și de a consolida concepte și tehnici importante.

Un proiect cu care puteți începe este o carte de rețete, pe care o puteți rula într-un browser precum Google Chrome sau Firefox.

În cartea de rețete, partea stângă a paginii web include o secțiune în care utilizatorul poate adăuga rețete noi. În partea dreaptă a paginii, utilizatorul poate vizualiza și căuta prin rețetele existente.

Cum să cereți utilizatorului să adauge o nouă rețetă

Adăugați conținutul inițial la fișierele HTML, CSS și JavaScript. Dacă nu sunteți familiarizat cu conceptele de dezvoltare web, există multe locuri unde puteți învață dezvoltarea web online.

Puteți vedea, de asemenea, exemplul complet de carte de rețete în acest articol Repoziție GitHub.

Adăugați structura HTML de bază într-un fișier HTML nou numit index.html:

instagram viewer

html>
<html>
<cap>
<titlu>Aplicația de rețetătitlu>
cap>
<corp>
<nav>
<h1>Aplicația de rețetăh1>
nav>
<divclasă="container">
 Conținut aici 
div>
corp>
html>

În interiorul clasei container, separați pagina într-o coloană din stânga și o coloană din dreapta:
```
<divclasă=„coloana din stânga”>div>
<divclasă="coloana din dreapta">div>
```

În coloana din stânga, adăugați un formular pentru ca utilizatorul să adauge o nouă rețetă. Utilizatorul poate introduce numele rețetei, lista de ingrediente și metoda:

<h3>Adăugați rețetăh3><formă>
<etichetapentru=„nume-rețetă”>Nume:eticheta>
<intraretip="text"id=„nume-rețetă”necesar>
<br />
<etichetapentru="rețete-ingrediente">Ingrediente:eticheta>
<zona textuluiid="rețete-ingrediente"rânduri="5"necesar>zona textului>
<br />
<etichetapentru=„metoda-rețetă”>Metodă:eticheta>
<zona textuluiid=„metoda-rețetă”rânduri="5"necesar>zona textului>
<br /><butontip="Trimite">Adăugați rețetăbuton>
formă>

În eticheta head a fișierului HTML, adăugați un link către un nou fișier CSS numit styles.css. Creați fișierul în același folder cu fișierul HTML:
```
<legăturărel="foaia de stil"href=„styles.css”>
```

În interiorul fișierului CSS, adăugați un stil pentru întreaga pagină:

corp {
familie de fonturi: sans-serif;
}nav {
culoare de fundal: #333;
poziţie: fix;
top: 0;
lăţime: 100%;
umplutura: 20px;
stânga: 0;
culoare: alb;
aliniere text: centru;
}
.container {
afişa: contracta;
flex-direcție: rând;
justifica-conținut: spațiu-între;
marginea: 150px 5%;
}
.coloana din stânga {
lăţime: 25%;
}.coloana din dreapta {
lăţime: 65%;
}

Adăugați un pic de stil pentru Adăugați rețete formă:

formă {
afişa: contracta;
flex-direcție: coloană;
}eticheta {
margine-fond: 10px;
}
intrare[tip="text"], zona textului {
umplutura: 10px;
margine-fond: 10px;
hotar-raza: 5px;
frontieră: 1pxsolid#ccc;
lăţime: 100%;
dimensionarea cutiei: cutie-chenar;
}buton[tip="Trimite"] {
umplutura: 10px;
culoare de fundal: #3338;
culoare: #fff;
frontieră: nici unul;
hotar-raza: 5px;
cursor: indicator;
}

În partea de jos a etichetei body din fișierul HTML, adăugați un link către un fișier JavaScript numit script.js. Creați fișierul în același folder:
```
<corp>
 Conţinut 
<scenariusrc=„script.js”>scenariu>
corp>
```
În script.js, utilizați metoda querySelector pentru a traversează DOM și obțineți elementul de formular din pagină.
```
const forma = document.querySelector('formă');
```
Creați o nouă matrice pentru a stoca rețetele pe care utilizatorul le introduce în formular:
```
lăsa retete = [];
```

Într-o funcție nouă, obțineți numele, ingredientele și câmpurile de metodă introduse prin formular. De asemenea, puteți implementa validarea formularului pe partea clientului pentru a preveni intrările nevalide sau pentru a verifica dacă o rețetă există deja.

funcţiehandleSubmit(eveniment) {
// Preveniți comportamentul implicit de trimitere a formularelor
 event.preventDefault();

// Obține numele rețetei, ingredientele și valorile de intrare ale metodei
const nameInput = document.querySelector(„#nume-rețetă”);
const ingrInput = document.querySelector(„#rețete-ingrediente”);
const methodInput = document.querySelector(„#rețetă-metodă”);
const nume = numeInput.value.trim();
const ingrediente = ingrInput.value.trim().split(',').Hartă(i => i.trim());
const metoda = methodInput.value.trim();
}

Dacă intrările sunt valide, adăugați-le la matricea de rețete:

dacă (nume && ingrediente.lungime > 0 && metoda) {
const newRecipe = { nume, ingrediente, metoda };
 recipes.push (newRecipe);
}

Ștergeți intrările din formular:

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

După funcția handleSubmit(), adăugați un ascultător de evenimente pentru a apela funcția atunci când utilizatorul trimite formularul:
```
form.addEventListener('Trimite', handleSubmit);
```
Deschideți index.html într-un browser și vizualizați formularul din stânga:

Cum să afișați rețetele adăugate

Puteți afișa rețetele stocate în matricea de rețete din partea dreaptă a paginii.

În fișierul HTML, adăugați un div pentru a afișa lista de rețete în coloana din dreapta. Adăugați un alt div pentru a afișa un mesaj dacă nu există rețete:
```
<divclasă="coloana din dreapta">
<divid="lista de retete">div>
<divid="fara retete">Nu ai retete.div>
div>
```

Adăugați câteva stiluri CSS pentru lista de rețete:

#listă-rețete {
afişa: grilă;
grilă-șablon-coloane: repeta(auto-adaptare, minim maxim(300px, 1fr));
grid-gap: 20px;
}#fără rețete {
afişa: contracta;
culoare de fundal: #FFCCCC;
umplutura: 20px;
hotar-raza: 8px;
margine-top: 44px;
}

În partea de sus a fișierului JavaScript, obțineți elementele HTML folosite pentru a afișa lista de rețete și mesajul de eroare:
```
const recipeList = document.querySelector(„#listă-rețete”);
const noRecipes = document.getElementById(„fără rețete”);
```
În interiorul unei noi funcții, parcurgeți fiecare rețetă din matricea de rețete. Pentru fiecare rețetă, creați un nou div pentru a afișa rețeta respectivă:
```
funcţieafișare Rețete() {
 recipeList.innerHTML = '';
 recipes.forEach((reteta, index) => {
const recipeDiv = document.createElement('div');
 });
}
```

Adăugați conținut la div-ul individual al rețetei pentru a afișa numele, ingredientele și metoda. Div-ul va include și un buton de ștergere. Veți adăuga această funcționalitate în pașii ulterioare:

recipeDiv.innerHTML = `
${rețetă.nume}</h3>


<puternic>Ingrediente:puternic></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).a te alatura('')}
 </ul>
<puternic>Metodă:puternic></p>

${rețetă.metodă}</p>

Adăugați o clasă pentru a stila div-ul:
```
recipeDiv.classList.add('reţetă');
```
Adăugați noul div la elementul HTML recipeList:
```
recipeList.appendChild (recipeDiv);
```

Adăugați stilul pentru clasă în fișierul CSS:

.reţetă {
frontieră: 1pxsolid#ccc;
umplutura: 10px;
hotar-raza: 5px;
cutie-umbră: 0 2px 4pxrgba(0,0,0,.2);
}.reţetăh3 {
margine-top: 0;
margine-fond: 10px;
}
.reţetăul {
marginea: 0;
umplutura: 0;
stil de listă: nici unul;
}.reţetăulli {
margine-fond: 5px;
}

Verificați dacă există mai multe rețete. Dacă da, ascundeți mesajul de eroare:
```
noRecipes.style.display = recipes.length > 0? 'niciun': 'flex';
```
Apelați noua funcție în interiorul funcției handleSubmit(), după adăugarea noii rețete în matricea de rețete:
```
afișareRețete();
```
Deschideți index.html într-un browser:
Adăugați rețete în listă și urmăriți cum apar în partea dreaptă:

Cum să ștergeți rețetele

Puteți șterge rețetele făcând clic pe Șterge butonul de sub instrucțiunile unei rețete.

Adăugați un stil CSS pentru butonul de ștergere:

.butonul-stergere {
culoare de fundal: #dc3545;
culoare: #fff;
frontieră: nici unul;
hotar-raza: 5px;
umplutura: 5px 10px;
cursor: indicator;
}.butonul-stergere:planare {
culoare de fundal: #c82333;
}

În fișierul JavaScript, adăugați o nouă funcție pentru a șterge o rețetă:
```
funcţiehandleDelete(eveniment) {}
```

Folosind evenimentul JavaScript, găsiți indexul rețetei pe care a făcut clic utilizatorul:

dacă (event.target.classList.contains(„buton de ștergere”)) {
const index = event.target.dataset.index;
}

Utilizați indexul pentru a șterge rețeta selectată din matricea de rețete:
```
recipes.splice (index, 1);
```
Reîmprospătați lista de rețete afișată pe pagină:
```
afișareRețete();
```
Adăugați un ascultător de evenimente pentru a apela funcția handleDelete() atunci când utilizatorul face clic pe butonul de ștergere:
```
recipeList.addEventListener('clic', handleDelete);
```
Deschideți index.html într-un browser. Adăugați o rețetă pentru a vizualiza butonul de ștergere:

Cum să cauți rețete

Puteți căuta rețete folosind bara de căutare pentru a verifica dacă există o anumită rețetă.

În coloana din dreapta, adăugați o bară de căutare înaintea listei de rețete:

<divid="sectiunea de cautare">
<h3>Lista de rețeteh3>
<etichetapentru="caseta de cautare">Căutare:eticheta>
<intraretip="text"id="caseta de cautare">
div>

Adăugați stilul CSS pentru eticheta barei de căutare:

eticheta[pentru="caseta de cautare"] {
afişa: bloc;
margine-fond: 10px;
}

În script.js, obțineți elementul HTML al casetei de căutare:

const caseta de căutare = document.getElementById(„caseta de căutare”);

În interiorul unei noi funcții, creați o nouă matrice care conține rețete al căror nume se potrivește cu intrarea de căutare:

funcţiecăutare(interogare) {
const filteredRecipes = recipes.filter(reţetă => {
întoarcere recipe.name.toLowerCase().includes (query.toLowerCase());
 });
}

Ștergeți lista de rețete afișată în prezent pe ecran:
```
recipeList.innerHTML = '';
```
Parcurgeți fiecare rețetă filtrată care se potrivește cu rezultatul căutării și creați un nou element div:
```
filteredRecipes.forEach(reţetă => {
const recipeEl = document.createElement('div'); 
});
```

Adăugați conținutul HTML pentru rețeta filtrată la div:

recipeEl.innerHTML = `
${rețetă.nume}</h3>


<puternic>Ingrediente:puternic></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).a te alatura('')}
 </ul>
<puternic>Metodă:puternic></p>

${rețetă.metodă}</p>

Adăugați aceeași clasă de rețete pentru un stil consistent. Adăugați noul div la lista afișată pe pagină:
```
recipeEl.classList.add('reţetă');
recipeList.appendChild (rețetăEl);
```
Adăugați un ascultător de evenimente pentru a apela funcția search() atunci când utilizatorul scrie în bara de căutare:
```
searchBox.addEventListener('intrare', eveniment => căutare (event.target.value));
```
În interiorul funcției handleDelete(), ștergeți caseta de căutare dacă utilizatorul șterge un articol, pentru a reîmprospăta lista:
```
searchBox.value = '';
```
Deschideți index.html într-un browser web pentru a vedea noua bară de căutare și adăugați câteva rețete:
Adăugați un nume de rețetă în bara de căutare pentru a filtra lista de rețete:

Realizarea de proiecte cu HTML, CSS și JavaScript

Acest proiect demonstrează cum să construiți o interfață front-end pentru o carte simplă de rețete. Rețineți că nu există un server backend și aplicația nu persistă datele; dacă reîmprospătați pagina, veți pierde modificările. O posibilă extensie la care ați putea lucra este un mecanism de salvare și încărcare a datelor folosind localStorage.

Pentru a vă îmbunătăți abilitățile de dezvoltare web, continuați să explorați alte proiecte distractive pe care le puteți crea pe propriul computer.

About Technology - denizatm.com

Cum se creează o carte de rețete folosind HTML, CSS și JavaScript

Cum să cereți utilizatorului să adauge o nouă rețetă

Cum să afișați rețetele adăugate

${rețetă.nume}</h3>

Cum să ștergeți rețetele

Cum să cauți rețete

${rețetă.nume}</h3>

Realizarea de proiecte cu HTML, CSS și JavaScript

categorii

Recent Post

Cum să creezi bobine animate pentru album de însemnări Instagram cu Photoshop

6 moduri de a remedia eroarea „CHKDSK nu poate continua în modul numai citire” pe Windows

Cum să vizualizați urmăritorii reciproci pe Instagram