Kā izveidot recepšu grāmatu, izmantojot HTML, CSS un JavaScript

Šis projekts palīdzēs jums uzlabot jūsu priekšgala prasmes un iemācīs jums izveidot saskarni, izmantojot tīmekļa pamatstandartus.

Projekti ir lielisks veids, kā uzlabot savas HTML, CSS un JavaScript prasmes un nostiprināt svarīgas koncepcijas un metodes.

Viens projekts, ar kuru varat sākt darbu, ir recepšu grāmata, kuru varat palaist pārlūkprogrammā, piemēram, Google Chrome vai Firefox.

Recepšu grāmatā tīmekļa lapas kreisajā pusē ir sadaļa, kurā lietotājs var pievienot jaunas receptes. Lapas labajā pusē lietotājs var skatīt un meklēt esošās receptes.

Kā lūgt lietotājam pievienot jaunu recepti

Pievienojiet sākotnējo saturu HTML, CSS un JavaScript failiem. Ja neesat pazīstams ar tīmekļa izstrādes koncepcijām, varat to izdarīt daudzās vietās mācīties tīmekļa izstrādi tiešsaistē.

Šeit varat apskatīt arī pilnu recepšu grāmatas piemēru GitHub repo.

Pievienojiet pamata HTML struktūru jaunā HTML failā ar nosaukumu index.html:

html>
<html>
<galvu>
<virsraksts>Recepšu lietotnevirsraksts>
galvu>
<ķermeni>
<nav>
<h1>Recepšu lietotneh1>
nav>
<divklasē="konteiners">
 Saturs šeit 
div>
ķermeni>
html>

instagram viewer

Konteinera klasē sadaliet lapu kreisajā un labajā kolonnā.

<divklasē="kreisā kolonna">div>
<divklasē="labā kolonna">div>

Kreisajā kolonnā pievienojiet veidlapu, lai lietotājs varētu pievienot jaunu recepti. Lietotājs var ievadīt receptes nosaukumu, sastāvdaļu sarakstu un metodi:

<h3>Pievienot receptih3><formā>
<etiķetepriekš="receptes nosaukums">Vārds:etiķete>
<ievadeveids="teksts"id="receptes nosaukums"nepieciešams>
<br />
<etiķetepriekš="receptes sastāvdaļas">Sastāvdaļas:etiķete>
<teksta apgabalsid="receptes sastāvdaļas"rindas="5"nepieciešams>teksta apgabals>
<br />
<etiķetepriekš="recepte-metode">Metode:etiķete>
<teksta apgabalsid="recepte-metode"rindas="5"nepieciešams>teksta apgabals>
<br /><poguveids="Iesniegt">Pievienot receptipogu>
formā>

HTML faila tagā head pievienojiet saiti uz jaunu CSS failu styles.css. Izveidojiet failu tajā pašā mapē, kurā atrodas jūsu HTML fails:
```
<saiterel="stila lapa"href="styles.css">
```

CSS failā pievienojiet vispārīgās lapas stilu:

ķermeni {
fontu ģimene: sans serif;
}nav {
fona krāsa: #333;
pozīciju: fiksēts;
tops: 0;
platums: 100%;
polsterējums: 20px;
pa kreisi: 0;
krāsa: balts;
teksta līdzināšana: centrs;
}
.konteiners {
displejs: flex;
flex-virziens: rinda;
attaisnot-saturs: telpa starp;
starpība: 150px 5%;
}
.kreisā kolonna {
platums: 25%;
}.labā kolonna {
platums: 65%;
}

Pievienojiet dažus stilus Pievienot receptes forma:

formā {
displejs: flex;
flex-virziens: kolonna;
}etiķete {
piemale-apakšā: 10px;
}
ievade[tips="teksts"], teksta apgabals {
polsterējums: 10px;
piemale-apakšā: 10px;
robeža-rādiuss: 5px;
robeža: 1pxciets#ccc;
platums: 100%;
kastes izmēra noteikšana: apmale-box;
}pogu[tips="Iesniegt"] {
polsterējums: 10px;
fona krāsa: #3338;
krāsa: #fff;
robeža: neviens;
robeža-rādiuss: 5px;
kursors: rādītājs;
}

HTML faila pamatteksta taga apakšā pievienojiet saiti uz JavaScript failu ar nosaukumu script.js. Izveidojiet failu tajā pašā mapē:
```
<ķermeni>
 Saturs 
<skriptssrc="script.js">skripts>
ķermeni>
```
Skriptā script.js izmantojiet metodi querySelector, lai šķērso DOM un iegūstiet veidlapas elementu no lapas.
```
konst forma = dokumentu.querySelector('forma');
```
Izveidojiet jaunu masīvu, lai saglabātu receptes, kuras lietotājs ievada veidlapā:
```
ļaut receptes = [];
```

Jaunā funkcijā iegūstiet nosaukumu, sastāvdaļu un metodes laukus, kas ievadīti, izmantojot veidlapu. Varat arī īstenot klienta puses veidlapas validācija lai novērstu nederīgu ievadi vai pārbaudītu, vai recepte jau pastāv.

