Reseptikirjan luominen HTML: n, CSS: n ja JavaScriptin avulla

Tämä projekti auttaa sinua hiomaan käyttöliittymätaitojasi ja opettaa sinua rakentamaan käyttöliittymän verkkostandardien avulla.

Projektit ovat loistava tapa parantaa HTML-, CSS- ja JavaScript-taitojasi sekä vahvistaa tärkeitä käsitteitä ja tekniikoita.

Yksi projekti, jonka kanssa voit aloittaa, on reseptikirja, jota voit käyttää selaimessa, kuten Google Chrome tai Firefox.

Reseptikirjassa verkkosivun vasemmalla puolella on osio, johon käyttäjä voi lisätä uusia reseptejä. Sivun oikealla puolella käyttäjä voi tarkastella ja etsiä olemassa olevia reseptejä.

Kuinka pyytää käyttäjää lisäämään uusi resepti

Lisää alkuperäinen sisältö HTML-, CSS- ja JavaScript-tiedostoihin. Jos web-kehityskonseptit eivät ole sinulle tuttuja, voit tehdä sen monissa paikoissa oppia verkkokehitystä verkossa.

Voit myös tarkastella koko reseptikirjaesimerkkiä tästä GitHub repo.

Lisää HTML-perusrakenne uuteen HTML-tiedostoon nimeltä index.html:

html>
<html>
<pää>
<otsikko>Reseptisovellusotsikko>
pää>
<kehon>
<nav>
<h1>Reseptisovellush1>
nav>
<divluokkaa="kontti">
 Sisältö täällä 
div>
kehon>
html>

instagram viewer

Erottele säilöluokan sisällä sivu vasempaan ja oikeaan sarakkeeseen:
```
<divluokkaa="vasen sarake">div>
<divluokkaa="oikea sarake">div>
```

Lisää vasemman sarakkeen sisään lomake, jossa käyttäjä voi lisätä uuden reseptin. Käyttäjä voi syöttää reseptin nimen, ainesosaluettelon ja menetelmän:

<h3>Lisää reseptih3><muodossa>
<etikettivarten="reseptin nimi">Nimi:etiketti>
<syöttötyyppi="teksti"id="reseptin nimi"edellytetään>
<br />
<etikettivarten="reseptin ainesosat">Ainekset:etiketti>
<tekstialueid="reseptin ainesosat"rivit="5"edellytetään>tekstialue>
<br />
<etikettivarten="resepti-menetelmä">Menetelmä:etiketti>
<tekstialueid="resepti-menetelmä"rivit="5"edellytetään>tekstialue>
<br /><-painikettatyyppi="Lähetä">Lisää resepti-painiketta>
muodossa>

Lisää HTML-tiedoston head-tunnisteeseen linkki uuteen CSS-tiedostoon nimeltä styles.css. Luo tiedosto samaan kansioon kuin HTML-tiedostosi:
```
<linkkirel="tyylitaulukko"href="tyylit.css">
```

Lisää CSS-tiedoston sisällä koko sivun tyyliä:

kehon {
font-perhe: sans-serif;
}nav {
taustaväri: #333;
asema: korjattu;
alkuun: 0;
leveys: 100%;
pehmuste: 20px;
vasemmalle: 0;
väri: valkoinen;
tekstin tasaus: keskusta;
}
.container {
näyttö: flex;
flex-suunta: rivi;
perustele-sisältö: välilyönti;
marginaali: 150px 5%;
}
.vasen sarake {
leveys: 25%;
}.oikea-sarake {
leveys: 65%;
}

Lisää hieman tyyliä Lisää reseptejä muoto:

muodossa {
näyttö: flex;
flex-suunta: sarakkeessa;
}etiketti {
marginaali-ala: 10px;
}
syöttö[tyyppi="teksti"], tekstialue {
pehmuste: 10px;
marginaali-ala: 10px;
raja-säde: 5px;
rajaa: 1pxkiinteä#ccc;
leveys: 100%;
laatikon kokoinen: raja-laatikko;
}-painiketta[tyyppi="Lähetä"] {
pehmuste: 10px;
taustaväri: #3338;
väri: #F F F;
rajaa: ei mitään;
raja-säde: 5px;
kohdistin: osoitin;
}

Lisää HTML-tiedostosi body-tagin alaosaan linkki JavaScript-tiedostoon nimeltä script.js. Luo tiedosto samaan kansioon:
```
<kehon>
 Sisältö 
<käsikirjoitussrc="script.js">käsikirjoitus>
kehon>
```
Käytä script.js: n sisällä querySelector-menetelmää kulkea DOM: n läpi ja hanki lomakeelementti sivulta.
```
konst muoto = asiakirja.querySelector('muoto');
```
Luo uusi taulukko reseptien tallentamiseksi, jotka käyttäjä syöttää lomakkeeseen:
```
antaa reseptit = [];
```

Hae uudessa funktiossa lomakkeen kautta syötetyt nimi-, ainesosat ja menetelmäkentät. Voit myös toteuttaa asiakaspuolen lomakkeen validointi estääksesi virheelliset syötteet tai tarkistaaksesi, onko resepti jo olemassa.

