Kaip sukurti receptų knygą naudojant HTML, CSS ir JavaScript

Šis projektas padės patobulinti jūsų sąsajos įgūdžius ir išmokys sukurti sąsają naudojant pagrindinius žiniatinklio standartus.

Projektai yra puikus būdas tobulinti HTML, CSS ir JavaScript įgūdžius bei sustiprinti svarbias koncepcijas ir metodus.

Vienas projektas, kurį galite pradėti, yra receptų knyga, kurią galite paleisti naršyklėje, pvz., „Google Chrome“ arba „Firefox“.

Receptų knygelės kairėje tinklalapio pusėje yra skyrius, kuriame vartotojas gali pridėti naujų receptų. Puslapio dešinėje vartotojas gali peržiūrėti esamus receptus ir juose ieškoti.

Kaip paprašyti vartotojo pridėti naują receptą

Pridėkite pradinį turinį prie HTML, CSS ir JavaScript failų. Jei nesate susipažinę su žiniatinklio kūrimo koncepcijomis, yra daug vietų, kur galite tai padaryti išmokti kurti interneto svetainę internete.

Taip pat galite peržiūrėti visą receptų knygos pavyzdį „GitHub“ atpirkimas.

Pridėkite pagrindinę HTML struktūrą naujame HTML faile, pavadintame index.html:

html>
<html>
<galva>
<titulą>Recepto programa




instagram viewer

titulą>
galva>
<kūnas>
<nav>
<h1>Recepto programah1>
nav>
<divklasė="konteineris">
 Turinys čia 
div>
kūnas>
html>

Sudėtinio rodinio klasėje atskirkite puslapį į kairįjį ir dešinįjį stulpelius:
```
<divklasė="kairysis stulpelis">div>
<divklasė="dešinysis stulpelis">div>
```

Kairiajame stulpelyje pridėkite formą, kad vartotojas galėtų pridėti naują receptą. Vartotojas gali įvesti recepto pavadinimą, ingredientų sąrašą ir metodą:

<h3>Pridėti receptąh3><forma>
<etiketėdėl="recepto pavadinimas">Vardas:etiketė>
<įvestistipo="tekstas"id="recepto pavadinimas"reikalaujama>
<br />
<etiketėdėl="recepto ingredientai">Ingridientai:etiketė>
<teksto sritisid="recepto ingredientai"eilučių="5"reikalaujama>teksto sritis>
<br />
<etiketėdėl="receptas-metodas">Metodas:etiketė>
<teksto sritisid="receptas-metodas"eilučių="5"reikalaujama>teksto sritis>
<br /><mygtukątipo="Pateikti">Pridėti receptąmygtuką>
forma>

HTML failo antraštėje pridėkite nuorodą į naują CSS failą, pavadintą styles.css. Sukurkite failą tame pačiame aplanke kaip ir HTML failas:
```
<nuorodarel="stiliaus lapas"href="styles.css">
```

CSS faile pridėkite tam tikrą viso puslapio stilių:

kūnas {
šrifto šeima: be serifo;
}nav {
fono spalva: #333;
padėtis: fiksuotas;
viršuje: 0;
plotis: 100%;
kamšalas: 20px;
paliko: 0;
spalva: baltas;
teksto lygiavimas: centras;
}
.konteineris {
ekranas: lankstus;
lankstumo kryptis: eilė;
pateisinti-turinys: tarpas-tarp;
marža: 150px 5%;
}
.kairysis stulpelis {
plotis: 25%;
}.dešinysis stulpelis {
plotis: 65%;
}

Pridėkite šiek tiek stiliaus Pridėti receptus forma:

forma {
ekranas: lankstus;
lankstumo kryptis: stulpelyje;
}etiketė {
paraštė-apačia: 10px;
}
įvestis[tipas="tekstas"], teksto sritis {
kamšalas: 10px;
paraštė-apačia: 10px;
pasienio spindulys: 5px;
siena: 1pxkietas#ccc;
plotis: 100%;
dėžutės dydžio: kraštinė-dėžė;
}mygtuką[tipas="Pateikti"] {
kamšalas: 10px;
fono spalva: #3338;
spalva: #fff;
siena: nė vienas;
pasienio spindulys: 5px;
žymeklį: rodyklė;
}

HTML failo turinio žymos apačioje pridėkite nuorodą į „JavaScript“ failą, vadinamą script.js. Sukurkite failą tame pačiame aplanke:
```
<kūnas>
 Turinys 
<scenarijussrc="script.js">scenarijus>
kūnas>
```
Skripte script.js naudokite metodą querySelector, kad kirsti DOM ir gaukite formos elementą iš puslapio.
```
konst forma = dokumentas.querySelector('forma');
```
Sukurkite naują masyvą receptams, kuriuos vartotojas įveda į formą, saugoti:
```
leisti receptai = [];
```

Naujoje funkcijoje gaukite pavadinimo, ingredientų ir metodo laukus, įvestus per formą. Taip pat galite įgyvendinti kliento pusės formos patvirtinimas kad išvengtumėte neteisingų įvesties arba patikrintumėte, ar receptas jau egzistuoja.

funkcijarankenaPateikti(įvykis) {
// Užkirsti kelią numatytosioms formos pateikimo elgsenai
 event.preventDefault();

// Gaukite recepto pavadinimą, ingredientus ir metodo įvesties reikšmes
konst pavadinimasĮvestis = dokumentas.querySelector('#recepto pavadinimas');
konst ingInput = dokumentas.querySelector('#receptas-ingredientai');
konst metodasĮvestis = dokumentas.querySelector('#receptas-metodas');
konst vardas = pavadinimasInput.value.trim();
konst ingredientai = ingrInput.value.trim().split(','.map(i => i.trim());
konst metodas = metodasInput.value.trim();
}

Jei įvestis galioja, pridėkite juos prie receptų masyvo:

jeigu (pavadinimas ir ingredientai.ilgis > 0 && metodas) {
konst newRecipe = {pavadinimas, ingredientai, metodas};
 receptai.push (newRecipe);
}

Išvalykite formos įvestis:

pavadinimasInput.value = '';
ingInput.value = '';
methodInput.value = '';

Po HandSubmit() funkcijos pridėkite įvykių klausytojas iškviesti funkciją, kai vartotojas pateikia formą:
```
form.addEventListener('Pateikti', rankenaPateikti);
```
Naršyklėje atidarykite index.html ir peržiūrėkite formą kairėje:

Kaip parodyti pridėtus receptus

Dešinėje puslapio pusėje galite rodyti receptų masyve saugomus receptus.

HTML faile pridėkite div, kad dešiniajame stulpelyje būtų rodomas receptų sąrašas. Jei receptų nėra, pridėkite kitą div, kad būtų rodomas pranešimas:
```
<divklasė="dešinysis stulpelis">
<divid="receptų sąrašas">div>
<divid="be receptų">Jūs neturite receptų.div>
div>
```

Receptų sąraše pridėkite šiek tiek CSS stiliaus:

#receptų sąrašas {
ekranas: tinklelis;
tinklelis-šablonas-stulpeliai: kartoti(automatinis pritaikymas, minmax(300px, 1fr));
tinklelis-tarpelis: 20px;
}#be receptų {
ekranas: lankstus;
fono spalva: #FFCCCC;
kamšalas: 20px;
pasienio spindulys: 8px;
paraštė-viršus: 44px;
}

„JavaScript“ failo viršuje gaukite HTML elementus, naudojamus receptų sąrašui ir klaidos pranešimui rodyti:

konst receptų sąrašas = dokumentas.querySelector('#receptų sąrašas');
konst noReceptų = dokumentas.getElementById("be receptų");

