Dit project helpt je je front-endvaardigheden aan te scherpen en leert je hoe je een interface bouwt met behulp van de belangrijkste webstandaarden.

Projecten zijn een geweldige manier om uw HTML-, CSS- en JavaScript-vaardigheden te verbeteren en belangrijke concepten en technieken te versterken.

Een project waarmee u aan de slag kunt gaan, is een receptenboek, dat u in een browser zoals Google Chrome of Firefox kunt uitvoeren.

In het receptenboek bevat de linkerkant van de webpagina een gedeelte waar de gebruiker nieuwe recepten kan toevoegen. Aan de rechterkant van de pagina kan de gebruiker bestaande recepten bekijken en doorzoeken.

De gebruiker vragen om een ​​nieuw recept toe te voegen

Voeg de initiële inhoud toe aan de HTML-, CSS- en JavaScript-bestanden. Als u niet bekend bent met concepten voor webontwikkeling, zijn er veel plaatsen waar u dat kunt leer webontwikkeling online.

Hierin kun je ook het volledige receptenboek voorbeeld bekijken GitHub-opslagplaats.

  1. Voeg de basis-HTML-structuur toe aan een nieuw HTML-bestand met de naam index.html:
    instagram viewer 
    html>
    <html>
    <hoofd>
    <titel>Recept-apptitel>
    hoofd>
    <lichaam>
    <navigatie>
    <h1>Recept-apph1>
    navigatie>
    <divklas="houder">
     Inhoud hier 
    div>
    lichaam>
    html>
  2. Scheid de pagina binnen de containerklasse in een linkerkolom en een rechterkolom:
    <divklas="linker kolom">
    div>
    <divklas="rechterkolom">
    div>
  3. Voeg in de linkerkolom een ​​formulier toe waarmee de gebruiker een nieuw recept kan toevoegen. De gebruiker kan de naam, ingrediëntenlijst en methode van het recept invoeren:
    <h3>Recept toevoegenh3>
    <formulier>
    <etiketvoor="receptnaam">Naam:etiket>
    <invoertype="tekst"ID kaart="receptnaam"vereist>
    <br />
    

    <etiketvoor="recept-ingrediënten">Ingrediënten:etiket>
    <tekstgebiedID kaart="recept-ingrediënten"rijen="5"vereist>tekstgebied>
    <br />
    

    <etiketvoor="recept-methode">Methode:etiket>
    <tekstgebiedID kaart="recept-methode"rijen="5"vereist>tekstgebied>
    <br />
    <knoptype="indienen">Recept toevoegenknop>
    formulier>
  4. Voeg in de head-tag van het HTML-bestand een link toe naar een nieuw CSS-bestand met de naam styles.css. Maak het bestand in dezelfde map als uw HTML-bestand:
    <koppelingrel="stijlblad"href="stijlen.css">
  5. Voeg in het CSS-bestand wat styling toe voor de algehele pagina:
    lichaam {
    font-familie: schreefloos;
    }
    navigatie {
    Achtergrond kleur: #333;
    positie: vast;
    bovenkant: 0;
    breedte: 100%;
    opvulling: 20px;
    links: 0;
    kleur: wit;
    tekst uitlijnen: centrum;
    }
    

    .container {
    weergave: buigen;
    flex-richting: rij;
    rechtvaardigen-inhoud: ruimte tussen;
    marge: 150px 5%;
    }
    

    .linker kolom {
    breedte: 25%;
    }
    .rechterkolom {
    breedte: 65%;
    }
  6. Voeg wat styling toe voor de Recepten toevoegen formulier:
    formulier {
    weergave: buigen;
    flex-richting: kolom;
    }
    etiket {
    marge-bodem: 10px;
    }
    

    invoer[soort="tekst"], tekstgebied {
    opvulling: 10px;
    marge-bodem: 10px;
    grensradius: 5px;
    grens: 1pxstevig#ccc;
    breedte: 100%;
    maatvoering van de doos: border-box;
    }
    knop[soort="indienen"] {
    opvulling: 10px;
    Achtergrond kleur: #3338;
    kleur: #fff;
    grens: geen;
    grensradius: 5px;
    cursor: wijzer;
    }
  7. Voeg onder aan de body-tag in uw HTML-bestand een link toe naar een JavaScript-bestand met de naam script.js. Maak het bestand in dezelfde map:
    <lichaam>
     Inhoud 
    <scriptsrc="script.js">script>
    lichaam>
  8. Gebruik in script.js de methode querySelector om doorkruis de DOM en haal het formulierelement van de pagina.
    const formulier = document.querySelector('formulier');
  9. Maak een nieuwe array om recepten op te slaan die de gebruiker in het formulier invoert:
    laten recepten = [];
  10. Haal in een nieuwe functie de naam, ingrediënten en methodevelden op die via het formulier zijn ingevoerd. Je kunt ook implementeren validatie van formulieren aan de clientzijde om ongeldige invoer te voorkomen of om te controleren of er al een recept bestaat.
    functiehandvatVerzenden(evenement) {
    // Voorkom standaardgedrag bij het indienen van formulieren
     evenement.preventDefault();

    // Haal de receptnaam, ingrediënten en invoerwaarden van de methode op
    const naamInput = document.querySelector('#receptnaam');
    const ingegrInput = document.querySelector('#recept-ingrediënten');
    const methodeInput = document.querySelector('#recept-methode');
    const naam = naamInput.waarde.trim();
    const ingrediënten = ingrInput.value.trim().split(',').kaart(i => i.trim());
    const methode = methodeInput.waarde.trim();
    }
  11. Als de invoer geldig is, voegt u deze toe aan de receptenarray:
    als (naam && ingrediënten.lengte > 0 && methode) {
    const nieuwRecept = { naam, ingrediënten, methode };
     recepten.push (nieuwRecept);
    }
  12. Wis de invoer op het formulier:
    nameInput.value = '';
    ingrInput.waarde = '';
    methodeInput.waarde = '';
  13. Na de functie handleSubmit() voegt u toe een gebeurtenisluisteraar om de functie aan te roepen wanneer de gebruiker het formulier indient:
    formulier.addEventListener('indienen', omgaan met Verzenden);
  14. Open index.html in een browser en bekijk het formulier aan de linkerkant:

