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ó.
- Adja hozzá az alapvető HTML-struktúrát egy új index.html nevű HTML-fájlhoz:
html>
<html>
<fej>
<cím>Recept alkalmazáscím>
fej>
<test>
<nav>
<h1>Recept alkalmazásh1>
nav>
<divosztály="tartály">
Tartalom itt
div>
test>
html> - 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> - 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> - 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"> - 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%;
} - 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ó;
} - 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> - 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'); - Hozzon létre egy új tömböt a felhasználó által az űrlapba beírt receptek tárolására:
hagyja receptek = []; - 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();
} - 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);
} - Törölje a bemeneti adatokat az űrlapon:
nameInput.value = '';
ingInput.value = '';
methodInput.value = ''; - 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); - 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.
- 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> - 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;
} - 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"); - 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");
});
} - 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>
- ${ingr} `).csatlakozik('')}
${recipe.ingredients.map(ingr =>`
</ul><erős>Módszer:erős></p>
${recipe.method}</p>
- Adjon hozzá egy osztályt a div stílusához:
receptDiv.classList.add('recept'); - Az új div hozzáfűzése a recipeList HTML elemhez:
receptList.appendChild (recipeDiv); - 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;
} - Ellenőrizze, hogy van-e több recept. Ha igen, rejtse el a hibaüzenetet:
noRecipes.style.display = receptek.hossz > 0? 'nincs': 'flex';
- 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(); - Az index.html megnyitása böngészőben:
- 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.
- 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;
} - A JavaScript-fájlban adjon hozzá egy új függvényt a recept törléséhez:
funkcióhandleDelete(esemény) {} - 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;
} - Az index segítségével törölheti a kiválasztott receptet a recepttömbből:
receptek.splice (index, 1); - Frissítse az oldalon megjelenő receptek listáját:
displayReceptek(); - 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); - 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.
- 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> - CSS-stílus hozzáadása a keresősáv címkéjéhez:
címke[for="keresőmező"] {
kijelző: Blokk;
margó-alsó: 10px;
} - A script.js fájlban szerezze be a keresőmező HTML elemét:
const keresőmező = dokumentum.getElementById("keresőmező"); - 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());
});
} - Törölje a képernyőn jelenleg látható receptek listáját:
receptList.innerHTML = ''; - 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");
}); - 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>
- ${ingr} `).csatlakozik('')}
${recipe.ingredients.map(ingr =>`
</ul><erős>Módszer:erős></p>
${recipe.method}</p>
- 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); - 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)); - 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 = ''; - 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:
- 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.
