Ez a projekt segít fejleszteni a front-end készségeit, és megtanítja, hogyan kell kezelőfelületet létrehozni az alapvető webszabványok használatával.

A projektek nagyszerű lehetőséget kínálnak HTML-, CSS- és JavaScript-készségeid fejlesztésére, valamint a fontos fogalmak és technikák megerősítésére.

Az egyik projekt, amelybe belekezdhet, egy receptkönyv, amelyet olyan böngészőben futtathat, mint a Google Chrome vagy a Firefox.

A receptkönyvben a weboldal bal oldalán található egy rész, ahol a felhasználó új recepteket adhat hozzá. Az oldal jobb oldalán a felhasználó megtekintheti és keresheti a meglévő recepteket.

Hogyan kérje meg a felhasználót egy új recept hozzáadására

Adja hozzá a kezdeti tartalmat a HTML-, CSS- és JavaScript-fájlokhoz. Ha nem ismeri a webfejlesztési koncepciókat, sok helyen megteheti tanulj webfejlesztést online.

Ebben megtekintheti a teljes receptkönyv-példát is GitHub repó.

  1. Adja hozzá az alapvető HTML-struktúrát egy új index.html nevű HTML-fájlhoz:
    html>
    <html>
    <fej>
    <cím>
    




instagram viewer

    Recept alkalmazáscím>
    fej>
    <test>
    <nav>
    <h1>Recept alkalmazásh1>
    nav>
    <divosztály="tartály">
     Tartalom itt 
    div>
    test>
    html>
  2. A tárolóosztályon belül válassza szét az oldalt egy bal és egy jobb oldali oszlopra:
    <divosztály="bal oldali oszlop">
    div>
    <divosztály="jobb oldali oszlop">
    div>
  3. A bal oldali oszlopban adjon hozzá egy űrlapot, amellyel a felhasználó új receptet adhat hozzá. A felhasználó megadhatja a recept nevét, az összetevők listáját és a módszert:
    <h3>Recept hozzáadásah3>
    <forma>
    <címkeszámára="recept neve">Név:címke>
    <bemenettípus="szöveg"id="recept neve"kívánt>
    <br />
    

    <címkeszámára="recept-összetevők">Hozzávalók:címke>
    <textareaid="recept-összetevők"sorokat="5"kívánt>textarea>
    <br />
    

    <címkeszámára="recept-módszer">Módszer:címke>
    <textareaid="recept-módszer"sorokat="5"kívánt>textarea>
    <br />
    <gombtípus="Beküldés">Recept hozzáadásagomb>
    forma>
  4. A HTML-fájl head címkéjében adjon hozzá egy hivatkozást a styles.css nevű új CSS-fájlhoz. Hozza létre a fájlt ugyanabban a mappában, mint a HTML-fájlt:
    <linkrel="stíluslap"href="stílusok.css">
  5. A CSS-fájlon belül adjon hozzá valamilyen stílust a teljes oldalhoz:
    test {
    betűtípus család: sans-serif;
    }
    nav {
    háttérszín: #333;
    pozíció: rögzített;
    tetejére: 0;
    szélesség: 100%;
    párnázás: 20px;
    bal: 0;
    szín: fehér;
    szöveg igazítás: központ;
    }
    

    .tartály {
    kijelző: Flex;
    flex-irány: sor;
    indokolja-tartalom: tér-között;
    árrés: 150px 5%;
    }
    

    .bal oszlop {
    szélesség: 25%;
    }
    .jobb oszlop {
    szélesség: 65%;
    }
  6. Adjon hozzá néhány stílust a Receptek hozzáadása forma:
    forma {
    kijelző: Flex;
    flex-irány: oszlop;
    }
    címke {
    margó-alsó: 10px;
    }
    

    bemenet[type="szöveg"], textarea {
    párnázás: 10px;
    margó-alsó: 10px;
    határ-sugár: 5px;
    határ: 1pxszilárd#ccc;
    szélesség: 100%;
    doboz-méretezés: border-box;
    }
    gomb[type="Beküldés"] {
    párnázás: 10px;
    háttérszín: #3338;
    szín: #fff;
    határ: egyik sem;
    határ-sugár: 5px;
    kurzor: mutató;
    }
  7. A HTML-fájl body címke alján adjon hozzá egy hivatkozást a script.js nevű JavaScript-fájlhoz. Hozza létre a fájlt ugyanabban a mappában:
    <test>
     Tartalom 
    <forgatókönyvsrc="script.js">forgatókönyv>
    test>
  8. A script.js fájlban használja a querySelector metódust áthalad a DOM-on és lekérjük az űrlapelemet az oldalról.
    const forma = dokumentum.querySelector('forma');
  9. Hozzon létre egy új tömböt a felhasználó által az űrlapba beírt receptek tárolására:
    hagyja receptek = [];
  10. Egy új függvényben kapja meg az űrlapon keresztül megadott név, összetevők és módszer mezőket. Meg is valósíthatod ügyféloldali űrlapérvényesítés hogy megakadályozza az érvénytelen bevitelt, vagy ellenőrizze, hogy létezik-e már recept.
    funkcióhandleSubmit(esemény) {
    // Az alapértelmezett űrlapküldési viselkedés megakadályozása
     event.preventDefault();

    // A recept nevének, összetevőinek és a metódus bemeneti értékeinek lekérése
    const nameInput = dokumentum.querySelector('#recept-név');
    const ingInput = dokumentum.querySelector("#recept-összetevők");
    const methodInput = dokumentum.querySelector('#recept-módszer');
    const név = névInput.érték.trim();
    const összetevők = ingInput.value.trim().split(',').térkép(én => i.trim());
    const metódus = methodInput.value.trim();
    }
  11. Ha a bemenetek érvényesek, adja hozzá őket a recepttömbhöz:
    ha (name && ingredients.length > 0 && módszer) {
    const newRecipe = { név, összetevők, módszer };
     receptek.push (újRecept);
    }
  12. Törölje a bemeneti adatokat az űrlapon:
    nameInput.value = '';
    ingInput.value = '';
    methodInput.value = '';
  13. A handleSubmit() függvény után adja hozzá eseményhallgató a függvény meghívásához, amikor a felhasználó elküldi az űrlapot:
    form.addEventListener('Beküldés', handleSubmit);
  14. Nyissa meg az index.html oldalt egy böngészőben, és tekintse meg a bal oldali űrlapot:

A hozzáadott receptek megjelenítése

A recepttömbben tárolt recepteket az oldal jobb oldalán jelenítheti meg.

  1. A HTML-fájlban adjon hozzá egy div karaktert a receptlista megjelenítéséhez a jobb oldali oszlopban. Adjon hozzá egy másik div-t az üzenet megjelenítéséhez, ha nincsenek receptek:
    <divosztály="jobb oldali oszlop">
    <divid="receptlista">div>
    <divid="receptek nélkül">Nincsenek receptjeid.div>
    div>
  2. Adjon hozzá néhány CSS-stílust a receptlistához:
    #receptlista {
    kijelző: rács;
    rács-sablon-oszlopok: ismétlés(automatikus illeszkedés, minimum maximum(300px, 1fr));
    rács-rés: 20px;
    }
    #receptek nélkül {
    kijelző: Flex;
    háttérszín: #FFCCCC;
    párnázás: 20px;
    határ-sugár: 8px;
    margin-top: 44px;
    }
  3. A JavaScript-fájl tetején szerezze be a receptlista és a hibaüzenet megjelenítéséhez használt HTML-elemeket:
    const receptlista = dokumentum.querySelector('#receptlista');
    const noReceptek = dokumentum.getElementById("receptek nélkül");
  4. Egy új függvényen belül lapozzon végig minden recepten a recepttömbben. Minden recepthez hozzon létre egy új div elemet a recept megjelenítéséhez:
    funkciódisplayReceptek() {
     receptList.innerHTML = '';
     receptek.forEach((recept, index) => {
    const receptDiv = dokumentum.createElement("div");
     });
    }
  5. Adjon hozzá némi tartalmat az egyedi recept div-hez a név, az összetevők és a módszer megjelenítéséhez. A div tartalmazni fog egy törlés gombot is. Ezt a funkciót a későbbi lépésekben adja hozzá:
    receptDiv.innerHTML = `
    ${recept.name}/h3>
    

    

    <erős>Hozzávalók:erős></p>
    

      

       ${recipe.ingredients.map(ingr =>`
    • ${ingr}
      • `      ).csatlakozik('')}
       </ul>
      <erős>Módszer:erős></p>
      

      ${recipe.method}</p>
  6. Adjon hozzá egy osztályt a div stílusához:
    receptDiv.classList.add('recept');
  7. Az új div hozzáfűzése a recipeList HTML elemhez:
    receptList.appendChild (recipeDiv);
  8. Adja hozzá az osztály stílusát a CSS-fájlhoz:
    .recept {
    határ: 1pxszilárd#ccc;
    párnázás: 10px;
    határ-sugár: 5px;
    doboz-árnyék: 0 2px 4pxrgba(0,0,0,.2);
    }
    .recepth3 {
    margin-top: 0;
    margó-alsó: 10px;
    }
    

    .receptul {
    árrés: 0;
    párnázás: 0;
    lista stílusú: egyik sem;
    }
    .receptulli {
    margó-alsó: 5px;
    }
  9. Ellenőrizze, hogy van-e több recept. Ha igen, rejtse el a hibaüzenetet: 
    noRecipes.style.display = receptek.hossz > 0? 'nincs': 'flex';
  10. Hívja meg az új függvényt a handleSubmit() függvényen belül, miután hozzáadta az új receptet a recepttömbhöz:
    displayReceptek();
  11. Az index.html megnyitása böngészőben:
  12. Adjon hozzá recepteket a listához, és nézze meg, amint megjelennek a jobb oldalon:

Hogyan lehet recepteket törölni

A recepteket a gombra kattintva törölheti Töröl gombot a recept utasításai alatt.

  1. Adjon hozzá néhány CSS-stílust a törlés gombhoz:
    .delete-gomb {
    háttérszín: #dc3545;
    szín: #fff;
    határ: egyik sem;
    határ-sugár: 5px;
    párnázás: 5px 10px;
    kurzor: mutató;
    }
    .delete-gomb:lebeg {
    háttérszín: #c82333;
    }
  2. A JavaScript-fájlban adjon hozzá egy új függvényt a recept törléséhez:
    funkcióhandleDelete(esemény) {
    }
  3. A JavaScript esemény segítségével keresse meg annak a receptnek az indexét, amelyre a felhasználó rákattintott:
    ha (event.target.classList.contains("törlés gomb")) {
    const index = event.target.dataset.index;
    }
  4. Az index segítségével törölheti a kiválasztott receptet a recepttömbből:
    receptek.splice (index, 1);
  5. Frissítse az oldalon megjelenő receptek listáját:
    displayReceptek();
  6. Adjon hozzá egy eseményfigyelőt a handleDelete() függvény meghívásához, amikor a felhasználó a törlés gombra kattint:
    receptList.addEventListener('kattint', handleDelete);
  7. Nyissa meg az index.html-t egy böngészőben. Adjon hozzá egy receptet a törlés gomb megtekintéséhez:

Hogyan keressünk recepteket

A keresősáv segítségével kereshet recepteket, hogy ellenőrizze, létezik-e egy bizonyos recept.

  1. A jobb oldali oszlopban adjon hozzá egy keresősávot a receptek listája elé:
    <divid="keresési szakasz">
    <h3>Receptek listájah3>
    <címkeszámára="keresőmező">Keresés:címke>
    <bemenettípus="szöveg"id="keresőmező">
    div>
  2. CSS-stílus hozzáadása a keresősáv címkéjéhez:
    címke[for="keresőmező"] {
    kijelző: Blokk;
    margó-alsó: 10px;
    }
  3. A script.js fájlban szerezze be a keresőmező HTML elemét:
    const keresőmező = dokumentum.getElementById("keresőmező");
  4. Egy új függvényen belül hozzon létre egy új tömböt, amely olyan recepteket tartalmaz, amelyek neve megegyezik a keresési bemenettel:
    funkciókeresés(lekérdezés) {
    const filteredRecipes = receptek.filter(recept => {
    Visszatérés recept.name.toLowerCase().includes (query.toLowerCase());
     });
    }
  5. Törölje a képernyőn jelenleg látható receptek listáját:
    receptList.innerHTML = '';
  6. Lapozzon át minden szűrt receptet, amely megfelel a keresési eredménynek, és hozzon létre egy új div elemet:
    filteredRecipes.forEach(recept => {
    const receptEl = dokumentum.createElement("div"); 
    });
  7. Adja hozzá a szűrt recept HTML-tartalmát a div-hez:
    receptEl.innerHTML = `
    ${recept.name}/h3>
    

    

    <erős>Hozzávalók:erős></p>
    

      

       ${recipe.ingredients.map(ingr =>`
    • ${ingr}
      • `      ).csatlakozik('')}
       </ul>
      <erős>Módszer:erős></p>
      

      ${recipe.method}</p>
  8. Adja hozzá ugyanazt a receptosztályt az egységes stílus érdekében. Adja hozzá az új div elemet az oldalon megjelenő listához:
    receptEl.classList.add('recept');
    receptList.appendChild (recipeEl);
  9. Adjon hozzá egy eseményfigyelőt a search() függvény meghívásához, amikor a felhasználó beírja a keresősávba:
    searchBox.addEventListener('bemenet', esemény => keresés (event.target.value));
  10. Ha a felhasználó töröl egy elemet, törölje a keresőmezőt a handleDelete() függvényen belül a lista frissítéséhez:
    searchBox.value = '';
  11. Nyissa meg az index.html fájlt egy webböngészőben az új keresősáv megtekintéséhez, és adjon hozzá néhány receptet:
  12. Adjon hozzá egy receptnevet a keresősávhoz a receptlista szűréséhez:

Projektek készítése HTML, CSS és JavaScript használatával

Ez a projekt bemutatja, hogyan lehet kezelőfelületet felépíteni egy egyszerű receptkönyvhöz. Vegye figyelembe, hogy nincs háttérkiszolgáló, és az alkalmazás nem tárolja az adatokat; ha frissíti az oldalt, a módosítások elvesznek. Az egyik lehetséges bővítmény, amelyen dolgozhat, az adatok mentésének és betöltésének mechanizmusa a localStorage használatával.

Webfejlesztési készségeinek fejlesztése érdekében folytassa a saját számítógépén létrehozható szórakoztató projektek felfedezését.