Hur man skapar en receptbok med HTML, CSS och JavaScript

Det här projektet hjälper dig att finslipa dina front-end-kunskaper och lära dig hur du bygger ett gränssnitt med hjälp av grundläggande webbstandarder.

Projekt är ett utmärkt sätt att förbättra dina HTML-, CSS- och JavaScript-kunskaper och förstärka viktiga koncept och tekniker.

Ett projekt du kan komma igång med är en receptbok, som du kan köra i en webbläsare som Google Chrome eller Firefox.

I receptboken innehåller den vänstra sidan av webbsidan en sektion där användaren kan lägga till nya recept. Till höger på sidan kan användaren se och söka igenom befintliga recept.

Hur man ber användaren att lägga till ett nytt recept

Lägg till det ursprungliga innehållet i HTML-, CSS- och JavaScript-filerna. Om du inte är bekant med webbutvecklingskoncept finns det många ställen där du kan lär dig webbutveckling online.

Du kan också se hela receptbokexemplet i detta GitHub repo.

Lägg till den grundläggande HTML-strukturen i en ny HTML-fil som heter index.html:

html>
<html>
<huvud>
<titel>App för recept




instagram viewer

titel>
huvud>
<kropp>
<nav>
<h1>App för recepth1>
nav>
<divklass="behållare">
 Innehåll här 
div>
kropp>
html>

Inuti behållarklassen delar du upp sidan i en vänsterkolumn och en högerkolumn:
```
<divklass="vänster kolumn">div>
<divklass="höger kolumn">div>
```

I den vänstra kolumnen lägger du till ett formulär där användaren kan lägga till ett nytt recept. Användaren kan ange receptets namn, ingredienslista och metod:

<h3>Lägg till recepth3><form>
<märkaför="receptnamn">Namn:märka>
<inmatningtyp="text"id="receptnamn"nödvändig>
<br />
<märkaför="recept-ingredienser">Ingredienser:märka>
<textområdeid="recept-ingredienser"rader="5"nödvändig>textområde>
<br />
<märkaför="recept-metod">Metod:märka>
<textområdeid="recept-metod"rader="5"nödvändig>textområde>
<br /><knapptyp="Skicka in">Lägg till receptknapp>
form>

Lägg till en länk till en ny CSS-fil som heter styles.css i HTML-filens head-tag. Skapa filen i samma mapp som din HTML-fil:
```
<länkrel="stilmall"href="styles.css">
```

Inuti CSS-filen, lägg till lite stil för den övergripande sidan:

kropp {
typsnittsfamilj: sans serif;
}nav {
bakgrundsfärg: #333;
placera: fast;
topp: 0;
bredd: 100%;
stoppning: 20px;
vänster: 0;
Färg: vit;
textjustera: Centrum;
}
.behållare {
visa: böja;
flex-riktning: rad;
motivera-innehåll: mellanslag;
marginal: 150px 5%;
}
.vänsterkolumn {
bredd: 25%;
}.högerkolumn {
bredd: 65%;
}

Lägg till lite styling för Lägg till recept form:

form {
visa: böja;
flex-riktning: kolumn;
}märka {
marginal-botten: 10px;
}
inmatning[typ="text"], textområde {
stoppning: 10px;
marginal-botten: 10px;
gräns-radie: 5px;
gräns: 1pxfast#ccc;
bredd: 100%;
lådans storlek: border-box;
}knapp[typ="Skicka in"] {
stoppning: 10px;
bakgrundsfärg: #3338;
Färg: #fff;
gräns: ingen;
gräns-radie: 5px;
markören: pekare;
}

Längst ned i body-taggen i din HTML-fil lägger du till en länk till en JavaScript-fil som heter script.js. Skapa filen i samma mapp:
```
<kropp>
 Innehåll 
<manussrc="script.js">manus>
kropp>
```
Inuti script.js använder du metoden querySelector för att korsa DOM och hämta formulärelementet från sidan.
```
konst form = dokumentera.querySelector('form');
```
Skapa en ny array för att lagra recept som användaren anger i formuläret:
```
låta recept = [];
```

I en ny funktion får du namn, ingredienser och metodfält in i formuläret. Du kan också implementera formulärvalidering på klientsidan för att förhindra ogiltiga inmatningar, eller för att kontrollera om ett recept redan finns.