Hoe toegevoegde recepten weer te geven

U kunt de recepten weergeven die zijn opgeslagen in de receptenreeks aan de rechterkant van de pagina.

  1. Voeg in het HTML-bestand een div toe om de receptenlijst in de rechterkolom weer te geven. Voeg nog een div toe om een ​​bericht weer te geven als er geen recepten zijn:
    <divklas="rechterkolom">
    <divID kaart="receptenlijst">div>
    <divID kaart="geen recepten">Je hebt geen recepten.div>
    div>
  2. Voeg wat CSS-styling toe voor de receptenlijst:
    #receptenlijst {
    weergave: rooster;
    raster-sjabloon-kolommen: herhalen(automatische aanpassing, minimaal(300px, 1fr));
    raster-gap: 20px;
    }
    #geen-recepten {
    weergave: buigen;
    Achtergrond kleur: #FFCCCC;
    opvulling: 20px;
    grensradius: 8px;
    marge-top: 44px;
    }
  3. Bovenaan het JavaScript-bestand vindt u de HTML-elementen die worden gebruikt om de receptenlijst en het foutbericht weer te geven:
    const receptenLijst = document.querySelector('#receptenlijst');
    const geenRecepten = document.getElementById('geen-recepten');
  4. Loop binnen een nieuwe functie door elk recept in de receptenarray. Maak voor elk recept een nieuwe div om dat recept weer te geven:
    functietoonRecepten() {
     receptLijst.innerHTML = '';
     recepten.voorElk((recept, index) => {
    const receptDiv = document.createElement('div');
     });
    }
  5. Voeg wat inhoud toe aan de individuele recept-div om de naam, ingrediënten en methode weer te geven. De div bevat ook een verwijderknop. U voegt deze functionaliteit in latere stappen toe:
    receptDiv.innerHTML = `
    ${recept.naam}</h3>
    

    

    <sterk>Ingrediënten:sterk></p>
    

      

       ${recept.ingrediënten.map(ingegr =>`
    • ${ingr}
      • `      ).meedoen('')}
       </ul>
      <sterk>Methode:sterk></p>
      

      ${recept.methode}</p>
  6. Voeg een klasse toe om de div te stylen:
    receptDiv.classList.add('recept');
  7. Voeg de nieuwe div toe aan het HTML-element receptList:
    receptLijst.appendChild (receptDiv);
  8. Voeg de styling voor de klasse toe aan het CSS-bestand:
    .recept {
    grens: 1pxstevig#ccc;
    opvulling: 10px;
    grensradius: 5px;
    doos-schaduw: 0 2px 4pxRGBA(0,0,0,.2);
    }
    .recepth3 {
    marge-top: 0;
    marge-bodem: 10px;
    }
    

    .receptul {
    marge: 0;
    opvulling: 0;
    lijst-stijl: geen;
    }
    .receptulli {
    marge-bodem: 5px;
    }
  9. Controleer of er meer dan één recept is. Zo ja, verberg dan de foutmelding: 
    noRecipes.style.display = recepten.lengte > 0? 'geen': 'flex';
  10. Roep de nieuwe functie aan binnen de functie handleSubmit() nadat u het nieuwe recept hebt toegevoegd aan de receptenarray:
    toonRecepten();
  11. Open index.html in een browser:
  12. Voeg recepten toe aan de lijst en zie hoe ze aan de rechterkant verschijnen:

Recepten verwijderen

U kunt recepten verwijderen door op de te klikken Verwijderen knop onder de instructies van een recept.

  1. Voeg wat CSS-stijl toe voor de verwijderknop:
    .delete-knop {
    Achtergrond kleur: #dc3545;
    kleur: #fff;
    grens: geen;
    grensradius: 5px;
    opvulling: 5px 10px;
    cursor: wijzer;
    }
    .delete-knop:zweven {
    Achtergrond kleur: #c82333;
    }
  2. Voeg in het JavaScript-bestand een nieuwe functie toe om een ​​recept te verwijderen:
    functiehandvatVerwijderen(evenement) {
    }
  3. Zoek met behulp van de JavaScript-gebeurtenis de index van het recept waarop de gebruiker heeft geklikt:
    als (event.target.classList.contains('verwijder-knop')) {
    const index = gebeurtenis.doel.dataset.index;
    }
  4. Gebruik de index om het geselecteerde recept uit de receptenarray te verwijderen:
    recepten.splice (index, 1);
  5. Vernieuw de lijst met recepten die op de pagina wordt weergegeven:
    toonRecepten();
  6. Voeg een gebeurtenislistener toe om de functie handleDelete() aan te roepen wanneer de gebruiker op de verwijderknop klikt:
    receptLijst.addEventListener('Klik', handvatVerwijderen);
  7. Open index.html in een browser. Voeg een recept toe om de verwijderknop te bekijken:

Hoe te zoeken naar recepten

U kunt recepten zoeken met behulp van de zoekbalk om te controleren of een bepaald recept bestaat.

  1. Voeg in de rechterkolom een ​​zoekbalk toe voor de lijst met recepten:
    <divID kaart="zoeksectie">
    <h3>Lijst met receptenh3>
    <etiketvoor="zoekvak">Zoekopdracht:etiket>
    <invoertype="tekst"ID kaart="zoekvak">
    div>
  2. CSS-stijl toevoegen voor het zoekbalklabel:
    etiket[voor="zoekvak"] {
    weergave: blok;
    marge-bodem: 10px;
    }
  3. Haal in script.js het HTML-element van het zoekvak op:
    const zoekvak = document.getElementById('zoekvak');
  4. Maak binnen een nieuwe functie een nieuwe array met recepten waarvan de naam overeenkomt met de zoekinvoer:
    functiezoekopdracht(vraag) {
    const gefilterdeRecepten = recepten.filter(recept => {
    opbrengst recept.naam.toLowerCase().includes (query.toLowerCase());
     });
    }
  5. Wis de lijst met recepten die momenteel op het scherm wordt weergegeven:
    receptLijst.innerHTML = '';
  6. Doorloop elk gefilterd recept dat overeenkomt met het zoekresultaat en maak een nieuw div-element:
    gefilterdeRecepten.voorElk(recept => {
    const receptEl = document.createElement('div'); 
    });
  7. Voeg de HTML-inhoud voor het gefilterde recept toe aan de div:
    receptEl.innerHTML = `
    ${recept.naam}</h3>
    

    

    <sterk>Ingrediënten:sterk></p>
    

      

       ${recept.ingrediënten.map(ingegr =>`
    • ${ingr}
      • `      ).meedoen('')}
       </ul>
      <sterk>Methode:sterk></p>
      

      ${recept.methode}</p>
  8. Voeg dezelfde receptklasse toe voor een consistente styling. Voeg de nieuwe div toe aan de lijst die op de pagina wordt weergegeven:
    receptEl.classList.add('recept');
    receptLijst.appendChild (receptEl);
  9. Voeg een gebeurtenislistener toe om de functie search() aan te roepen wanneer de gebruiker in de zoekbalk typt:
    searchBox.addEventListener('invoer', gebeurtenis => zoek (gebeurtenis.doel.waarde));
  10. Maak binnen de functie handleDelete() het zoekvak leeg als de gebruiker een item verwijdert, om de lijst te vernieuwen:
    searchBox.waarde = '';
  11. Open index.html in een webbrowser om de nieuwe zoekbalk te bekijken en enkele recepten toe te voegen:
  12. Voeg een receptnaam toe aan de zoekbalk om de receptenlijst te filteren:

Projecten maken met HTML, CSS en JavaScript

Dit project laat zien hoe je een front-end interface bouwt voor een eenvoudig receptenboek. Merk op dat er geen backend-server is en dat de app geen gegevens bewaart; als u de pagina vernieuwt, gaan uw wijzigingen verloren. Een mogelijke uitbreiding waaraan u zou kunnen werken, is een mechanisme om gegevens op te slaan en te laden met behulp van localStorage.

Om uw vaardigheden op het gebied van webontwikkeling te verbeteren, kunt u doorgaan met het verkennen van andere leuke projecten die u op uw eigen computer kunt maken.