329 lines
12 KiB
JavaScript
329 lines
12 KiB
JavaScript
|
|
const jedi = [ //const jedi - ustvari spremenljivko jedi, z [] pa označimo polje z več jedmi
|
|
// PREDJEDI
|
|
{ //z {} pa označimo posamezno jed
|
|
naziv: "Italjanske bruschette", //dodamo ji lastnosti (naziv:) in vrednost ("mučkalica")
|
|
opis: "Hrustljavo pečen kruh s svežim paradižnikom, baziliko, česnom in olivnim oljem.",
|
|
kategorija: "Predjedi", // to je kategorija po kateri se bodo jedi filtirale
|
|
alergeni: "gluten",
|
|
cena: 5.50 //številko ni treba napisat v "", decimalno vejico zamenja pika
|
|
},
|
|
{
|
|
naziv: "Patatas bravas",
|
|
opis: "Hrustljav pečen krompir s pikantno paradižnikovo omako in nežnim česnovim aiolijem.",
|
|
kategorija: "Predjedi",
|
|
alergeni: "/",
|
|
cena: 5.90
|
|
},
|
|
{
|
|
naziv: "Mediteranski mezze",
|
|
opis: "Izbor humosa, tzatzikija, oliv in sveže zelenjave s toplim pita kruhom.",
|
|
kategorija: "Predjedi",
|
|
alergeni: "gluten",
|
|
cena: 7.50
|
|
},
|
|
{
|
|
naziv: "Vietnamski poletni zavitki",
|
|
opis: "Riževi zavitki s kozicami, svežo zelenjavo in zelišči, postreženi z arašidovo omako.",
|
|
kategorija: "Predjedi",
|
|
alergeni: "morski sadeži, oreščki, soja",
|
|
cena: 7.50
|
|
},
|
|
{
|
|
naziv: "Gyoze",
|
|
opis: "Japonski polnjeni žepki s hrustljavo zapečenim dnom, postreženi s sojino omako za pomakanje.",
|
|
kategorija: "Predjedi",
|
|
alergeni: "gluten, jajca, soja",
|
|
cena: 6.90
|
|
},
|
|
{
|
|
naziv: "Nachosi za deljenje",
|
|
opis: "Tortilja čips s toplim sirom, jalapeni, salso, guacamolejem in kislo smetano.",
|
|
kategorija: "Predjedi",
|
|
alergeni: "jajca, gluten, laktoza",
|
|
cena: 7.90
|
|
},
|
|
{
|
|
naziv: "Sigara boregui",
|
|
opis: "Hrustljavi zavitki iz tankega testa s slanim sirom in zelišči, postreženi z jogurtovo omako.",
|
|
kategorija: "Predjedi",
|
|
alergeni: "gluten, laktoza",
|
|
cena: 6.50
|
|
},
|
|
{
|
|
naziv: "Indijske samose",
|
|
opis: "Zlato zapečeni žepki, polnjeni z začinjenim krompirjem in grahom, z metino omako.",
|
|
kategorija: "Predjedi",
|
|
alergeni: "gluten, jajca",
|
|
cena: 5.90
|
|
},
|
|
|
|
// GLAVNE JEDI
|
|
{
|
|
naziv: "Mučkalica",
|
|
opis: "Sočni koščki mesa v bogati paradižnikovi omaki s papriko in čebulo, postreženi s pečenim krompirjem ali prilogo po izbiri.",
|
|
kategorija: "Glavne jedi",
|
|
alergeni: "gluten",
|
|
cena: 13.90
|
|
},
|
|
{
|
|
naziv: "Chicken curry",
|
|
opis: "Nežno piščančje meso v kremni paradižnikovi omaki z aromatičnimi indijskimi začimbami, postreženo z basmatim rižem ali drugo prilogo po izbiri.",
|
|
kategorija: "Glavne jedi",
|
|
alergeni: "oreščki, laktoza",
|
|
cena: 14.50
|
|
},
|
|
{
|
|
naziv: "Lasagna al forno",
|
|
opis: "Plasti testenin z bogatim mesnatim ragujem, nežnim bešamelom in zapečeno skorjico iz parmezana.",
|
|
kategorija: "Glavne jedi",
|
|
alergeni: "gluten, laktoza",
|
|
cena: 13.50
|
|
},
|
|
{
|
|
naziv: "Pizza Diavola",
|
|
opis: "Napolitansko testo z bogato paradižnikovo omako, mozzarelo, pikantno salamo in ščepcem čilija, pečeno do popolno hrustljavega roba.",
|
|
kategorija: "Glavne jedi",
|
|
alergeni: "gluten, laktoza",
|
|
cena: 14.50
|
|
},
|
|
{
|
|
naziv: "Paella",
|
|
opis: "Žafranov riž z morskimi sadeži, česnom in svežimi zelišči, ki v vsak grižljaj prinesejo okus Sredozemlja.",
|
|
kategorija: "Glavne jedi",
|
|
alergeni: "morski sadeži",
|
|
cena: 17.90
|
|
},
|
|
{
|
|
naziv: "Dunajski zrezek",
|
|
opis: "Zlato pečen paniran zrezek z limono in krompirjevo ali drugo prilogo po izbiri.",
|
|
kategorija: "Glavne jedi",
|
|
alergeni: "jajca, gluten",
|
|
cena: 14.90
|
|
},
|
|
{
|
|
naziv: "Piščanec teriyaki",
|
|
opis: "Zapečen piščanec v sladko-slani omaki z rižem, hrustljavo zelenjavo in sezamom.",
|
|
kategorija: "Glavne jedi",
|
|
alergeni: "oreščki, jajca",
|
|
cena: 14.50
|
|
},
|
|
{
|
|
naziv: "Grška mussaka",
|
|
opis: "Plasti krompirja, jajčevcev in začinjenega mletega mesa, prekrite s kremnim bešamelom in zapečene do zlato rjave barve.",
|
|
kategorija: "Glavne jedi",
|
|
alergeni: "gluten, laktoza",
|
|
cena: 13.50
|
|
},
|
|
{
|
|
naziv: "Piščančji fajitas",
|
|
opis: "Začinjeni koščki piščanca s papriko in čebulo, postreženi s toplimi tortiljami, salso in guacamolejem.",
|
|
kategorija: "Glavne jedi",
|
|
alergeni: "gluten",
|
|
cena: 15.50
|
|
},
|
|
|
|
// PRILOGE
|
|
{
|
|
naziv: "Basmati riž",
|
|
opis: "Rahla, dišeča riževa priloga, odlična za curry in azijske jedi.",
|
|
kategorija: "Priloge",
|
|
alergeni: "/",
|
|
cena: 2.50
|
|
},
|
|
{
|
|
naziv: "Pečen krompir",
|
|
opis: "Zlato zapečen krompir z rožmarinom, česnom in izbranimi začimbami.",
|
|
kategorija: "Priloge",
|
|
alergeni: "/",
|
|
cena: 3.00
|
|
},
|
|
{
|
|
naziv: "Hrustljav pomfri",
|
|
opis: "Zlato pečen krompirček s hrustljavo skorjico in mehko sredico.",
|
|
kategorija: "Priloge",
|
|
alergeni: "/",
|
|
cena: 3.00
|
|
},
|
|
{
|
|
naziv: "Domač kruh",
|
|
opis: "Sveže pečen kruh s hrustljavo skorjico, idealen za pomakanje v omake.",
|
|
kategorija: "Priloge",
|
|
alergeni: "gluten",
|
|
cena: 2.00
|
|
},
|
|
|
|
// SLADICE
|
|
{
|
|
naziv: "Panna cotta",
|
|
opis: "Nežna vaniljeva smetana z osvežilnim prelivom iz gozdnih sadežev.",
|
|
kategorija: "Sladice",
|
|
alergeni: "laktoza",
|
|
cena: 5.50
|
|
},
|
|
{
|
|
naziv: "Baklava",
|
|
opis: "Plasti tankega hrustljavega testa z oreščki, prelite s sladkim sirupom.",
|
|
kategorija: "Sladice",
|
|
alergeni: "oreščki, gluten",
|
|
cena: 4.90
|
|
},
|
|
{
|
|
naziv: "Tiramisu",
|
|
opis: "Klasična kombinacija kave, rahle mascarponejeve kreme in kakava.",
|
|
kategorija: "Sladice",
|
|
alergeni: "laktoza, gluten, oreščki",
|
|
cena: 5.90
|
|
},
|
|
{
|
|
naziv: "Pohan sladoled",
|
|
opis: "Hrustljava zlata skorjica, ki skriva hladno vaniljevo sredico, s čokoladnim prelivom.",
|
|
kategorija: "Sladice",
|
|
alergeni: "gluten, jajce, laktoza",
|
|
cena: 6.50
|
|
},
|
|
{
|
|
naziv: "Crepes",
|
|
opis: "Tanke francoske palačinke po izbiri s čokoladnim namazom, marmelado ali limono in sladkorjem.",
|
|
kategorija: "Sladice",
|
|
alergeni: "gluten, jajca, laktoza",
|
|
cena: 4.90
|
|
},
|
|
{
|
|
naziv: "Jabolčni zavitek",
|
|
opis: "Dišeč zvitek z jabolki, cimetom in rozinami, postrežen topel z vaniljevim sladoledom.",
|
|
kategorija: "Sladice",
|
|
alergeni: "gluten, jajca, laktoza",
|
|
cena: 5.50
|
|
},
|
|
{
|
|
naziv: "Čokoladni souffle",
|
|
opis: "Topel čokoladni kolač s tekočo sredico in kepico vaniljevega sladoleda.",
|
|
kategorija: "Sladice",
|
|
alergeni: "gluten, jajca, laktoza, oreščki",
|
|
cena: 6.50
|
|
},
|
|
{
|
|
naziv: "Loukoumades",
|
|
opis: "Majhni zlato ocvrti grški miškasti grižljaji, preliti z medom in posuti s cimetom.",
|
|
kategorija: "Sladice",
|
|
alergeni: "jajca, gluten",
|
|
cena: 5.90
|
|
}
|
|
];
|
|
|
|
function izrisiJedilnik(kategorija) { //dodala kategorijo kot parameter funkcije
|
|
const jedilnik = document.querySelector("#jedilnik"); //poisce nas prazen div jedilnik
|
|
|
|
const sekcija = document.createElement("section"); //ustvari nov element <section>
|
|
sekcija.classList.add("jedilnik_kategorija"); //sectionu dodam ze obstojec razred - za CSS oblikovanje
|
|
|
|
const naslov = document.createElement("h2"); //spet naredimo element <h2>
|
|
naslov.textContent = kategorija; //v ta element h2 izpisemo "Predjedi"
|
|
|
|
sekcija.appendChild(naslov); //vstavi naslov (h2) v sekcijo
|
|
|
|
// Ustvarimo div za vodoravno pomikanje tabele.
|
|
const tabelaScroll = document.createElement("div");
|
|
tabelaScroll.classList.add("tabela_scroll");
|
|
|
|
// Ustvarimo tabelo.
|
|
const tabela = document.createElement("table");
|
|
|
|
// Ustvarimo naslov tabele.
|
|
const caption = document.createElement("caption");
|
|
caption.textContent = kategorija;
|
|
tabela.appendChild(caption); //dodamo caption v tabelo
|
|
|
|
// Ustvarimo glavo tabele.
|
|
const thead = document.createElement("thead");
|
|
const vrsticaGlave = document.createElement("tr");
|
|
|
|
const stolpci = ["Jed", "Opis", "Alergeni", "Cena"];
|
|
|
|
for (const stolpec of stolpci) { //namesto da bi pisala vsak th posebaj gre cez vse elemente stolpci, in za vsak element ustvari th (stolpec je spremenjlivka ki gre cez zapis stolpcii)
|
|
const th = document.createElement("th");
|
|
th.textContent = stolpec;
|
|
vrsticaGlave.appendChild(th);
|
|
}
|
|
|
|
thead.appendChild(vrsticaGlave);
|
|
tabela.appendChild(thead);
|
|
|
|
// Ustvarimo prazno telo tabele.
|
|
const tbody = document.createElement("tbody");
|
|
// Za vsako predjed ustvari novo vrstico tabele.
|
|
for (const jed of jedi) { //se premikamo po jedeh
|
|
if (jed.kategorija === kategorija) { //ce je kategorija predjed true potem
|
|
const vrstica = document.createElement("tr"); //vstavimo vrstico (tr)
|
|
|
|
const podatki = [ //naredimo polje podatkiu (spet polje z vec elementi) ki vsebuje lastnosti posamezde jedi (npr muckalica)
|
|
jed.naziv,
|
|
jed.opis,
|
|
jed.alergeni,
|
|
jed.cena.toLocaleString("sl-SI", { //posebaj izpis z min/mac dvema decimalkama v slo jeziku, na koncu pa dodan €
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
}) + " €"
|
|
];
|
|
|
|
for (const podatek of podatki) { //s podatkom gremo cez "podatki" in vsak element/lastnost posabej izpisemo v td
|
|
const td = document.createElement("td");
|
|
td.textContent = podatek;
|
|
vrstica.appendChild(td); //td nato vstavimo v vrstico
|
|
}
|
|
|
|
tbody.appendChild(vrstica);
|
|
}
|
|
}
|
|
tabela.appendChild(tbody);
|
|
|
|
tabelaScroll.appendChild(tabela);
|
|
sekcija.appendChild(tabelaScroll);
|
|
jedilnik.appendChild(sekcija);
|
|
|
|
}
|
|
|
|
const gumbi = document.querySelectorAll(".filter_gumb"); //element gumb za vsak button za pac izbiranje kategorije
|
|
|
|
// Ob kliku spremeni aktivni gumb.
|
|
for (const gumb of gumbi) {
|
|
|
|
gumb.addEventListener("click", function () { //ko kliknem na gumb za izbiro prikaza menija
|
|
|
|
|
|
for (const posamezenGumb of gumbi) { //najprej vsem gumbom odstranim aktivno
|
|
posamezenGumb.classList.remove("aktiven");
|
|
}
|
|
|
|
|
|
gumb.classList.add("aktiven"); //dodam aktiven SAMO kliknjenemu gumbu (sem izven for zanke)
|
|
|
|
const kategorija = gumb.dataset.kategorija;
|
|
|
|
prikaziKategorije(kategorija);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
const kategorije = ["Predjedi", "Glavne jedi", "Priloge", "Sladice"]; //ustvarjeno polje vseh kategorij
|
|
|
|
// Prikaže samo izbrano kategorijo oziroma vse kategorije.
|
|
function prikaziKategorije(izbranaKategorija) {
|
|
const jedilnik = document.querySelector("#jedilnik");
|
|
|
|
jedilnik.replaceChildren(); //iz elementa jedilnik odstrani vse njegove podrejene elemente
|
|
|
|
for (const kategorija of kategorije) {
|
|
if (izbranaKategorija === "Vse" || izbranaKategorija === kategorija) { // || pomeni ali, torej kadar uporabnik izbere vse ALI eno od kategorij
|
|
izrisiJedilnik(kategorija);
|
|
}
|
|
}
|
|
}
|
|
|
|
prikaziKategorije("Vse"); //da se ko se stan naloz najprej pokazejo vsi jedilniki
|
|
|
|
|
|
|