toimintokäsitteleLähetä(tapahtuma) {
// Estä oletusarvoisen lomakkeen lähetyskäyttäytyminen
 event.preventDefault();

// Hanki reseptin nimi, ainesosat ja menetelmän syöttöarvot
konst nameInput = asiakirja.querySelector('#reseptin nimi');
konst ingInput = asiakirja.querySelector('#resepti-ainesosat');
konst methodInput = asiakirja.querySelector('#resepti-menetelmä');
konst nimi = nimiInput.value.trim();
konst ainekset = ingrInput.value.trim().split(',').kartta(i => i.trim());
konst method = methodInput.value.trim();
}

Jos syötteet ovat kelvollisia, lisää ne reseptitaulukkoon:

jos (nimi && ingredients.length > 0 && menetelmä) {
konst newRecipe = { nimi, ainesosat, menetelmä };
 receptit.push (uusiResepti);
}

Tyhjennä lomakkeen syötteet:

nimiInput.value = '';
ingRInput.value = '';
methodInput.value = '';

Lisää handleSubmit()-funktion jälkeen tapahtumien kuuntelija kutsua toimintoa, kun käyttäjä lähettää lomakkeen:
```
form.addEventListener('Lähetä', handleSubmit);
```
Avaa index.html selaimessa ja katso vasemmalla olevaa lomaketta:

Lisättyjen reseptien näyttäminen

Voit näyttää reseptitaulukkoon tallennetut reseptit sivun oikealla puolella.

Lisää HTML-tiedostoon div näyttääksesi reseptiluettelon oikean sarakkeen sisällä. Lisää toinen div näyttääksesi viestin, jos reseptejä ei ole:
```
<divluokkaa="oikea sarake">
<divid="reseptilista">div>
<divid="ei reseptejä">Sinulla ei ole reseptejä.div>
div>
```

Lisää CSS-tyyliä reseptiluetteloon:

#reseptilista {
näyttö: ruudukko;
ruudukko-malli-sarakkeet: toistaa(automaattinen sovitus, minmax(300px, 1fr));
ruudukkoväli: 20px;
}#ei reseptejä {
näyttö: flex;
taustaväri: #FFCCCC;
pehmuste: 20px;
raja-säde: 8px;
marginaali yläosa: 44px;
}

Hae JavaScript-tiedoston yläosassa HTML-elementit, joita käytetään näyttämään reseptiluettelo ja virheilmoitus:

konst reseptilista = asiakirja.querySelector('#reseptilista');
konst noRecipes = asiakirja.getElementById("ei-reseptejä");

Uuden toiminnon sisällä voit käydä läpi jokaisen reseptitaulukon reseptin. Luo jokaiselle reseptille uusi div näyttääksesi reseptin:

toimintonäyttöReseptit() {
 recipeList.innerHTML = '';
 receptit.forEach((resepti, hakemisto) => {
konst reseptiDiv = asiakirja.createElement("div");
 });
}

Lisää sisältöä yksittäiseen reseptidiv: iin, jotta näet nimen, ainesosat ja menetelmän. Div sisältää myös poistopainikkeen. Lisäät tämän toiminnon myöhemmissä vaiheissa:

recipeDiv.innerHTML = `
${resepti.nimi}</h3>


<vahva>Ainekset:vahva></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).liittyä seuraan('')}
 </ul>
<vahva>Menetelmä:vahva></p>

${recipe.method}</p>

Lisää luokka divin tyyliin:
```
recipeDiv.classList.add('resepti');
```
Liitä uusi div receptilistan HTML-elementtiin:
```
recipeList.appendChild (recipeDiv);
```

Lisää luokan tyyli CSS-tiedostoon:

.resepti {
rajaa: 1pxkiinteä#ccc;
pehmuste: 10px;
raja-säde: 5px;
laatikko-varjo: 0 2px 4pxrgba(0,0,0,.2);
}.reseptih3 {
marginaali yläosa: 0;
marginaali-ala: 10px;
}
.reseptiul {
marginaali: 0;
pehmuste: 0;
listatyyliin: ei mitään;
}.reseptiulli {
marginaali-ala: 5px;
}

Tarkista, onko reseptejä useampi kuin yksi. Jos näin on, piilota virheilmoitus:
```
noRecipes.style.display = reseptit.length > 0? 'ei mitään': 'flex';
```
Kutsu uusi funktio handleSubmit()-funktion sisällä, kun olet lisännyt uuden reseptin reseptitaulukkoon:
```
näyttöReseptit();
```
Avaa index.html selaimessa:
Lisää reseptejä luetteloon ja katso niiden näkyvän oikealla puolella:

Kuinka poistaa reseptejä

Voit poistaa reseptejä napsauttamalla Poistaa -painiketta reseptin ohjeen alla.

Lisää CSS-tyyliä poistopainikkeeseen:

.delete-painike {
taustaväri: #dc3545;
väri: #F F F;
rajaa: ei mitään;
raja-säde: 5px;
pehmuste: 5px 10px;
kohdistin: osoitin;
}.delete-painike:hover {
taustaväri: #c82333;
}

Lisää JavaScript-tiedostoon uusi funktio reseptin poistamiseksi:
```
toimintokahva Poista(tapahtuma) {}
```

Etsi JavaScript-tapahtuman avulla hakemisto reseptistä, jota käyttäjä napsautti:

jos (event.target.classList.contains('delete-button')) {
konst index = event.target.dataset.index;
}

Käytä hakemistoa poistaaksesi valitun reseptin reseptijoukosta:
```
recipes.splice (indeksi, 1);
```
Päivitä sivulla näkyvä reseptiluettelo:
```
näyttöReseptit();
```
Lisää tapahtumaseuraaja kutsumaan handleDelete()-funktiota, kun käyttäjä napsauttaa poistopainiketta:
```
recipeList.addEventListener('klikkaus', handleDelete);
```
Avaa index.html selaimessa. Lisää resepti nähdäksesi poistopainikkeen:

Kuinka etsiä reseptejä

Voit etsiä reseptejä hakupalkin avulla tarkistaaksesi, onko tietty resepti olemassa.

Lisää oikeanpuoleisen sarakkeen sisään hakupalkki reseptiluettelon eteen:

<divid="haku-osio">
<h3>Reseptiluetteloh3>
<etikettivarten="Hakulaatikko">Hae:etiketti>
<syöttötyyppi="teksti"id="Hakulaatikko">
div>

Lisää CSS-tyyli hakupalkin tunnisteeseen:

etiketti[for="Hakulaatikko"] {
näyttö: lohko;
marginaali-ala: 10px;
}

Hae script.js: ssä hakukentän HTML-elementti:

konst hakukenttä = asiakirja.getElementById('Hakulaatikko');

Luo uuden funktion sisällä uusi taulukko, joka sisältää reseptejä, joiden nimi vastaa hakusyötettä:

toimintoHae(kysely) {
konst filteredRecipes = reseptit.filter(resepti => {
palata resepti.nimi.pienikirjain().includes (query.toLowerCase());
 });
}

Tyhjennä näytöllä parhaillaan näkyvä reseptiluettelo:
```
recipeList.innerHTML = '';
```

Selaa jokaista hakutulosta vastaavaa suodatettua reseptiä ja luo uusi div-elementti:

filteredRecipes.forEach(resepti => {
konst reseptiEl = asiakirja.createElement("div"); 
});

Lisää suodatetun reseptin HTML-sisältö div: iin:

recipeEl.innerHTML = `
${resepti.nimi}</h3>


<vahva>Ainekset:vahva></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).liittyä seuraan('')}
 </ul>
<vahva>Menetelmä:vahva></p>

${recipe.method}</p>

Lisää sama reseptiluokka yhtenäisen muotoilun saamiseksi. Lisää uusi div sivulla näkyvään luetteloon:
```
recipeEl.classList.add('resepti');
recipeList.appendChild (recipeEl);
```
Lisää tapahtuman kuuntelija kutsumaan search()-funktiota, kun käyttäjä kirjoittaa hakupalkkiin:
```
searchBox.addEventListener("syöttö", tapahtuma => haku (tapahtuma.kohde.arvo));
```
Tyhjennä HandDelete()-funktion sisällä oleva hakukenttä, jos käyttäjä poistaa kohteen, päivittääksesi luettelo:
```
searchBox.value = '';
```
Avaa index.html verkkoselaimessa nähdäksesi uuden hakupalkin ja lisää joitain reseptejä:
Lisää reseptin nimi hakupalkkiin suodattaaksesi reseptiluettelon:

Projektien tekeminen HTML: llä, CSS: llä ja JavaScriptillä

Tämä projekti osoittaa, kuinka luodaan käyttöliittymä yksinkertaiselle reseptikirjalle. Huomaa, että taustapalvelinta ei ole ja sovellus ei säilytä tietoja; Jos päivität sivun, menetät tekemäsi muutokset. Yksi mahdollinen laajennus, jota voisit työstää, on mekanismi tietojen tallentamiseen ja lataamiseen paikallisen tallennustilan avulla.

Paranna verkkokehitystaitojasi jatkamalla muiden hauskojen projektien tutkimista, joita voit luoda omalla tietokoneellasi.

About Technology - denizatm.com

Reseptikirjan luominen HTML: n, CSS: n ja JavaScriptin avulla

Kuinka pyytää käyttäjää lisäämään uusi resepti

Lisättyjen reseptien näyttäminen

${resepti.nimi}</h3>

Kuinka poistaa reseptejä

Kuinka etsiä reseptejä

${resepti.nimi}</h3>

Projektien tekeminen HTML: llä, CSS: llä ja JavaScriptillä

Luokat

Recent Post

5 vinkkiä onnistuneiden blogi kirjoittamiseen ja piirtämiseen lisää lukijoita

8 laajennusta Reddit-kokemuksen muuttamiseksi

Visa vs. Mastercard: mitä sinun tulisi käyttää verkkokaupoissa?