Kuidas luua retseptiraamatut HTML-i, CSS-i ja JavaScripti abil

See projekt aitab teil lihvida oma esiotsa oskusi ja õpetab teile, kuidas luua liidest, kasutades põhilisi veebistandardeid.

Projektid on suurepärane viis oma HTML-i, CSS-i ja JavaScripti oskuste parandamiseks ning oluliste kontseptsioonide ja tehnikate tugevdamiseks.

Üks projekt, millega saate alustada, on retseptiraamat, mida saate käivitada brauseris (nt Google Chrome või Firefox).

Retseptiraamatus on veebilehe vasakus servas jaotis, kuhu kasutaja saab lisada uusi retsepte. Lehe paremas servas saab kasutaja vaadata ja otsida olemasolevaid retsepte.

Kuidas paluda kasutajal lisada uus retsept

Lisage HTML-, CSS- ja JavaScript-failidele esialgne sisu. Kui te pole veebiarenduskontseptsioonidega kursis, on palju kohti, kus saate seda teha õppige veebiarendust veebis.

Siin saate vaadata ka täielikku retseptiraamatu näidet GitHubi repo.

Lisage HTML-i põhistruktuur uude HTML-faili nimega index.html:

html>
<html>
<pea>
<pealkiri>Retsepti rakenduspealkiri>
pea>
<keha>
<nav>
<h1>Retsepti rakendush1>
nav>
<divklass="konteiner">
 Sisu siin 
div>
keha>
html>

instagram viewer

Eraldage konteineriklassis leht vasak- ja parempoolseks veerguks.
```
<divklass="vasak veerg">div>
<divklass="parem veerg">div>
```

Lisage vasakpoolsesse veergu vorm, mille abil kasutaja saab uue retsepti lisada. Kasutaja saab sisestada retsepti nime, koostisosade loendi ja meetodi:

<h3>Lisa retsepth3><vormi>
<siltjaoks="retsepti nimi">Nimi:silt>
<sisendtüüp="tekst"id="retsepti nimi"nõutud>
<br />
<siltjaoks="retsepti koostisosad">Koostis:silt>
<tekstialaid="retsepti koostisosad"read="5"nõutud>tekstiala>
<br />
<siltjaoks="retsept-meetod">Meetod:silt>
<tekstialaid="retsept-meetod"read="5"nõutud>tekstiala>
<br /><nupputüüp="Esita">Lisa retseptnuppu>
vormi>

Lisage HTML-faili head-märgendisse link uuele CSS-failile nimega styles.css. Looge fail HTML-failiga samasse kausta:
```
<linkrel="laadileht"href="stiilid.css">
```

Lisage CSS-faili kogu lehe stiil:

keha {
font-perekond: sans-serif;
}nav {
taustavärv: #333;
positsiooni: fikseeritud;
üleval: 0;
laius: 100%;
polsterdus: 20px;
vasakule: 0;
värvi: valge;
teksti joondamine: Keskus;
}
.konteiner {
kuva: painduv;
painduv suund: rida;
õigustama-sisu: tühik-vahel;
marginaal: 150px 5%;
}
.vasak veerg {
laius: 25%;
}.parem veerg {
laius: 65%;
}

Lisage veidi stiili Lisage retsepte vorm:

vormi {
kuva: painduv;
painduv suund: veerg;
}silt {
margin-alumine: 10px;
}
sisend[tüüp="tekst"], tekstiala {
polsterdus: 10px;
margin-alumine: 10px;
piiriraadius: 5px;
piir: 1pxtahke#ccc;
laius: 100%;
kasti suuruse määramine: ääris-kast;
}nuppu[tüüp="Esita"] {
polsterdus: 10px;
taustavärv: #3338;
värvi: #fff;
piir: mitte ühtegi;
piiriraadius: 5px;
kursor: osuti;
}

Lisage HTML-faili kehamärgendi allosas link JavaScripti failile nimega script.js. Looge fail samasse kausta:
```
<keha>
 Sisu 
<stsenaariumsrc="script.js">stsenaarium>
keha>
```
Kasutage failis script.js querySelector meetodit läbima DOM-i ja hankige lehelt vormielement.
```
konst vorm = dokument.querySelector('vorm');
```
Looge uus massiiv retseptide salvestamiseks, mille kasutaja vormi sisestab:
```
lase retseptid = [];
```

Uues funktsioonis saate vormi kaudu sisestatud nime, koostisosade ja meetodi väljad. Võite ka rakendada kliendipoolne vormi valideerimine et vältida valesid sisestusi või kontrollida, kas retsept on juba olemas.