funkcijurokturisIesniegt(notikumu) {
// Novērst noklusējuma veidlapu iesniegšanas darbību
 event.preventDefault();

// Iegūstiet receptes nosaukumu, sastāvdaļas un metodes ievades vērtības
konst nosaukumsIevade = dokumentu.querySelector("#receptes nosaukums");
konst ingInput = dokumentu.querySelector('#recepte-sastāvdaļas');
konst metodeIevade = dokumentu.querySelector('#recepte-metode');
konst nosaukums = nosaukumsInput.value.trim();
konst sastāvdaļas = ingrInput.value.trim().split(',').map(i => i.trim());
konst metode = metodeInput.value.trim();
}

Ja ievadītie dati ir derīgi, pievienojiet tos recepšu masīvam:

ja (nosaukums && ingredients.length > 0 && metode) {
konst newRecipe = {nosaukums, sastāvdaļas, metode};
 receptes.push (jaunaRecipe);
}

Notīriet veidlapā ievadītos datus:

nameInput.value = '';
ingInput.value = '';
metodeInput.value = '';

Pēc funkcijas handleSubmit() pievienojiet notikumu klausītājs lai izsauktu funkciju, kad lietotājs iesniedz veidlapu:
```
form.addEventListener('Iesniegt', rokturisIesniegt);
```
Pārlūkprogrammā atveriet index.html un skatiet veidlapu kreisajā pusē:

Kā parādīt pievienotās receptes

Recepšu masīvā saglabātās receptes var parādīt lapas labajā pusē.

HTML failā pievienojiet div, lai labajā kolonnā tiktu parādīts recepšu saraksts. Pievienojiet vēl vienu div, lai parādītu ziņojumu, ja receptes nav:
```
<divklasē="labā kolonna">
<divid="recepšu saraksts">div>
<divid="bez receptēm">Jums nav receptes.div>
div>
```

Pievienojiet recepšu sarakstam dažus CSS stilus:

#recepšu saraksts {
displejs: režģis;
režģis-veidne-kolonnas: atkārtojiet(automātiska pielāgošana, minmax(300px, 1fr));
režģa sprauga: 20px;
}#bezreceptes {
displejs: flex;
fona krāsa: #FFCCCC;
polsterējums: 20px;
robeža-rādiuss: 8px;
margin-top: 44px;
}

JavaScript faila augšdaļā iegūstiet HTML elementus, kas tiek izmantoti, lai parādītu recepšu sarakstu un kļūdas ziņojumu:

konst recepšu saraksts = dokumentu.querySelector('#recepšu saraksts');
konst navReceptes = dokumentu.getElementById("bez receptēm");

Jaunā funkcijā pārskatiet katru recepti recepšu masīvā. Katrai receptei izveidojiet jaunu div, lai parādītu šo recepti:

funkcijudisplejsReceptes() {
 recepteList.innerHTML = '';
 receptes.forEach((recepte, rādītājs) => {
konst recepteDiv = dokumentu.createElement("div");
 });
}

Pievienojiet saturu atsevišķai receptei div, lai parādītu nosaukumu, sastāvdaļas un metodi. Divdaļā būs arī dzēšanas poga. Šo funkcionalitāti pievienosit turpmākajās darbībās:

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


<stiprs>Sastāvdaļas:stiprs></p>



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

${recipe.method}</p>

Pievienojiet klasi, lai veidotu div:
```
recepteDiv.classList.add('recepte');
```
Pievienojiet jauno div HTML elementam recipeList:
```
recepteList.appendChild (recipeDiv);
```

Pievienojiet klases stilu CSS failā:

.recepte {
robeža: 1pxciets#ccc;
polsterējums: 10px;
robeža-rādiuss: 5px;
kaste-ēna: 0 2px 4pxrgba(0,0,0,.2);
}.recepteh3 {
margin-top: 0;
piemale-apakšā: 10px;
}
.recepteul {
starpība: 0;
polsterējums: 0;
saraksta stilā: neviens;
}.recepteulli {
piemale-apakšā: 5px;
}

Pārbaudiet, vai ir vairākas receptes. Ja tā, paslēpiet kļūdas ziņojumu:
```
noRecipes.style.display = receptes.length > 0? 'nav': 'flex';
```
Izsauciet jauno funkciju funkcijā handleSubmit() pēc jaunās receptes pievienošanas recepšu masīvam:
```
displejsReceptes();
```
Pārlūkprogrammā atveriet index.html:
Pievienojiet receptes sarakstam un skatieties, kā tās parādās labajā pusē:

Kā izdzēst receptes

Receptes var izdzēst, noklikšķinot uz Dzēst pogu zem receptes norādījumiem.

Pievienojiet dažus CSS stilus dzēšanas pogai:

.Delete-poga {
fona krāsa: #dc3545;
krāsa: #fff;
robeža: neviens;
robeža-rādiuss: 5px;
polsterējums: 5px 10px;
kursors: rādītājs;
}.Delete-poga:virziet kursoru {
fona krāsa: #c82333;
}