Naujoje funkcijoje peržiūrėkite kiekvieną receptą receptų masyve. Kiekvienam receptui sukurkite naują div, kad būtų rodomas tas receptas:

funkcijarodytiReceptai() {
 receptų sąrašas.innerHTML = '';
 receptai.forEach((receptas, rodyklė) => {
konst receptasDiv = dokumentas.createElement("div");
 });
}

Pridėkite šiek tiek turinio prie atskiro recepto div, kad būtų rodomas pavadinimas, ingredientai ir metodas. Dalyje taip pat bus trynimo mygtukas. Šią funkciją pridėsite vėlesniais veiksmais:

receptasDiv.innerHTML = `
${receptas.pavadinimas}</h3>


<stiprus>Ingridientai:stiprus></p>



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

${recipe.method}</p>

Pridėkite klasę, kad sukurtumėte div stilių:
```
receptasDiv.classList.add('receptas');
```
Pridėti naują div prie receptų sąrašo HTML elemento:
```
receptų sąrašas.appendChild (recipeDiv);
```

Pridėkite klasės stilių CSS faile:

.receptas {
siena: 1pxkietas#ccc;
kamšalas: 10px;
pasienio spindulys: 5px;
dėžutė-šešėlis: 0 2px 4pxrgba(0,0,0,.2);
}.receptash3 {
paraštė-viršus: 0;
paraštė-apačia: 10px;
}
.receptasul {
marža: 0;
kamšalas: 0;
sąrašo stiliaus: nė vienas;
}.receptasulli {
paraštė-apačia: 5px;
}

Patikrinkite, ar yra daugiau nei vienas receptas. Jei taip, paslėpkite klaidos pranešimą:
```
noRecipes.style.display = receptai.ilgis > 0? 'nėra': 'flex';
```
Įtraukę naują receptą į receptų masyvą, iškvieskite naują funkciją HandSubmit() funkcijoje:
```
rodytiReceptai();
```
Atidarykite index.html naršyklėje:
Įtraukite receptus į sąrašą ir žiūrėkite, kaip jie bus rodomi dešinėje:

Kaip ištrinti receptus

Receptus galite ištrinti spustelėdami Ištrinti mygtuką, esantį po recepto instrukcijomis.

Pridėkite tam tikrą ištrynimo mygtuko CSS stilių:

.Delete-mygtukas {
fono spalva: #dc3545;
spalva: #fff;
siena: nė vienas;
pasienio spindulys: 5px;
kamšalas: 5px 10px;
žymeklį: rodyklė;
}.Delete-mygtukas:užveskite pelės žymeklį {
fono spalva: #c82333;
}

„JavaScript“ faile pridėkite naują funkciją, kad ištrintumėte receptą:
```
funkcijarankenaIštrinti(įvykis) {}
```

Naudodami „JavaScript“ įvykį suraskite recepto, kurį vartotojas spustelėjo, rodyklę:

jeigu (event.target.classList.contains("ištrynimo mygtukas")) {
konst indeksas = event.target.dataset.index;
}

Norėdami ištrinti pasirinktą receptą iš receptų masyvo, naudokite rodyklę:
```
receptai.sujungimas (indeksas, 1);
```
Atnaujinkite puslapyje rodomą receptų sąrašą:
```
rodytiReceptai();
```
Pridėkite įvykių klausytoją, kad iškviestumėte handDelete() funkciją, kai vartotojas spustelėja trynimo mygtuką:
```
receptų sąrašas.addEventListener('spustelėkite', rankenaIštrinti);
```
Naršyklėje atidarykite index.html. Pridėkite receptą, kad pamatytumėte ištrynimo mygtuką:

Kaip ieškoti receptų

Galite ieškoti receptų naudodami paieškos juostą, kad patikrintumėte, ar yra tam tikras receptas.

Dešiniajame stulpelyje prieš receptų sąrašą pridėkite paieškos juostą:

<divid="paieškos skyrius">
<h3>Receptų sąrašash3>
<etiketėdėl="paieškos laukelis">Paieška:etiketė>
<įvestistipo="tekstas"id="paieškos laukelis">
div>

Pridėti paieškos juostos etiketės CSS stilių:

etiketė[už="paieškos laukelis"] {
ekranas: blokas;
paraštė-apačia: 10px;
}

Skripte script.js gaukite paieškos laukelio HTML elementą:

konst paieškos laukelis = dokumentas.getElementById('paieškos laukelis');

Naujoje funkcijoje sukurkite naują masyvą, kuriame yra receptai, kurių pavadinimas atitinka paieškos įvestį:

funkcijaPaieška(užklausą) {
konst filteredRecipes = receptai.filter(receptas => {
grąžinti receptas.vardas.toLowerCase().includes (query.toLowerCase());
 });
}

Išvalykite šiuo metu ekrane rodomų receptų sąrašą:
```
receptų sąrašas.innerHTML = '';
```
Peržiūrėkite kiekvieną filtruotą receptą, atitinkantį paieškos rezultatą, ir sukurkite naują div elementą:
```
filteredRecipes.forEach(receptas => {
konst receptasEl = dokumentas.createElement("div"); 
});
```

Pridėkite filtruoto recepto HTML turinį į div:

receptasEl.innerHTML = `
${receptas.pavadinimas}</h3>