fungerahandleSubmit(händelse) {
// Förhindra standardbeteende för formulärinlämning
 event.preventDefault();

// Få receptnamn, ingredienser och metodinmatningsvärden
konst nameInput = dokumentera.querySelector('#receptnamn');
konst ingrInput = dokumentera.querySelector('#recept-ingredienser');
konst methodInput = dokumentera.querySelector('#recept-metod');
konst name = nameInput.value.trim();
konst ingredienser = ingrInput.value.trim().split(',').Karta(i => i.trim());
konst method = methodInput.value.trim();
}

Om indata är giltiga, lägg till dem i receptmatrisen:

om (namn && ingredienser.längd > 0 && metod) {
konst newRecipe = { namn, ingredienser, metod };
 recept.push (nytt recept);
}

Rensa inmatningarna i formuläret:

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

Efter funktionen handleSubmit() lägger du till en händelselyssnare för att anropa funktionen när användaren skickar formuläret:
```
form.addEventListener('Skicka in', handleSubmit);
```
Öppna index.html i en webbläsare och se formuläret till vänster:

Hur man visar tillagda recept

Du kan visa recepten lagrade i receptarrayen till höger på sidan.

Lägg till en div i HTML-filen för att visa receptlistan i den högra kolumnen. Lägg till ytterligare en div för att visa ett meddelande om det inte finns några recept:
```
<divklass="höger kolumn">
<divid="receptlista">div>
<divid="inga recept">Du har inga recept.div>
div>
```

Lägg till lite CSS-styling för receptlistan:

#receptlista {
visa: rutnät;
rutnät-mall-kolumner: upprepa(automatisk passning, min Max(300px, 1fr));
rutnätsgap: 20px;
}#inga-recept {
visa: böja;
bakgrundsfärg: #FFCCCC;
stoppning: 20px;
gräns-radie: 8px;
marginal-top: 44px;
}

Överst i JavaScript-filen hämtar du HTML-elementen som används för att visa receptlistan och felmeddelandet:

konst receptlista = dokumentera.querySelector('#recept-lista');
konst inga recept = dokumentera.getElementById("inga recept");

Inuti en ny funktion, gå igenom varje recept i receptarrayen. För varje recept, skapa en ny div för att visa det receptet:

fungeravisa recept() {
 recipeList.innerHTML = '';
 recept.förEach((recept, index) => {
konst receptDiv = dokumentera.createElement('div');
 });
}

Lägg till lite innehåll till den individuella recept-div för att visa namn, ingredienser och metod. div kommer också att innehålla en radera-knapp. Du kommer att lägga till den här funktionen i senare steg:

receptDiv.innerHTML = `
${recept.namn}</h3>


<stark>Ingredienser:stark></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).Ansluta sig('')}
 </ul>
<stark>Metod:stark></p>

${recept.metod}</p>

Lägg till en klass för att utforma div: en:
```
receptDiv.classList.add('recept');
```
Lägg till den nya div till HTML-elementet receptList:
```
recipeList.appendChild (recipeDiv);
```

Lägg till stilen för klassen i CSS-filen:

.recept {
gräns: 1pxfast#ccc;
stoppning: 10px;
gräns-radie: 5px;
box-skugga: 0 2px 4pxrgba(0,0,0,.2);
}.recepth3 {
marginal-top: 0;
marginal-botten: 10px;
}
.receptul {
marginal: 0;
stoppning: 0;
liststil: ingen;
}.receptulli {
marginal-botten: 5px;
}

Kontrollera om det finns mer än ett recept. Om så är fallet, dölj felmeddelandet:
```
noRecipes.style.display = recept.längd > 0? 'none': 'flex';
```
Anropa den nya funktionen i handleSubmit()-funktionen efter att ha lagt till det nya receptet i receptarrayen:
```
displayRecept();
```
Öppna index.html i en webbläsare:
Lägg till recept i listan och se dem visas på höger sida:

Hur man tar bort recept

Du kan ta bort recept genom att klicka på Radera knappen under receptets instruktioner.

Lägg till lite CSS-stil för raderingsknappen:

.delete-knapp {
bakgrundsfärg: #dc3545;
Färg: #fff;
gräns: ingen;
gräns-radie: 5px;
stoppning: 5px 10px;
markören: pekare;
}.delete-knapp:sväva {
bakgrundsfärg: #c82333;
}

Lägg till en ny funktion för att ta bort ett recept i JavaScript-filen:
```
fungerahantera Radera(händelse) {}
```

Använd JavaScript-händelsen och hitta indexet för receptet som användaren klickade på:

om (event.target.classList.contains('radera-knapp')) {
konst index = event.target.dataset.index;
}

Använd indexet för att ta bort det valda receptet från receptarrayen:
```
recept.splice (index, 1);
```
Uppdatera listan med recept som visas på sidan:
```
displayRecept();
```
Lägg till en händelseavlyssnare för att anropa handleDelete()-funktionen när användaren klickar på raderingsknappen:
```
recipeList.addEventListener('klick', handleDelete);
```
Öppna index.html i en webbläsare. Lägg till ett recept för att se raderingsknappen:

Hur man söker efter recept

Du kan söka efter recept med hjälp av sökfältet för att kontrollera om ett visst recept finns.

I den högra kolumnen lägger du till ett sökfält före listan med recept:

<divid="söksektion">
<h3>Receptlistah3>
<märkaför="sökruta">Sök:märka>
<inmatningtyp="text"id="sökruta">
div>

Lägg till CSS-stil för sökfältsetiketten:

märka[för="sökruta"] {
visa: blockera;
marginal-botten: 10px;
}

I script.js hämtar du HTML-elementet i sökrutan:

konst sökrutan = dokumentera.getElementById('sökruta');

Inuti en ny funktion skapar du en ny array som innehåller recept vars namn matchar sökinmatningen:

fungeraSök(fråga) {
konst filteredRecipes = recept.filter(recept => {
lämna tillbaka recept.namn.toLowerCase().includes (query.toLowerCase());
 });
}

Rensa listan över recept som för närvarande visas på skärmen:
```
recipeList.innerHTML = '';
```

Gå igenom varje filtrerat recept som matchar sökresultatet och skapa ett nytt div-element:

filteredRecipes.forEach(recept => {
konst receptEl = dokumentera.createElement('div'); 
});

Lägg till HTML-innehållet för det filtrerade receptet till div:

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


<stark>Ingredienser:stark></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).Ansluta sig('')}
 </ul>
<stark>Metod:stark></p>

${recept.metod}</p>

Lägg till samma receptklass för konsekvent styling. Lägg till den nya div i listan som visas på sidan:
```
recipeEl.classList.add('recept');
recipeList.appendChild (receptEl);
```
Lägg till en händelseavlyssnare för att anropa search()-funktionen när användaren skriver i sökfältet:
```
searchBox.addEventListener('inmatning', händelse => sök (event.target.value));
```
Inuti handleDelete()-funktionen, rensa sökrutan om användaren tar bort ett objekt, för att uppdatera listan:
```
searchBox.value = '';
```
Öppna index.html i en webbläsare för att visa det nya sökfältet och lägg till några recept:
Lägg till ett receptnamn i sökfältet för att filtrera receptlistan:

Skapa projekt med HTML, CSS och JavaScript

Detta projekt visar hur man bygger ett front-end-gränssnitt för en enkel receptbok. Observera att det inte finns någon backend-server och att appen inte behåller data; om du uppdaterar sidan förlorar du dina ändringar. En möjlig förlängning du kan arbeta med är en mekanism för att spara och ladda data med hjälp av localStorage.

För att förbättra dina webbutvecklingsfärdigheter, fortsätt att utforska andra roliga projekt som du kan skapa på din egen dator.

About Technology - denizatm.com

Hur man skapar en receptbok med HTML, CSS och JavaScript

Hur man ber användaren att lägga till ett nytt recept

Hur man visar tillagda recept

${recept.namn}</h3>

Hur man tar bort recept

Hur man söker efter recept

${recept.namn}</h3>

Skapa projekt med HTML, CSS och JavaScript

kategorier

Recent Post

8 vanliga misstag som saktar ner din Android-telefon (och vad du ska göra istället)

9 anledningar till att trådbundna hörlurar är bättre än trådlösa hörlurar

De 7 bästa karaokemaskinerna för hemmabruk