funktsioonikäepide Esita(sündmus) {
// Vormi esitamise vaikekäitumise vältimine
 event.preventDefault();

// Hangi retsepti nimi, koostisosad ja meetodi sisendväärtused
konst nimiSisend = dokument.querySelector('#retsepti-nimi');
konst ingSisend = dokument.querySelector("#retsept-koostisosad");
konst meetodSisend = dokument.querySelector('#retsept-meetod');
konst nimi = nimiInput.value.trim();
konst koostisosad = ingrInput.value.trim().split(','.map(i => i.trim());
konst meetod = meetodInput.value.trim();
}

Kui sisendid on kehtivad, lisage need retseptide massiivi:

kui (nimi && ingredients.length > 0 && meetod) {
konst uusRetsept = {nimi, koostisosad, meetod};
 retseptid.push (uusRetsept);
}

Tühjendage vormi sisendid:

nimiSisend.väärtus = '';
ingRInput.value = '';
meetodInput.value = '';

Pärast funktsiooni handleSubmit() lisage sündmuste kuulaja funktsiooni kutsumiseks, kui kasutaja vormi esitab:
```
form.addEventListener('Esita', käepideEsita);
```
Avage brauseris index.html ja vaadake vasakpoolset vormi:

Lisatud retseptide kuvamine

Saate kuvada lehe paremas servas olevas retseptimassiivis salvestatud retsepte.

Lisage HTML-faili div, et kuvada paremas veerus retseptide loend. Kui retsepte pole, lisage veel üks div, et kuvada teade:
```
<divklass="parem veerg">
<divid="retseptide nimekiri">div>
<divid="retseptid puuduvad">Teil pole retsepte.div>
div>
```

Lisage retseptide loendisse mõni CSS-stiil:

#retseptinimekiri {
kuva: võre;
ruudustik-mall-veerud: korda(automaatne sobivus, minmax(300px, 1fr));
grid-gap: 20px;
}#retseptid puuduvad {
kuva: painduv;
taustavärv: #FFCCCC;
polsterdus: 20px;
piiriraadius: 8px;
margin-top: 44px;
}

Hankige JavaScripti faili ülaosas retseptide loendi ja veateate kuvamiseks kasutatavad HTML-elemendid:

konst retseptiloend = dokument.querySelector('#retseptinimekiri');
konst noRetseptid = dokument.getElementById("retseptideta");

Uue funktsiooni sees sirvige läbi iga retseptide massiivi retsept. Iga retsepti jaoks looge selle retsepti kuvamiseks uus div:

funktsioonikuva Retseptid() {
 receptList.innerHTML = '';
 retseptid.forEach((retsept, indeks) => {
konst retseptDiv = dokument.createElement('div');
 });
}

Nime, koostisosade ja meetodi kuvamiseks lisage üksikule retseptile div sisu. Div sisaldab ka kustutamisnuppu. Lisate selle funktsiooni hilisemates etappides:

