Modern Recept Kalkulátor – webalkalmazás JSON alapokon

A konyha és a programozás közös pontja a precíz mértékek és az átlátható szerkezet. A Recept Kalkulátor webalkalmazás pontosan erre épül: egyszerűen kezelhető, modern kinézetű eszköz, amellyel néhány kattintással kiszámolhatjuk, miből mennyi kell egy adott fogáshoz. A program egy minta, amely segít neked abban, hogy tovább tudd vinni és fejleszteni az ötletet és segítse a munkádat.

✨ Fő funkciók

• JSON alapú adatkezelés: az összes hozzávaló és recept külső .json fájlokban tárolódik, így könnyen bővíthető és szerkeszthető.
• Recept hozzáadás: modál ablakon keresztül adhatunk meg új recepteket, hozzávalókat és adagszámot.
• Hozzávaló-szűrés: a Select2 segítségével több hozzávalóra is kereshetünk, tag-szerű választási lehetőségekkel.
• Reszponzív Masonry grid: a receptek modern, 3 oszlopos rácselrendezésben jelennek meg, amely mobilon 1 oszlopra áll át.
• Lapozás: a receptek közötti navigációt lapozó biztosítja, így nagyobb adatbázisnál is átlátható marad a felület.
• Dark mode stílus: sötét háttér, letisztult tipográfia, élénk kék és sárga kiemelésekkel.

📂 Fájlstruktúra

A projekt átlátható mappaszerkezetben épül fel:

project-root/ │ ├── css/ │   └── style.css         # Dark theme, kártyák, grid, Select2 és lapozó stílusok │ ├── js/ │   ├── script.js         # Receptek betöltése, mentése, törlése localStorage-ból │   ├── filters.js        # Keresés és hozzávaló-alapú szűrés │   └── layout.js         # Masonry grid és lapozás kezelése │ ├── json/ │   ├── ingredients.json  # Hozzávalók listája, mértékegységekkel │   └── recipes.json      # Receptadatbázis (cím, hozzávalók, adagszám) │ └── index.html            # Főoldal, Bootstrap + Select2 + Masonry integráció 

⚙️ Technológiák

• HTML5 + CSS3 (Bootstrap 5 + egyedi dark theme)
• JavaScript/jQuery – egyszerű DOM-kezelés és localStorage mentés
• Select2 – többválasztós, kereshető hozzávaló-választó
• Masonry.js – reszponzív kártyaelrendezés
• JSON fájlok – könnyen bővíthető adatbázis receptekhez és hozzávalókhoz

A Recept Kalkulátor ideális alap egy személyes digitális szakácskönyvhöz. A JSON-alapú megközelítés miatt könnyen bővíthető új hozzávalókkal és receptekkel, a modern UI pedig kényelmes használatot biztosít akár mobilon is.

A forráskódot a lap alján tudod letölteni.