Hvordan lage en oppskriftsbok ved hjelp av HTML, CSS og JavaScript

Dette prosjektet vil hjelpe deg med å finpusse ferdighetene dine i front-end og lære deg hvordan du bygger et grensesnitt ved å bruke kjernewebstandarder.

Prosjekter er en fin måte å forbedre HTML-, CSS- og JavaScript-ferdighetene dine på, og forsterke viktige konsepter og teknikker.

Et prosjekt du kan komme i gang med er en oppskriftsbok, som du kan kjøre i en nettleser som Google Chrome eller Firefox.

I oppskriftsboken inneholder venstre side av nettsiden en seksjon der brukeren kan legge til nye oppskrifter. Til høyre på siden kan brukeren se og søke gjennom eksisterende oppskrifter.

Hvordan be brukeren legge til en ny oppskrift

Legg til det første innholdet i HTML-, CSS- og JavaScript-filene. Hvis du ikke er kjent med webutviklingskonsepter, er det mange steder du kan lære webutvikling online.

Du kan også se hele oppskriftsbokeksemplet i denne GitHub repo.

Legg til den grunnleggende HTML-strukturen i en ny HTML-fil kalt index.html:

html>
<html>
<hode>
<tittel>Oppskrift Apptittel>
hode>
<kropp>
<nav>
<h1>Oppskrift Apph1>
nav>
<divklasse="container">
 Innhold her 
div>
kropp>
html>

instagram viewer

Inne i beholderklassen deler du siden i en venstre kolonne og en høyre kolonne:
```
<divklasse="venstre kolonne">div>
<divklasse="høyre kolonne">div>
```

Inne i venstre kolonne legger du til et skjema der brukeren kan legge til en ny oppskrift. Brukeren kan skrive inn oppskriftens navn, ingrediensliste og metode:

<h3>Legg til oppskrifth3><form>
<merkelapptil="oppskriftsnavn">Navn:merkelapp>
<inputtype="tekst"id="oppskriftsnavn"nødvendig>
<br />
<merkelapptil="oppskriftsingredienser">Ingredienser:merkelapp>
<tekstområdeid="oppskriftsingredienser"rader="5"nødvendig>tekstområde>
<br />
<merkelapptil="oppskriftsmetode">Metode:merkelapp>
<tekstområdeid="oppskriftsmetode"rader="5"nødvendig>tekstområde>
<br /><knapptype="sende inn">Legg til oppskriftknapp>
form>

I head-taggen til HTML-filen legger du til en lenke til en ny CSS-fil kalt styles.css. Opprett filen i samme mappe som HTML-filen din:
```
<linkrel="stilark"href="styles.css">
```

Inne i CSS-filen, legg til litt styling for den generelle siden:

kropp {
font-familie: sans serif;
}nav {
bakgrunnsfarge: #333;
posisjon: fikset;
topp: 0;
bredde: 100%;
polstring: 20px;
venstre: 0;
farge: hvit;
tekstjustering: senter;
}
.container {
vise: bøye seg;
flex-retning: rad;
rettferdiggjøre-innhold: mellomrom;
margin: 150px 5%;
}
.venstre kolonne {
bredde: 25%;
}.høyre kolonne {
bredde: 65%;
}

Legg til litt styling for Legg til oppskrifter form:

form {
vise: bøye seg;
flex-retning: kolonne;
}merkelapp {
marg-bunn: 10px;
}
input[type="tekst"], tekstområde {
polstring: 10px;
marg-bunn: 10px;
grense-radius: 5px;
grense: 1pxfast#ccc;
bredde: 100%;
boksstørrelse: kantboks;
}knapp[type="sende inn"] {
polstring: 10px;
bakgrunnsfarge: #3338;
farge: #fff;
grense: ingen;
grense-radius: 5px;
markøren: pekeren;
}

Legg til en lenke til en JavaScript-fil som heter script.js nederst i body-taggen i HTML-filen. Lag filen i samme mappe:
```
<kropp>
 Innhold 
<manussrc="script.js">manus>
kropp>
```
Inne i script.js bruker du querySelector-metoden for å krysse DOM og få skjemaelementet fra siden.
```
konst form = dokument.querySelector('form');
```
Opprett en ny matrise for å lagre oppskrifter som brukeren skriver inn i skjemaet:
```
la oppskrifter = [];
```

I en ny funksjon får du lagt inn navn, ingredienser og metodefelt via skjemaet. Du kan også implementere skjemavalidering på klientsiden for å forhindre ugyldige inndata, eller for å sjekke om en oppskrift allerede eksisterer.

