vse datoteke so bile prestavljene v mapo restavracija in v ustrezne podmape, v vseh datotekah so tudi popravljeni linki
This commit is contained in:
@@ -0,0 +1,328 @@
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
const hamburger = document.querySelector (".hamburger_meni"); /* naredim spremenljivko hamburger, preišve celoten dokument HRML in poisce prvi item z razredom .hamburger_meni, shrani referenco na prvi element v html ki ima ta razred */
|
||||
const meni = document.querySelector (".main_menu"); /*enako kot hamburger le da tukaj iscem prvi element s classom main_menu */
|
||||
const ikona = hamburger.querySelector("i"); /*tole bomo pa dodali da se bo spremenila ikona v x */
|
||||
|
||||
hamburger.addEventListener ("click", function (){ /*addEventListener je metoda za poslušanje dogodka, click je pa dogodek */
|
||||
meni.classList.toggle ("odprt"); /*classList predstavlja elemente CSS razreda, toglle pa ta element (odprt) dodaja/odstranja */
|
||||
const odprt = meni.classList.contains ("odprt"); /*spet nardimo spremenljivko, ki ji dodamo vrednost true ali false glede na to ali je meni odprt/zaprt (preverja ali je dodan pri classu main_meni odprt) */
|
||||
ikona.classList.toggle("fa-bars", !odprt); /*zdaj pa ko je odprt je prikazan x, zaprt (!odprt) pa tri crtice */
|
||||
ikona.classList.toggle("fa-xmark", odprt);
|
||||
hamburger.setAttribute ("aria-expanded", String(odprt)); /*setAtribute spremeni vrednost HTML atributa, v tem primeru arial-expanded iz false v true in obratno, string pa pretvori true/false v besedilo "true"/"false" in posodobi atribut.*/
|
||||
hamburger.setAttribute ("aria-label", odprt ? "Zapri meni" : "Odpri meni"); /*gledr na to ali je odprt true ali false se bo spremenil zapis (za tiste ki imajo ne morejo videti treh crtic) v odprt meni ali zaprt meni */
|
||||
});
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
|
||||
const recepti = document.querySelectorAll(".recepti_jedi"); //poiscem vse recepte
|
||||
|
||||
recepti.forEach(function(recept) { //funkcija gre cez vsak recept posebej
|
||||
|
||||
const osnovnePorcije = Number(recept.dataset.osnovnePorcije); //prebere osnovne porcije in iz stringa spremeni v stevilo ("4" = 4)
|
||||
const vnosPorcij = recept.querySelector(".stevilo_porcij"); //poisce polje za stevilo porciji samo v trenutnem receptu
|
||||
const sestavine = recept.querySelectorAll("[data-kolicina]"); //poisce kolicino vseh sestavin v receptu
|
||||
|
||||
vnosPorcij.addEventListener("input", function() { //ko spremenim vrednost polja se sprozi funkcija
|
||||
|
||||
const novePorcije = Number(vnosPorcij.value); //spet se prebere nova porcija in se spremeni v stevilo
|
||||
|
||||
if (!Number.isInteger(novePorcije) || novePorcije < 1 || novePorcije > 12) { //ce so nove porcije ne celo stevilo ali manjse od ena ali vecje od 12
|
||||
return; //se nic ne vrne
|
||||
}
|
||||
|
||||
sestavine.forEach(function(sestavina) { //funkcija za vsako sestavino
|
||||
|
||||
const osnovnaKolicina = Number(sestavina.dataset.kolicina); //prebere osnovno kolicino in jo pretvori v stevilo
|
||||
|
||||
const novaKolicina = osnovnaKolicina / osnovnePorcije * novePorcije; //preracuna kolicino sestavine za nove porcije
|
||||
|
||||
sestavina.textContent = Number(novaKolicina.toFixed(1)) //zaokrozimo na eno decimalno mesto, number pa odstrani nepotrebne 0 (200.0 = 200)
|
||||
.toLocaleString("sl-SI", { maximumFractionDigits: 1 }); //poskrbi da so decimalke napisane s slovensko vejico
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,293 @@
|
||||
// Pridobivanje HTML elementov querySelector izbere prvi element s tem classom ali id-jem
|
||||
const obrazec = document.querySelector("#obrazec_rezervacija");
|
||||
const ime = document.querySelector("#ime-priimek");
|
||||
const napakaIme = document.querySelector("#napaka-ime");
|
||||
const email = document.querySelector("#email");
|
||||
const napakaEmail = document.querySelector("#napaka-email");
|
||||
const telefon = document.querySelector("#telefon-st");
|
||||
const napakaTelefon = document.querySelector("#napaka-telefon");
|
||||
const datum = document.querySelector("#datum-obiska");
|
||||
const napakaDatum = document.querySelector("#napaka-datum");
|
||||
const ura = document.querySelector("#ura-obiska");
|
||||
const napakaUra = document.querySelector("#napaka-ura");
|
||||
const osebe = document.querySelector("#stevilo-oseb");
|
||||
const napakaOsebe = document.querySelector("#napaka-osebe");
|
||||
const soglasje = document.querySelector("#pogoji");
|
||||
const napakaSoglasje = document.querySelector("#napaka-pogoji");
|
||||
const potrditev = document.querySelector("#potrditev-rezervacije");
|
||||
const prostor = document.querySelector("#prostor");
|
||||
const opombe = document.querySelector("#opombe");
|
||||
|
||||
|
||||
const odpiralniCas = [
|
||||
[10, 22], // Nedelja
|
||||
[9, 22], // Ponedeljek
|
||||
null, // Torek - zaprto
|
||||
[9, 22], // Sreda
|
||||
[9, 22], // Četrtek
|
||||
[9, 23], // Petek
|
||||
[10, 23] // Sobota
|
||||
];
|
||||
|
||||
function preveriIme() { // Preveri, ali sta ime in priimek pravilno vnesena.
|
||||
const vrednost = ime.value.trim(); //odstrani presledke na zacetku in koncu
|
||||
const besede = vrednost.split(/\s+/); //razreze ime pri presledkih da dobimo tabelo (array)
|
||||
|
||||
if (besede.length !== 2 || besede[0].length < 2 || besede[1].length < 2) { //ce tabela nima dveh elementov, ali ima vsak element vsaj dve crki
|
||||
napakaIme.textContent = "Vnesite ime in priimek, vsak naj vsebuje vsaj dve črki."; //ce je if true izpise napako
|
||||
ime.classList.add("napacno"); //v tem primeru id-ju ime-priimek doda napacno
|
||||
return false; //in nam vrne kot rezultat funkcije false
|
||||
}
|
||||
else {
|
||||
napakaIme.textContent = ""; //ce ni napak se span ne izpise
|
||||
ime.classList.remove("napacno"); //odstrani se napacno pri id ime-priimek
|
||||
return true; //vrne funkcija true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function preveriEmail() {
|
||||
const vrednost = email.value.trim(); //spet odstranim presledke na zacetku in koncu
|
||||
const vzorec = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; //definiramo kako mora izgledati mail; ^ pomeni zacetek besetila, [^\s@]- pomeni da je to besedilo 1 ali vec znakov ki niso @ ali presledek, @[^\s@]- zahteva obvezno @ in za tem znakom vsaj 1 znak ki ni presledek ali @, \. - obvezna pika, za piko spet besedilo ki ni oresledek ali @, $ pomeni konec besedila
|
||||
// ce nek eklement ustreza vzorcu, vzprec=true, drugace pa false, https://www.w3schools.com/js/js_regexp.asp
|
||||
if (!vzorec.test(vrednost)) { //ce je vrednost vzorca NE true= torej false
|
||||
napakaEmail.textContent = "Vnesite veljaven e-poštni naslov."; //izpise se span
|
||||
email.classList.add("napacno");
|
||||
return(false);
|
||||
}
|
||||
else {
|
||||
napakaEmail.textContent = "";
|
||||
email.classList.remove("napacno");
|
||||
return(true);
|
||||
}
|
||||
}
|
||||
|
||||
function preveriTelefon (){
|
||||
const vrednost = telefon.value.trim();
|
||||
const vzorec = /^0\d{2} ?\d{3} ?\d{3}$/; //https://www.w3schools.com/js/js_regexp.asp, spet ^pomeni zacetek besedila, obvezno 0, \d{2} za ničko obvezno dve stevili (d- digit), ?- neobvezen presledek, \d{3} 3 stevila, $ zakljucek besedila
|
||||
if (!vzorec.test(vrednost)) {
|
||||
napakaTelefon.textContent = "Vnesite veljavno telefonsko številko.";
|
||||
telefon.classList.add("napacno");
|
||||
return false;
|
||||
}
|
||||
|
||||
else {
|
||||
napakaTelefon.textContent = "";
|
||||
telefon.classList.remove("napacno");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Preveri pravilnost datuma rezervacije.
|
||||
function preveriDatum() {
|
||||
const vrednost = datum.value; //elementu doda trenutno vrednost elementa value, torej tisto kar uporabnik izbere, npr. 4.november 2026 bi bilo 2026-11-04, vrne vrednost v obliki string
|
||||
const izbraniDatum = new Date(vrednost + "T00:00:00"); //tukaj pa iz stringa spremenim v pobjekt date, pac uporabno za datum
|
||||
const danVTednu = izbraniDatum.getDay(); // s tem pa ugotovimo kater dan v tednu je to, 0-nedelja, 1-ponedeljek, 2-torek... za cel teden, da bom lahko kasneje napisala da smo v torek zaprti
|
||||
|
||||
const danes = new Date(); // elementu danes dodam vrednost današnjega datuma
|
||||
danes.setHours(0, 0, 0, 0); //in nastavim čas na polnoč, vse datume primerjam ob polnoči da slučajnp to ne bi vpivalo na preverjanje ali je datum v preteklosti
|
||||
|
||||
if (vrednost === "") { //če je vrednost prazna potem
|
||||
napakaDatum.textContent = "Izberite datum rezervacije.";
|
||||
}
|
||||
else if (danes > izbraniDatum) { //če je današnji datum večji oz kasnejši od izbranega potem
|
||||
napakaDatum.textContent = "Datum ne sme biti v preteklosti.";
|
||||
}
|
||||
else if (danVTednu === 2) { //če je izbran dan v tednu torek
|
||||
napakaDatum.textContent = "Ob torkih je restavracija zaprta.";
|
||||
}
|
||||
else {
|
||||
napakaDatum.textContent = "";
|
||||
datum.classList.remove("napacno");
|
||||
return true; //če je datum prvilen se funkcija konča tukaj
|
||||
}
|
||||
|
||||
datum.classList.add("napacno");
|
||||
return false; //zapisano na koncu da se izognemo ponavljanju, ker do tega dela pridemo samo če je datum neustrezen
|
||||
}
|
||||
|
||||
// Preveri pravilnost ure rezervacije.
|
||||
function preveriUro() {
|
||||
const vrednost = ura.value;
|
||||
|
||||
// Najprej preverimo, ali sta datum in ura izbrana.
|
||||
if (vrednost === "" || datum.value === "") { //dan more biti izbran ker se delavni cas od dnva do dneva spreminja
|
||||
napakaUra.textContent = "Izberite datum in uro rezervacije.";
|
||||
ura.classList.add("napacno");
|
||||
return false;
|
||||
}
|
||||
|
||||
// Pridobimo odpiralni čas za izbrani dan.
|
||||
const izbraniDatum = new Date(datum.value + "T00:00:00");
|
||||
const danVTednu = izbraniDatum.getDay();
|
||||
const odpiralniCasDanes = odpiralniCas[danVTednu]; //sped zelimo dobiti dan v tednu (zgornji dve vrstici) da lahko na podlagi tega izberemo delovni cas
|
||||
|
||||
// Razdelimo izbrano uro na ure in minute.
|
||||
const deli = vrednost.split(":");
|
||||
const samoUra = Number(deli[0]);
|
||||
const samoMin = Number(deli[1]);
|
||||
|
||||
// Preverimo, ali je rezervacija vsaj eno uro v prihodnosti.
|
||||
const zdaj = new Date(); //to nam da cas da pripravimo mizo npr.
|
||||
const najmanjsiCas = zdaj.getTime() + 60 * 60 * 1000; //cas se zapisuje v milisekundah zato je za dodajo ene ure 60*60*1000
|
||||
const casRezervacije = new Date(datum.value + "T" + vrednost); //zelimo vedet datu in uro rezervacije, datum.value+"T"+vrednost je pa standardni zapis datuma, new Date pa uporabljamo zato da lahko z njim racunamo
|
||||
|
||||
if (odpiralniCasDanes === null) {
|
||||
napakaUra.textContent = "Ob torkih je restavracija zaprta.";
|
||||
}
|
||||
else {
|
||||
const odprtje = odpiralniCasDanes[0];
|
||||
const zaprtje = odpiralniCasDanes[1];
|
||||
const zadnjaUra = zaprtje - 1; //ne morejo se rezervirati ob zaprtju (samo zdrava pamet)
|
||||
|
||||
if (samoUra < odprtje) { //ce je ura manjsa od odprtja
|
||||
napakaUra.textContent = "Restavracija ob izbrani uri še ni odprta.";
|
||||
}
|
||||
else if (samoUra > zadnjaUra || (samoUra === zadnjaUra && samoMin > 0)) { //ce je ura vecja od zadnje ure, ali pa je enaka zadnji mozni uri in so minute vecje 0 (ker lahko se ob 21.00 rezerviras mizo)
|
||||
napakaUra.textContent = "Rezervacija je mogoča najpozneje eno uro pred zaprtjem.";
|
||||
}
|
||||
else if (casRezervacije.getTime() < najmanjsiCas) {
|
||||
napakaUra.textContent = "Rezervacijo morate oddati vsaj eno uro pred obiskom.";
|
||||
}
|
||||
else { //vse je pravilno
|
||||
napakaUra.textContent = "";
|
||||
ura.classList.remove("napacno");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
ura.classList.add("napacno"); //spet se izogibamo ponavljanju, to se zgodi vsakic ko je kaj narobe
|
||||
return false;
|
||||
}
|
||||
|
||||
//Preveri število oseb.
|
||||
function preveriOsebe() {
|
||||
const vrednost = Number(osebe.value); //iz stringa spremeni v number
|
||||
|
||||
if (vrednost<1 || vrednost>12 || !Number.isInteger(vrednost)) { //vrednost je manjsa od 1, je vecja od 12 ali ni celo stevilo
|
||||
napakaOsebe.textContent = "Število oseb mora biti med 1 in 12.";
|
||||
osebe.classList.add("napacno");
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
napakaOsebe.textContent = "";
|
||||
osebe.classList.remove("napacno");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function preveriSoglasje() {
|
||||
|
||||
if (!soglasje.checked) {
|
||||
napakaSoglasje.textContent = "Za oddajo rezervacije morate potrditi soglasje.";
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
napakaSoglasje.textContent = "";
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Preverjanje med tipkanjem
|
||||
ime.addEventListener("input", preveriIme); //funkcija se opravi ko zacnemo pisati v ime, se zacne izvajati funkcija
|
||||
email.addEventListener("input", preveriEmail);
|
||||
telefon.addEventListener("input", preveriTelefon);
|
||||
datum.addEventListener("select", preveriDatum); //tu imam select ker datum izbira ne vpisuje tako da je bolj logicno
|
||||
ura.addEventListener("change", preveriUro);
|
||||
osebe.addEventListener("input", preveriOsebe);
|
||||
soglasje.addEventListener("change", preveriSoglasje); //ker se bo samo spreminjala vrednost oznaceno ali ne (change ne input)
|
||||
|
||||
|
||||
obrazec.addEventListener("submit", function(event) { //ko oddamo funkcijo se izvede preverjanje
|
||||
event.preventDefault(); //preprecimo default preverjsnje ob submitu, torej ds preprecimo ponovno nalaganje strani
|
||||
|
||||
const imePravilno = preveriIme(); //elementu imePravilno dodamo vrednost true/false
|
||||
const emailPravilno = preveriEmail();
|
||||
const telefonPravilno = preveriTelefon();
|
||||
const datumPravilno = preveriDatum();
|
||||
const uraPravilno = preveriUro();
|
||||
const osebePravilno = preveriOsebe();
|
||||
const soglasjePravilno = preveriSoglasje();
|
||||
|
||||
|
||||
if (imePravilno && emailPravilno && telefonPravilno && datumPravilno && uraPravilno && osebePravilno && soglasjePravilno) {
|
||||
potrditev.replaceChildren();
|
||||
|
||||
const naslov = document.createElement("h3"); // ustvari element h3
|
||||
naslov.textContent = "Povzetek vaše rezervacije";
|
||||
|
||||
const sporocilo = document.createElement("p"); // ustvari element p
|
||||
sporocilo.textContent = "Podatki rezervacije so uspešno preverjeni!";
|
||||
|
||||
const podatki = document.createElement("p"); // ustvari element p za osnovne podatke
|
||||
podatki.textContent =
|
||||
"Ime in priimek: " + ime.value.trim() +
|
||||
" | Datum: " + datum.value +
|
||||
" | Ura: " + ura.value +
|
||||
" | Število oseb: " + osebe.value +
|
||||
" | Prostor: " + prostor.options[prostor.selectedIndex].text;
|
||||
|
||||
potrditev.append(naslov, sporocilo, podatki);
|
||||
|
||||
// Preverimo, ali je uporabnik izbral priložnost.
|
||||
const priloznost = document.querySelector('input[name="priloznost"]:checked');
|
||||
|
||||
if (priloznost !== null && priloznost.value !== "brez") { //ce priloznost ni prazna
|
||||
const podatek = document.createElement("p");
|
||||
podatek.textContent = "Priložnost: " + priloznost.nextElementSibling.textContent; //nextElementSibling isce naslednji element v tem starsevskem rezredu
|
||||
potrditev.append(podatek); //dodamo v podatek
|
||||
}
|
||||
|
||||
// Pridobimo vse označene posebne omejitve.
|
||||
const omejitve = document.querySelectorAll('input[name="posebne-omejitve"]:checked');
|
||||
|
||||
if (omejitve.length > 0) { //ce dolzina omejitv vecja od 0
|
||||
const seznam = []; //ustvarimo seznam (array-tabelo)
|
||||
|
||||
omejitve.forEach(function(omejitev) { //za vsak oznacen checkbox
|
||||
seznam.push(omejitev.nextElementSibling.textContent); //dodamo na seznam vsak oznacen checkbox, spet se premilkamo po elementh starsevskega razreda
|
||||
});
|
||||
|
||||
const podatek = document.createElement("p");
|
||||
podatek.textContent = "Posebne omejitve: " + seznam.join(", "); //seuznam.join, vse podsatke iz seznama zdruzi v string
|
||||
potrditev.append(podatek);
|
||||
}
|
||||
|
||||
// Preverimo, ali je uporabnik napisal opombe.
|
||||
if (opombe.value.trim() !== "") {
|
||||
const podatek = document.createElement("p");
|
||||
podatek.textContent = "Opombe: " + opombe.value.trim(); //potem izpisemo zapisane opombe, pac trimamo presledke odspredaj in zadaj
|
||||
potrditev.append(podatek);
|
||||
}
|
||||
|
||||
potrditev.hidden = false; // prikažemo povzetek rezervacije
|
||||
}
|
||||
else {
|
||||
potrditev.hidden = true; // skrijemo povzetek, če podatki niso pravilni
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
obrazec.addEventListener("reset", function() {
|
||||
|
||||
// Izbrišemo vsa sporočila o napakah.
|
||||
const napake = obrazec.querySelectorAll(".sporocilo_napake");
|
||||
|
||||
napake.forEach(function(napaka) {
|
||||
napaka.textContent = "";
|
||||
});
|
||||
|
||||
// Odstranimo rdeče obrobe napačnih polj.
|
||||
const napacnaPolja = obrazec.querySelectorAll(".napacno"); //vsa oilja ki imajo napacno
|
||||
|
||||
napacnaPolja.forEach(function(polje) {
|
||||
polje.classList.remove("napacno");
|
||||
});
|
||||
|
||||
// Skrijemo potrditev rezervacije.
|
||||
potrditev.hidden = true;
|
||||
potrditev.replaceChildren();
|
||||
});
|
||||
Reference in New Issue
Block a user