JavaScript failā pievienojiet jaunu funkciju, lai dzēstu recepti:
```
funkcijurokturisDzēst(notikumu) {}
```

Izmantojot JavaScript notikumu, atrodiet tās receptes indeksu, uz kuras lietotājs noklikšķināja:

ja (event.target.classList.contains('Delete-button')) {
konst indekss = event.target.dataset.index;
}

Izmantojiet indeksu, lai dzēstu atlasīto recepti no recepšu masīva:
```
receptes.splice (indekss, 1);
```
Atsvaidziniet lapā redzamo recepšu sarakstu:
```
displejsReceptes();
```
Pievienojiet notikumu uztvērēju, lai izsauktu handDelete() funkciju, kad lietotājs noklikšķina uz dzēšanas pogas:
```
recepteList.addEventListener('klikšķis', rokturisDzēst);
```
Pārlūkprogrammā atveriet index.html. Pievienojiet recepti, lai skatītu dzēšanas pogu:

Kā meklēt receptes

Varat meklēt receptes, izmantojot meklēšanas joslu, lai pārbaudītu, vai kāda recepte pastāv.

Labajā kolonnā pirms recepšu saraksta pievienojiet meklēšanas joslu:

<divid="meklēšanas sadaļa">
<h3>Recepšu sarakstsh3>
<etiķetepriekš="meklēšanas lodziņš">Meklēt:etiķete>
<ievadeveids="teksts"id="meklēšanas lodziņš">
div>

Pievienojiet CSS stilu meklēšanas joslas etiķetei:

etiķete[par="meklēšanas lodziņš"] {
displejs: bloķēt;
piemale-apakšā: 10px;
}

Programmā script.js iegūstiet meklēšanas lodziņa HTML elementu:

konst meklēšanas lodziņš = dokumentu.getElementById("meklēšanas lodziņš");

Jaunā funkcijā izveidojiet jaunu masīvu, kurā ir receptes, kuru nosaukums atbilst meklēšanas ievadei:

funkcijuMeklēt(vaicājums) {
konst filteredRecipes = receptes.filter(recepte => {
atgriezties recepte.name.toLowerCase().includes (query.toLowerCase());
 });
}

Notīriet pašlaik ekrānā redzamo recepšu sarakstu:
```
recepteList.innerHTML = '';
```
Pārlūkojiet katru filtrēto recepti, kas atbilst meklēšanas rezultātam, un izveidojiet jaunu div elementu:
```
filteredRecipes.forEach(recepte => {
konst recepteEl = dokumentu.createElement("div"); 
});
```

Pievienojiet filtrētās receptes HTML saturu sadaļai div:

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


<stiprs>Sastāvdaļas:stiprs></p>



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

${recipe.method}</p>

Pievienojiet to pašu recepšu klasi, lai nodrošinātu konsekventu stilu. Pievienojiet jauno div sarakstā parādītajam lapā:
```
recepteEl.classList.add('recepte');
recepteList.appendChild (recipeEl);
```
Pievienojiet notikumu uztvērēju, lai izsauktu meklēšanas () funkciju, kad lietotājs meklēšanas joslā ieraksta:
```
searchBox.addEventListener('ievade', notikums => meklēt (event.target.value));
```
Ja lietotājs izdzēš vienumu, funkcijā handleDelete() notīriet meklēšanas lodziņu, lai atsvaidzinātu sarakstu:
```
searchBox.value = '';
```
Tīmekļa pārlūkprogrammā atveriet index.html, lai skatītu jauno meklēšanas joslu, un pievienojiet dažas receptes:
Pievienojiet receptes nosaukumu meklēšanas joslai, lai filtrētu recepšu sarakstu:

Projektu veidošana, izmantojot HTML, CSS un JavaScript

Šis projekts parāda, kā izveidot priekšgala saskarni vienkāršai recepšu grāmatai. Ņemiet vērā, ka nav aizmugursistēmas servera un lietotne nesaglabā datus; ja atsvaidzināsiet lapu, jūs zaudēsit veiktās izmaiņas. Viens no iespējamiem paplašinājumiem, ar kuru varētu strādāt, ir datu saglabāšanas un ielādes mehānisms, izmantojot vietējo krātuvi.

Lai uzlabotu savas tīmekļa izstrādes prasmes, turpiniet izpētīt citus jautrus projektus, kurus varat izveidot savā datorā.

About Technology - denizatm.com

Kā izveidot recepšu grāmatu, izmantojot HTML, CSS un JavaScript

Kā lūgt lietotājam pievienot jaunu recepti

Kā parādīt pievienotās receptes

${recipe.name}</h3>

Kā izdzēst receptes

Kā meklēt receptes

${recipe.name}</h3>

Projektu veidošana, izmantojot HTML, CSS un JavaScript

Kategorijas

Recent Post

2 jauni iOS 15 Apple maka līdzekļi, lai aizstātu jūsu maku

7 labākie Android pārlūki ar iebūvētu VPN

Kā sākt jebkuru projektu tagad, kad jums tas nepatīk