Sådan opretter du en opskriftsbog ved hjælp af HTML, CSS og JavaScript

Dette projekt vil hjælpe dig med at finpudse dine frontend-færdigheder og lære dig, hvordan du opbygger en grænseflade ved hjælp af kernewebstandarder.

Projekter er en fantastisk måde at forbedre dine HTML-, CSS- og JavaScript-færdigheder på og forstærke vigtige koncepter og teknikker.

Et projekt du kan komme i gang med er en opskriftsbog, som du kan køre i en browser som Google Chrome eller Firefox.

I opskriftsbogen indeholder venstre side af websiden en sektion, hvor brugeren kan tilføje nye opskrifter. Til højre på siden kan brugeren se og søge i eksisterende opskrifter.

Sådan beder du brugeren om at tilføje en ny opskrift

Tilføj det oprindelige indhold til HTML-, CSS- og JavaScript-filerne. Hvis du ikke er bekendt med webudviklingskoncepter, er der mange steder, hvor du kan lære webudvikling online.

Du kan også se det fulde eksempel på opskriftsbogen her GitHub repo.

Tilføj den grundlæggende HTML-struktur i en ny HTML-fil kaldet index.html:

html>
<html>
<hoved>
<titel>Opskrift apptitel>
hoved>
<legeme>
<nav>
<h1>Opskrift apph1>
nav>
<divklasse="beholder">
 Indhold her 
div>
legeme>
html>

instagram viewer

Inde i containerklassen skal du adskille siden i en venstre kolonne og en højre kolonne:
```
<divklasse="venstre kolonne">div>
<divklasse="højre kolonne">div>
```

Inde i venstre kolonne skal du tilføje en formular, så brugeren kan tilføje en ny opskrift. Brugeren kan indtaste opskriftens navn, ingrediensliste og metode:

<h3>Tilføj opskrifth3><form>
<etikettil="opskrift-navn">Navn:etiket>
<inputtype="tekst"id="opskrift-navn"påkrævet>
<br />
<etikettil="opskrift-ingredienser">Ingredienser:etiket>
<tekstområdeid="opskrift-ingredienser"rækker="5"påkrævet>tekstområde>
<br />
<etikettil="opskrift-metode">Metode:etiket>
<tekstområdeid="opskrift-metode"rækker="5"påkrævet>tekstområde>
<br /><knaptype="Indsend">Tilføj opskriftknap>
form>

Tilføj et link til en ny CSS-fil kaldet styles.css i HTML-filens head-tag. Opret filen i samme mappe som din HTML-fil:
```
<linkrel="stylesheet"href="styles.css">
```

Inden i CSS-filen skal du tilføje lidt styling til den overordnede side:

legeme {
skrifttype-familie: sans serif;
}nav {
baggrundsfarve: #333;
position: fast;
top: 0;
bredde: 100%;
polstring: 20px;
venstre: 0;
farve: hvid;
tekstjustering: centrum;
}
.beholder {
Skærm: bøje;
flex-retning: række;
retfærdiggøre-indhold: mellemrum;
margen: 150px 5%;
}
.venstre kolonne {
bredde: 25%;
}.højre kolonne {
bredde: 65%;
}

Tilføj lidt styling til Tilføj opskrifter form:

form {
Skærm: bøje;
flex-retning: kolonne;
}etiket {
margin-bund: 10px;
}
input[type="tekst"], tekstområde {
polstring: 10px;
margin-bund: 10px;
grænse-radius: 5px;
grænse: 1pxsolid#ccc;
bredde: 100%;
kassestørrelse: grænse-kasse;
}knap[type="Indsend"] {
polstring: 10px;
baggrundsfarve: #3338;
farve: #fff;
grænse: ingen;
grænse-radius: 5px;
cursoren: pointer;
}

I bunden af body-tagget i din HTML-fil skal du tilføje et link til en JavaScript-fil kaldet script.js. Opret filen i samme mappe:
```
<legeme>
 Indhold 
<manuskriptsrc="script.js">manuskript>
legeme>
```
Inde i script.js skal du bruge querySelector-metoden til krydse DOM og få formularelementet fra siden.
```
konst form = dokument.querySelector('form');
```
Opret et nyt array til at gemme opskrifter, som brugeren indtaster i formularen:
```
lade opskrifter = [];
```

I en ny funktion får du indtastet navn, ingredienser og metode via formularen. Du kan også implementere formularvalidering på klientsiden for at forhindre ugyldige input, eller for at kontrollere, om en opskrift allerede eksisterer.