funksjonhandleSend inn(begivenhet) {
// Forhindre standard oppførsel for skjemainnsending
 event.preventDefault();

// Få oppskriftsnavn, ingredienser og metodeinndataverdier
konst nameInput = dokument.querySelector('#oppskriftsnavn');
konst ingrInput = dokument.querySelector('#recipe-ingredients');
konst methodInput = dokument.querySelector('#oppskriftsmetode');
konst navn = nameInput.value.trim();
konst ingredienser = ingrInput.value.trim().split(',').kart(Jeg => i.trim());
konst metode = methodInput.value.trim();
}

Hvis inndataene er gyldige, legg dem til i oppskriftene:

hvis (navn && ingredienser.lengde > 0 && metode) {
konst nyoppskrift = { navn, ingredienser, metode };
 recipes.push (ny oppskrift);
}

Fjern inndataene på skjemaet:

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

Etter funksjonen handleSubmit() legger du til en hendelseslytter for å kalle opp funksjonen når brukeren sender inn skjemaet:
```
form.addEventListener('sende inn', handleSubmit);
```
Åpne index.html i en nettleser og se skjemaet til venstre:

Slik viser du lagt til oppskrifter

Du kan vise oppskriftene som er lagret i oppskriften til høyre på siden.

I HTML-filen legger du til en div for å vise oppskriftslisten i høyre kolonne. Legg til en annen div for å vise en melding hvis det ikke er noen oppskrifter:
```
<divklasse="høyre kolonne">
<divid="oppskriftsliste">div>
<divid="ingen oppskrifter">Du har ingen oppskrifter.div>
div>
```

Legg til litt CSS-styling for oppskriftslisten:

#oppskriftsliste {
vise: Nett;
rutenett-mal-kolonner: gjenta(automatisk tilpasning, minmax(300px, 1fr));
rutenett-gap: 20px;
}#ingen-oppskrifter {
vise: bøye seg;
bakgrunnsfarge: #FFCCCC;
polstring: 20px;
grense-radius: 8px;
margin-topp: 44px;
}

Øverst i JavaScript-filen får du HTML-elementene som brukes til å vise oppskriftslisten og feilmeldingen:

konst oppskriftsliste = dokument.querySelector('#oppskriftsliste');
konst ingen oppskrifter = dokument.getElementById("ingen oppskrifter");

Inne i en ny funksjon går du gjennom hver oppskrift i oppskriftsarrayet. For hver oppskrift oppretter du en ny div for å vise den oppskriften:

funksjonvise oppskrifter() {
 recipeList.innerHTML = '';
 recipes.forEach((oppskrift, indeks) => {
konst oppskriftDiv = dokument.createElement('div');
 });
}

Legg til noe innhold til den individuelle oppskriftsdiv for å vise navn, ingredienser og metode. Div-en vil også inneholde en sletteknapp. Du vil legge til denne funksjonaliteten i senere trinn:

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


<sterk>Ingredienser:sterk></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).bli med('')}
 </ul>
<sterk>Metode:sterk></p>

${recipe.method}</p>

Legg til en klasse for å style div:
```
recipeDiv.classList.add('oppskrift');
```
Legg til den nye div til HTML-elementet recipeList:
```
recipeList.appendChild (recipeDiv);
```

Legg til stilen for klassen i CSS-filen:

.oppskrift {
grense: 1pxfast#ccc;
polstring: 10px;
grense-radius: 5px;
boks-skygge: 0 2px 4pxrgba(0,0,0,.2);
}.oppskrifth3 {
margin-topp: 0;
marg-bunn: 10px;
}
.oppskriftul {
margin: 0;
polstring: 0;
liste-stil: ingen;
}.oppskriftulli {
marg-bunn: 5px;
}

Sjekk om det er mer enn én oppskrift. Skjul i så fall feilmeldingen:
```
noRecipes.style.display = recipes.length > 0? 'none': 'flex';
```
Kall den nye funksjonen inne i handleSubmit()-funksjonen, etter å ha lagt til den nye oppskriften i reseptarrayen:
```
displayRecipes();
```
Åpne index.html i en nettleser:
Legg til oppskrifter i listen og se dem vises på høyre side:

Slik sletter du oppskrifter

Du kan slette oppskrifter ved å klikke på Slett knappen under instruksjonene for en oppskrift.

Legg til litt CSS-stil for sletteknappen:

.delete-knapp {
bakgrunnsfarge: #dc3545;
farge: #fff;
grense: ingen;
grense-radius: 5px;
polstring: 5px 10px;
markøren: pekeren;
}.delete-knapp:sveve {
bakgrunnsfarge: #c82333;
}

I JavaScript-filen legger du til en ny funksjon for å slette en oppskrift:
```
funksjonhandleSlett(begivenhet) {}
```

Bruk JavaScript-hendelsen til å finne indeksen til oppskriften som brukeren klikket på:

hvis (event.target.classList.contains('slett-knapp')) {
konst indeks = event.target.dataset.index;
}

Bruk indeksen for å slette den valgte oppskriften fra oppskriftene:
```
recipes.splice (indeks, 1);
```
Oppdater listen over oppskrifter som vises på siden:
```
displayRecipes();
```
Legg til en hendelseslytter for å kalle handleDelete()-funksjonen når brukeren klikker på sletteknappen:
```
recipeList.addEventListener('klikk', handleDelete);
```
Åpne index.html i en nettleser. Legg til en oppskrift for å se sletteknappen:

Hvordan søke etter oppskrifter

Du kan søke etter oppskrifter ved å bruke søkefeltet for å sjekke om en bestemt oppskrift finnes.

Inne i høyre kolonne legger du til en søkelinje før listen over oppskrifter:

<divid="søk-seksjon">
<h3>Liste over oppskrifterh3>
<merkelapptil="søkefelt">Søk:merkelapp>
<inputtype="tekst"id="søkefelt">
div>

Legg til CSS-stil for søkefeltetiketten:

merkelapp[for="søkefelt"] {
vise: blokkere;
marg-bunn: 10px;
}

I script.js får du HTML-elementet i søkeboksen:

konst søkeboks = dokument.getElementById('søkefelt');

Inne i en ny funksjon, lag en ny matrise som inneholder oppskrifter hvis navn samsvarer med søkeinndata:

funksjonSøk(spørsmål) {
konst filteredRecipes = recipes.filter(oppskrift => {
komme tilbake recipe.name.toLowerCase().includes (query.toLowerCase());
 });
}

Tøm listen over oppskrifter som vises på skjermen for øyeblikket:
```
recipeList.innerHTML = '';
```
Gå gjennom hver filtrerte oppskrift som samsvarer med søkeresultatet, og lag et nytt div-element:
```
filteredRecipes.forEach(oppskrift => {
konst oppskriftEl = dokument.createElement('div'); 
});
```

Legg til HTML-innholdet for den filtrerte oppskriften til div:

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


<sterk>Ingredienser:sterk></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).bli med('')}
 </ul>
<sterk>Metode:sterk></p>

${recipe.method}</p>

Legg til samme oppskriftsklasse for konsistent styling. Legg til den nye div til listen som vises på siden:
```
recipeEl.classList.add('oppskrift');
recipeList.appendChild (recipeEl);
```
Legg til en hendelseslytter for å kalle søke()-funksjonen når brukeren skriver inn i søkefeltet:
```
searchBox.addEventListener('inngang', hendelse => søk (event.target.value));
```
Inne i handleDelete()-funksjonen, fjern søkeboksen hvis brukeren sletter et element, for å oppdatere listen:
```
searchBox.value = '';
```
Åpne index.html i en nettleser for å se den nye søkelinjen, og legg til noen oppskrifter:
Legg til et oppskriftsnavn i søkefeltet for å filtrere oppskriftslisten:

Lage prosjekter med HTML, CSS og JavaScript

Dette prosjektet viser hvordan du bygger et grensesnitt for en enkel oppskriftsbok. Merk at det ikke er noen backend-server og at appen ikke vedvarer data; hvis du oppdaterer siden, mister du endringene. En mulig utvidelse du kan jobbe med er en mekanisme for å lagre og laste data ved hjelp av localStorage.

For å forbedre ferdighetene dine i nettutvikling, fortsett å utforske andre morsomme prosjekter du kan lage på din egen datamaskin.

About Technology - denizatm.com

Hvordan lage en oppskriftsbok ved hjelp av HTML, CSS og JavaScript

Hvordan be brukeren legge til en ny oppskrift

Slik viser du lagt til oppskrifter

${recipe.name}</h3>

Slik sletter du oppskrifter

Hvordan søke etter oppskrifter

${recipe.name}</h3>

Lage prosjekter med HTML, CSS og JavaScript

kategorier

Recent Post

Sett opp en talemelding for bloggen din med VoiceMeMe

5 måter å vise bringebær-pi på en skjerm eller TV

Philips Hue Starter Kit Review and Giveaway