receptDiv.innerHTML = `
${retsept.nimi}/h3>


<tugev>Koostis:tugev></p>



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

${recipe.method}</p>

Divi stiili lisamiseks lisage klass:
```
receptDiv.classList.add('retsept');
```
Lisa uus div HTML-i elemendile recipeList:
```
retseptiloend.appendChild (recipeDiv);
```

Lisage CSS-faili klassi stiil:

.retsept {
piir: 1pxtahke#ccc;
polsterdus: 10px;
piiriraadius: 5px;
kast-vari: 0 2px 4pxrgba(0,0,0,.2);
}.retsepth3 {
margin-top: 0;
margin-alumine: 10px;
}
.retseptul {
marginaal: 0;
polsterdus: 0;
nimekirja stiilis: mitte ühtegi;
}.retseptulli {
margin-alumine: 5px;
}

Kontrollige, kas retsepte on rohkem kui üks. Kui jah, siis peida veateade:
```
noRecipes.style.display = retseptid.length > 0? 'pole': 'flex';
```
Pärast uue retsepti lisamist retseptide massiivi kutsuge uus funktsioon HandSubmit() funktsioonis:
```
kuvaRetseptid();
```
Avage brauseris index.html:
Lisage retseptid loendisse ja vaadake, kuidas need kuvatakse paremal pool:

Kuidas retsepte kustutada

Retsepte saate kustutada, klõpsates nuppu Kustuta nuppu retsepti juhiste all.

Lisage kustutamisnupule CSS-i stiil:

.delete-nupp {
taustavärv: #dc3545;
värvi: #fff;
piir: mitte ühtegi;
piiriraadius: 5px;
polsterdus: 5px 10px;
kursor: osuti;
}.delete-nupp:hõljuma {
taustavärv: #c82333;
}

Lisage JavaScripti failis retsepti kustutamiseks uus funktsioon:
```
funktsioonikäepide Kustuta(sündmus) {}
```

JavaScripti sündmuse abil leidke selle retsepti register, millel kasutaja klõpsas:

kui (event.target.classList.contains("kustutusnupp")) {
konst indeks = event.target.dataset.index;
}

Valitud retsepti retseptide massiivist kustutamiseks kasutage registrit:
```
retseptid.splice (indeks, 1);
```
Värskendage lehel kuvatud retseptide loendit:
```
kuvaRetseptid();
```
Kui kasutaja klõpsab kustutamisnupul, lisage sündmustekuulaja, et kutsuda funktsiooni handleDelete() välja:
```
receptList.addEventListener("klõps", käepideKustuta);
```
Avage brauseris index.html. Kustutamisnupu vaatamiseks lisage retsept:

Kuidas retsepte otsida

Saate otsida retsepte otsinguriba abil, et kontrollida, kas teatud retsept on olemas.

Lisage parempoolsesse veergu retseptide loendi ette otsinguriba:

<divid="otsingujaotis">
<h3>Retseptide loendh3>
<siltjaoks="otsingukast">Otsing:silt>
<sisendtüüp="tekst"id="otsingukast">
div>

Lisage otsinguriba sildi CSS-stiil:

silt[for="otsingukast"] {
kuva: blokk;
margin-alumine: 10px;
}

Hankige failis script.js otsingukasti HTML-element:

konst otsingukast = dokument.getElementById('otsingukast');

Looge uue funktsiooni sees uus massiiv, mis sisaldab retsepte, mille nimi vastab otsingusisendile:

funktsiooniotsing(päring) {
konst filteredRecipes = retseptid.filter(retsept => {
tagasi retsept.nimi.AlaCase().includes (query.toLowerCase());
 });
}

Tühjendage praegu ekraanil kuvatavate retseptide loend:
```
receptList.innerHTML = '';
```
Sirvige läbi iga filtreeritud retsept, mis vastab otsingutulemusele, ja looge uus div element:
```
filteredRecipes.forEach(retsept => {
konst retseptEl = dokument.createElement('div'); 
});
```

Lisage filtreeritud retsepti HTML-sisu lahtrisse div:

receptEl.innerHTML = `
${retsept.nimi}/h3>


<tugev>Koostis:tugev></p>



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

${recipe.method}</p>

Ühtlase stiili jaoks lisage sama retseptiklass. Lisage lehel kuvatavasse loendisse uus div:
```
receptEl.classList.add('retsept');
retseptiloend.appendChild (retseptEl);
```
Lisage sündmustekuulaja, et kutsuda otsing() funktsiooni, kui kasutaja sisestab otsinguribale:
```
searchBox.addEventListener('sisend', sündmus => otsing (event.target.value));
```
Funktsioonis handleDelete() tühjendage loendi värskendamiseks otsingukast, kui kasutaja üksuse kustutab:
```
searchbox.value = '';
```
Uue otsinguriba vaatamiseks avage veebibrauseris index.html ja lisage mõned retseptid:
Retseptide loendi filtreerimiseks lisage otsinguribale retsepti nimi:

Projektide tegemine HTML-i, CSS-i ja JavaScriptiga

See projekt demonstreerib, kuidas luua lihtsa retseptiraamatu jaoks esiotsa liides. Pange tähele, et taustaserverit pole ja rakendus ei säilita andmeid; Kui värskendate lehte, lähevad muudatused kaotsi. Üks võimalik laiendus, millega saaksite töötada, on mehhanism andmete salvestamiseks ja laadimiseks kohaliku salvestusruumi abil.

Oma veebiarendusoskuste parandamiseks jätkake teiste lõbusate projektidega, mida saate oma arvutis luua.

About Technology - denizatm.com

Kuidas luua retseptiraamatut HTML-i, CSS-i ja JavaScripti abil

Kuidas paluda kasutajal lisada uus retsept

Lisatud retseptide kuvamine

${retsept.nimi}/h3>

Kuidas retsepte kustutada

Kuidas retsepte otsida

${retsept.nimi}/h3>

Projektide tegemine HTML-i, CSS-i ja JavaScriptiga

Kategooriad

Recent Post

3 viisi, kuidas küberkurjategijad võivad teie autot häkkida

Kuus parimat Mac Markdown'i redigeerijat kõigile

Koostage nende kaheksa saidi abil lõputu dokumentaalfilmide esitusloend