fungerehandleSend(begivenhed) {
// Forhindre standardformularindsendelsesadfærd
 event.preventDefault();

// Få opskriftsnavn, ingredienser og metodeinputværdier
konst nameInput = dokument.querySelector('#opskrift-navn');
konst ingrInput = dokument.querySelector('#opskrift-ingredienser');
konst metodeInput = dokument.querySelector('#opskrift-metode');
konst navn = nameInput.value.trim();
konst ingredienser = ingrInput.value.trim().split(',').kort(jeg => i.trim());
konst metode = methodInput.value.trim();
}

Hvis inputs er gyldige, skal du tilføje dem til opskrifterne:

hvis (navn && ingredienser.længde > 0 && metode) {
konst newRecipe = { navn, ingredienser, metode };
 recipes.push (ny opskrift);
}

Ryd indtastningerne på formularen:

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

Efter handleSubmit()-funktionen skal du tilføje en begivenhedslytter for at kalde funktionen, når brugeren indsender formularen:
```
form.addEventListener('Indsend', handleSubmit);
```
Åbn index.html i en browser og se formularen til venstre:

Sådan viser du tilføjede opskrifter

Du kan vise de opskrifter, der er gemt i opskriftsarrayet til højre på siden.

Tilføj en div i HTML-filen for at vise opskriftslisten i højre kolonne. Tilføj en anden div for at vise en besked, hvis der ikke er nogen opskrifter:
```
<divklasse="højre kolonne">
<divid="opskriftsliste">div>
<divid="ingen opskrifter">Du har ingen opskrifter.div>
div>
```

Tilføj noget CSS-styling til opskriftslisten:

#opskriftsliste {
Skærm: gitter;
gitter-skabelon-kolonner: gentage(auto-tilpasning, minmax(300px, 1fr));
gitter-gab: 20px;
}#ingen opskrifter {
Skærm: bøje;
baggrundsfarve: #FFCCCC;
polstring: 20px;
grænse-radius: 8px;
margin-top: 44px;
}

Øverst i JavaScript-filen får du HTML-elementerne brugt til at vise opskriftslisten og fejlmeddelelsen:

konst opskriftsliste = dokument.querySelector('#opskriftsliste');
konst ingen opskrifter = dokument.getElementById('ingen opskrifter');

Inde i en ny funktion går du gennem hver opskrift i opskriftsarrayet. For hver opskrift skal du oprette en ny div for at vise den opskrift:

fungerevise opskrifter() {
 recipeList.innerHTML = '';
 opskrifter.forHver((opskrift, indeks) => {
konst opskriftDiv = dokument.createElement('div');
 });
}

Tilføj noget indhold til den individuelle opskrifts-div for at vise navn, ingredienser og metode. div'en vil også indeholde en slet-knap. Du vil tilføje denne funktionalitet i senere trin:

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


<stærk>Ingredienser:stærk></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).tilslutte('')}
 </ul>
<stærk>Metode:stærk></p>

${recipe.method}</p>

Tilføj en klasse for at style div'en:
```
recipeDiv.classList.add('opskrift');
```
Føj den nye div til HTML-elementet recipeList:
```
recipeList.appendChild (recipeDiv);
```

Tilføj stilen for klassen i CSS-filen:

.opskrift {
grænse: 1pxsolid#ccc;
polstring: 10px;
grænse-radius: 5px;
kasse-skygge: 0 2px 4pxrgba(0,0,0,.2);
}.opskrifth3 {
margin-top: 0;
margin-bund: 10px;
}
.opskriftul {
margen: 0;
polstring: 0;
liste-stil: ingen;
}.opskriftulli {
margin-bund: 5px;
}

Tjek om der er mere end én opskrift. Hvis ja, skjul fejlmeddelelsen:
```
noRecipes.style.display = recipes.length > 0? 'none': 'flex';
```
Kald den nye funktion inde i handleSubmit()-funktionen, efter at have tilføjet den nye opskrift til opskriftsarrayet:
```
displayRecipes();
```
Åbn index.html i en browser:
Tilføj opskrifter til listen, og se dem vises i højre side:

Sådan sletter du opskrifter

Du kan slette opskrifter ved at klikke på Slet knappen under en opskrifts vejledning.

Tilføj noget CSS-stil til sletknappen:

.delete-knap {
baggrundsfarve: #dc3545;
farve: #fff;
grænse: ingen;
grænse-radius: 5px;
polstring: 5px 10px;
cursoren: pointer;
}.delete-knap:hover {
baggrundsfarve: #c82333;
}