<stiprus>Ingridientai:stiprus></p>



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

${recipe.method}</p>

Pridėkite tą pačią receptų klasę, kad sukurtumėte nuoseklų stilių. Pridėkite naują div prie sąrašo, rodomo puslapyje:
```
receptasEl.classList.add('receptas');
receptų sąrašas.appendChild (recipeEl);
```
Pridėkite įvykių klausytoją, kad iškviestumėte paieškos () funkciją, kai vartotojas įveda paieškos juostoje:
```
searchBox.addEventListener("įvestis", įvykis => paieška (event.target.value));
```
Jei vartotojas ištrina elementą, funkcijoje handleDelete() išvalykite paieškos laukelį, kad atnaujintumėte sąrašą:
```
searchBox.value = '';
```
Atidarykite index.html žiniatinklio naršyklėje, kad peržiūrėtumėte naują paieškos juostą ir pridėkite keletą receptų:
Pridėkite recepto pavadinimą į paieškos juostą, kad filtruotumėte receptų sąrašą:

Projektų kūrimas naudojant HTML, CSS ir JavaScript

Šis projektas parodo, kaip sukurti sąsają paprastai receptų knygai. Atminkite, kad nėra užpakalinio serverio ir programa neišsaugo duomenų; jei atnaujinsite puslapį, prarasite pakeitimus. Vienas iš galimų plėtinių, su kuriais galėtumėte dirbti, yra duomenų išsaugojimo ir įkėlimo mechanizmas naudojant „localStorage“.

Norėdami pagerinti žiniatinklio kūrimo įgūdžius, toliau tyrinėkite kitus įdomius projektus, kuriuos galite sukurti savo kompiuteryje.

About Technology - denizatm.com

Kaip sukurti receptų knygą naudojant HTML, CSS ir JavaScript

Kaip paprašyti vartotojo pridėti naują receptą

Kaip parodyti pridėtus receptus

${receptas.pavadinimas}</h3>

Kaip ištrinti receptus

Kaip ieškoti receptų

${receptas.pavadinimas}</h3>

Projektų kūrimas naudojant HTML, CSS ir JavaScript

Kategorijos

Recent Post

4 Internetinių dienoraščių „Windows Live Writer“ alternatyvos

5 svetainės, kuriose galite lengvai pradėti savo tinklaraštį naudodami „Evernote“, „Trello“ ar „WordPress“

„Yummly“ leidžia jums dalintis receptais tiesiog sakydami „Yum“