Tilføj en ny funktion i JavaScript-filen for at slette en opskrift:
```
fungerehandleSlet(begivenhed) {}
```

Brug JavaScript-hændelsen til at finde indekset for opskriften, som brugeren klikkede på:

hvis (event.target.classList.contains('slet-knap')) {
konst indeks = begivenhed.mål.datasæt.indeks;
}

Brug indekset til at slette den valgte opskrift fra opskriftsarrayet:
```
recipes.splice (indeks, 1);
```
Opdater listen over opskrifter vist på siden:
```
displayRecipes();
```
Tilføj en begivenhedslytter for at kalde handleDelete()-funktionen, når brugeren klikker på sletteknappen:
```
recipeList.addEventListener('klik', handleDelete);
```
Åbn index.html i en browser. Tilføj en opskrift for at se sletknappen:

Sådan søger du efter opskrifter

Du kan søge efter opskrifter ved hjælp af søgelinjen for at kontrollere, om en bestemt opskrift findes.

Tilføj en søgelinje før listen over opskrifter inde i højre kolonne:

<divid="søge-sektion">
<h3>Liste over opskrifterh3>
<etikettil="søgeboks">Søg:etiket>
<inputtype="tekst"id="søgeboks">
div>

Tilføj CSS-stil til søgefeltets etiket:

etiket[for="søgeboks"] {
Skærm: blok;
margin-bund: 10px;
}

Hent HTML-elementet i søgefeltet i script.js:

konst søgefelt = dokument.getElementById('søgeboks');

Inde i en ny funktion skal du oprette et nyt array, der indeholder opskrifter, hvis navn matcher søgeinputtet:

fungereSøg(forespørgsel) {
konst filteredRecipes = opskrifter.filter(opskrift => {
Vend tilbage recipe.name.toLowerCase().includes (query.toLowerCase());
 });
}

Ryd listen over opskrifter, der aktuelt vises på skærmen:
```
recipeList.innerHTML = '';
```

Gå gennem hver filtreret opskrift, der matcher søgeresultatet, og opret et nyt div-element:

filteredRecipes.forEach(opskrift => {
konst opskriftEl = dokument.createElement('div'); 
});

Tilføj HTML-indholdet for den filtrerede opskrift til div:

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


<stærk>Ingredienser:stærk></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).tilslutte('')}
 </ul>
<stærk>Metode:stærk></p>

${recipe.method}</p>

Tilføj den samme opskriftsklasse for ensartet styling. Tilføj den nye div til listen vist på siden:
```
recipeEl.classList.add('opskrift');
recipeList.appendChild (opskriftEl);
```
Tilføj en begivenhedslytter for at kalde funktionen search() når brugeren indtaster i søgefeltet:
```
searchBox.addEventListener('input', hændelse => søg (event.target.value));
```
Ryd søgefeltet inde i handleDelete()-funktionen, hvis brugeren sletter et element, for at opdatere listen:
```
searchBox.value = '';
```
Åbn index.html i en webbrowser for at se den nye søgelinje, og tilføj nogle opskrifter:
Tilføj et opskriftsnavn i søgefeltet for at filtrere opskriftslisten:

Lav projekter med HTML, CSS og JavaScript

Dette projekt demonstrerer, hvordan man bygger en front-end-grænseflade til en simpel opskriftsbog. Bemærk, at der ikke er nogen backend-server, og appen bevarer ikke data; hvis du opdaterer siden, mister du dine ændringer. En mulig udvidelse, du kan arbejde på, er en mekanisme til at gemme og indlæse data ved hjælp af localStorage.

For at forbedre dine webudviklingsfærdigheder, fortsæt med at udforske andre sjove projekter, du kan oprette på din egen computer.

About Technology - denizatm.com

Sådan opretter du en opskriftsbog ved hjælp af HTML, CSS og JavaScript

Sådan beder du brugeren om at tilføje en ny opskrift

Sådan viser du tilføjede opskrifter

${recipe.name}</h3>

Sådan sletter du opskrifter

Sådan søger du efter opskrifter

${recipe.name}</h3>

Lav projekter med HTML, CSS og JavaScript

kategorier

Recent Post

Sådan bruges Snapchats Snap -kort til at finde steder, der er et besøg værd

Disse 5 Mac -apps kan hjælpe dig med at slette og rense andre uønskede apps

De 6 bedste Mac -rengørings- og optimeringsapps