vse datoteke so bile prestavljene v mapo restavracija in v ustrezne podmape, v vseh datotekah so tudi popravljeni linki

js/rezervacija.js

@@ -1,75 +0,0 @@
-// 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");
-
-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
-    if (!vzorec.test(vrednost)) {
-        napakaTelefon.textContent = "Vnesite veljavno telefonski številko.";
-        telefon.classList.add("napacno");
-        return false;
-    }
-
-    else {
-        napakaTelefon.textContent = "";
-        telefon.classList.remove("napacno");
-        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);
-
-obrazec.addEventListener("submit", function(event) { //ko oddamo funkcijo se izvede preverjanje
-    event.preventDefault(); //preprecimo default preverjsnje ob submitu
-
-    const imePravilno = preveriIme(); //elementu imePravilno dodamo vrednost true/false
-    const emailPravilno = preveriEmail();
-    const telefonPravilno = preveriTelefon();
-
-    if (imePravilno && emailPravilno && telefonPravilno) {
-            //se  morem preveriti ostale vrednosti
-    }
-});

restavracija/css/stylesheet.css

@@ -236,7 +236,7 @@ footer p {
             var(--barva-hero-prekrivna),
             var(--barva-hero-prekrivna) /*da je zmanjšana prosojnost slike ozadja, da tekst bolj "pade v oči" */
         ),
-        url("restavracija.png");
+        url("../slike/restavracija.png");
 
     background-size: cover;
     background-position: center;
@@ -787,6 +787,18 @@ footer p {
     cursor: pointer
 }
 
+.potrditev_rezervacije:not([hidden]) {
+    background-color: var(--barva-kartice);
+    border-left: 0.3rem solid var(--barva-poudarek);
+    border-radius: var(--zaobljenost);
+    padding: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+.potrditev_rezervacije[hidden] {
+    display: none;
+}
+
 /* on nas, besedilo in slika restavracije*/
 .nasa_zgodba_grid {
     display: grid;
@@ -844,6 +856,13 @@ footer p {
     font-weight: 700;
 }
 
+.zemljevid {
+    width: 400px;
+    max-width: 100%;
+    height: 350px;
+    border: 1px solid black;
+}
+
 /* tablica 600px do 1000px */
 @media (min-width: 600px) and (max-width: 1000px) {
     /* Navigacija ostane vidna in se po potrebi prelomi. */
@@ -892,6 +911,11 @@ footer p {
         flex-direction: column;
         align-items: stretch;
     }
+
+    .zemljevid {
+    width: calc(100% - 2rem);
+    height: 350px;
+    }
 }
 
 /* telefon do 600px */
@@ -1022,6 +1046,8 @@ footer p {
         flex-direction: column;
         align-items: stretch;
     }
+
+
 }
 
 /* dark mode, samo spremenjene spremenljivke css */

restavracija/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="sl">
 <head>
-    <link rel="stylesheet" href="stylesheet.css">
+    <link rel="stylesheet" href="css/stylesheet.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Domov | Za prste obliznit</title>
@@ -10,8 +10,8 @@
 <header class="site_header">
     <nav class="nav_bar">
         <a class="logo" href="index.html">
-            <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
-            <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
+            <img src="slike/logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+            <img src="slike/logo.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
         <button class="hamburger_meni" type="button" aria-label="Odpri meni" aria-expanded="false">
@@ -44,7 +44,7 @@
             <div class="jedi_grid">
                 <article class="jedi_card">
                     <figure class="card_slika">
-                        <img src="muckalica.png" alt="mučkalica">
+                        <img src="slike/muckalica.png" alt="mučkalica">
                         <span class="znacka_novo">Novo</span>
                         <figcaption>Mučkalica</figcaption>
                     </figure>
@@ -55,7 +55,7 @@
                 </article>
                 <article class="jedi_card">
                     <figure class="card_slika">
-                        <img src="pizza_diavola.png" alt="pizza diavola">
+                        <img src="slike/pizza_diavola.png" alt="pizza diavola">
                         <figcaption>Pizza diavola</figcaption>
                     </figure>
                     <div class="card_vsebina">
@@ -65,7 +65,7 @@
                 </article>
                 <article class="jedi_card">
                     <figure class="card_slika">
-                        <img src="paella.png" alt="Paella">
+                        <img src="slike/paella.png" alt="Paella">
                         <figcaption>Paella</figcaption>
                     </figure>
                     <div class="card_vsebina">

restavracija/jedilnik.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="sl">
 <head>
-    <link rel="stylesheet" href="stylesheet.css">
+    <link rel="stylesheet" href="css/stylesheet.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Jedilnik | Za prste obliznit</title>
@@ -10,8 +10,8 @@
 <header class="site_header">
     <nav class="nav_bar">
         <a class="logo" href="index.html">
-            <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
-            <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
+            <img src="slike/logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+            <img src="slike/logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
         <ul class="main_menu">

restavracija/js/recepti.js

@@ -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
+
+        });
+
+    });
+
+});

restavracija/js/rezervacija.js

@@ -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();
+});

restavracija/o_nas.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="sl">
 <head>
-    <link rel="stylesheet" href="stylesheet.css">
+    <link rel="stylesheet" href="css/stylesheet.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>O nas | Za prste obliznit</title>
@@ -11,8 +11,8 @@
 <header class="site_header">
     <nav class="nav_bar">
         <a class="logo" href="index.html">
-            <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
-            <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
+            <img src="slike/logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+            <img src="slike/logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
         <ul class="main_menu">
@@ -45,7 +45,7 @@
                 </p>
             </div>
             <figure>
-                <img src="restavracija.png" alt="slika restavracije">
+                <img src="slike/restavracija.png" alt="slika restavracije">
                 <figcaption>Naša restavracija</figcaption>
             </figure>
         </div>
@@ -93,8 +93,18 @@
                     3212 Vojnik<br>
                     Slovenija
                 </i></p>
-        <iframe width="400px" height="350" src="https://www.openstreetmap.org/export/embed?bbox=15.325708128511907%2C46.29054746034702%2C15.329828001558782%2C46.2928901216514&amp;layer=mapnik&amp;marker=46.291718803524695%2C15.327768065035343" style="border: 1px solid black"></iframe><br>
-        <small><a href="https://www.openstreetmap.org/?mlat=46.291719&amp;mlon=15.327768#map=17/46.291719/15.327768">Prikaži večji zemljevid</a></small>
+        <iframe class="zemljevid"
+            src="https://www.openstreetmap.org/export/embed?bbox=15.325708128511907%2C46.29054746034702%2C15.329828001558782%2C46.2928901216514&amp;layer=mapnik&amp;marker=46.291718803524695%2C15.327768065035343"
+            title="Lokacija restavracije">
+        </iframe>
+
+        <br>
+
+        <small>
+            <a href="https://www.openstreetmap.org/?mlat=46.291719&amp;mlon=15.327768#map=17/46.291719/15.327768">
+                Prikaži večji zemljevid
+            </a>
+        </small>
         <br><br>
     </main>
     <footer>

restavracija/recepti.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="sl">
 <head>
-    <link rel="stylesheet" href="stylesheet.css">
+    <link rel="stylesheet" href="css/stylesheet.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Recepti | Za prste obliznit</title>
@@ -10,8 +10,8 @@
 <header class="site_header">
     <nav class="nav_bar">
         <a class="logo" href="index.html">
-            <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
-            <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
+            <img src="slike/logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+            <img src="slike/logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
         <ul class="main_menu">
@@ -37,11 +37,11 @@
         <h2>Svetovni okusi. Vaša kuhinja</h2>
         <p>Navdihnjeni s potovanj, ustvarjeni za vašo mizo. Odkrite recepte z različnih koncev sveta in prinesi košček kulinaričnega potovanja v svoj dom.</p> <br>
     </section>
-        <article class="recepti_jedi" >
+        <article class="recepti_jedi" data-osnovne-porcije="4" >
             <h2 id="muckalica">Mučkalica </h2>
             <div class="recepti_grid">
                 <figure class="recepti_slika">
-                    <img src="muckalica.png" alt="mučkalica">
+                    <img src="slike/muckalica.png" alt="mučkalica">
                     <figcaption>Mučkalica</figcaption>
                 </figure>
                 <div class="o_receptu">
@@ -54,23 +54,23 @@
                                 cca. 70min
                             </li>
                             <li><b>Število porciji</b> <br>
-                                4 porcije
+                                <input type="number" class="stevilo_porcij" aria-label="Število porcij" min="1" max="12" step="1" value="4" style="width: 3.5em; font: inherit; text-align: center; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0.3rem;"> porcije
                             </li>
                         </ul>
                     </div>
                     <div class="recepti_sestavine">
                         <h3>Sestavine</h3>
                         <ul>
-                            <li>800g svinjskega vratu ali plečeta</li>
-                            <li>3 večje rdeče paprike</li>
-                            <li>2 srednje veliki čebuli</li>
-                            <li>3 stroki česnja</li>
-                            <li>400g sesekljanega paradižnika iz pločevinke</li>
-                            <li>2 žlici paradižnikove mezge</li>
-                            <li>3 žlice olja</li>
-                            <li>150 ml vode</li>
-                            <li>1 žlička sladke mlete paprike</li>
-                            <li>pol žličke dimljene paprike (po želji)</li>
+                            <li><span data-kolicina="800">800</span>g svinjskega vratu ali plečeta</li>
+                            <li><span data-kolicina="3">3</span> večje rdeče paprike</li>
+                            <li><span data-kolicina="2">2</span> srednje veliki čebuli</li>
+                            <li><span data-kolicina="3">3</span> stroki česnja</li>
+                            <li><span data-kolicina="400">400</span>g sesekljanega paradižnika iz pločevinke</li>
+                            <li><span data-kolicina="2">2</span> žlici paradižnikove mezge</li>
+                            <li><span data-kolicina="3">3</span> žlice olja</li>
+                            <li><span data-kolicina="150">150</span> ml vode</li>
+                            <li><span data-kolicina="1">1</span> žlička sladke mlete paprike</li>
+                            <li><span data-kolicina="0.5">0,5</span> žličke dimljene paprike (po želji)</li>
                             <li>sol in sveže mlet poper</li>
                             <li>Ščepec čilija (po želji) </li>
                             <li>svež peteršilj za postrežbo</li>
@@ -110,11 +110,11 @@
             <a class="gumb_3" href="#na_vrh">Na vrh strani</a>
         </article>
         <br>
-        <article class="recepti_jedi">
+        <article class="recepti_jedi" data-osnovne-porcije="4">
             <h2 id="pizza_diavola">Napolitanska pizza Diavola</h2>
             <div class="recepti_grid">
                 <figure class="recepti_slika">
-                    <img src="pizza_diavola.png" alt="pizza diavola">
+                    <img src="slike/pizza_diavola.png" alt="pizza diavola">
                     <figcaption>Pizza diavola</figcaption>
                 </figure>
                 <div class="o_receptu">
@@ -127,21 +127,21 @@
                                 cca. 13-25ur
                             </li>
                             <li><b>Število pic</b> <br>
-                                4 pice
+                                <input type="number" class="stevilo_porcij" aria-label="Število pic" min="1" max="12" step="1" value="4" style="width: 3.5em; font: inherit; text-align: center; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0.3rem;"> pice
                             </li>
                         </ul>
                     </div>
                     <div class="recepti_sestavine">
                     <h3>Sestavine</h3>
                         <ul>
-                            <li>600g moke tipa 00</li>
-                            <li>390g hladne vode</li>
-                            <li>18g soli</li>
-                            <li>1g suhega instant kvasa (ali približno 3g svežega) </li>
-                            <li>400g olupljenih pelatov</li>
-                            <li>300g mozzarele za pizzo</li>
-                            <li>200g pikantne salame</li>
-                            <li>1 žlička origana</li>
+                            <li><span data-kolicina="600">600</span>g moke tipa 00</li>
+                            <li><span data-kolicina="390">390</span>g hladne vode</li>
+                            <li><span data-kolicina="18">18</span>g soli</li>
+                            <li><span data-kolicina="1">1</span>g suhega instant kvasa (ali približno <span data-kolicina="3">3</span>g svežega) </li>
+                            <li><span data-kolicina="400">400</span>g olupljenih pelatov</li>
+                            <li><span data-kolicina="300">300</span>g mozzarele za pizzo</li>
+                            <li><span data-kolicina="200">200</span>g pikantne salame</li>
+                            <li><span data-kolicina="1">1</span> žlička origana</li>
                             <li>sveža bazilika</li>
                             <li>malo olivnega olja</li>
                             <li>čili kosmiči (po želji) </li>
@@ -158,7 +158,7 @@
                     </li>
                     <li>
                         <b>Pusti vzhajati</b>
-                        <p>Testo pokrij in pusti približno 1 uro pri sobni temperaturi. Nato ga razdeli na 4 enake kroglice, jih shrani v pokrito posodo in pusti vzhajati še približno 11–23 ur v hladilniku. Pred oblikovanjem jih vzemi iz hladilnika približno 2 uri prej.</p>
+                        <p>Testo pokrij in pusti približno 1 uro pri sobni temperaturi. Nato ga razdeli na <span data-kolicina="4">4</span> enake kroglice, jih shrani v pokrito posodo in pusti vzhajati še približno 11–23 ur v hladilniku. Pred oblikovanjem jih vzemi iz hladilnika približno 2 uri prej.</p>
                     </li>
                     <li>
                         <b>Pripravi paradižnikovo omako</b>
@@ -185,11 +185,11 @@
             <a class="gumb_3" href="#na_vrh">Na vrh strani</a>
         </article>
         <br>
-        <article class="recepti_jedi">
+        <article class="recepti_jedi" data-osnovne-porcije="4">
             <h2 id="paella">Španska paella z morskimi zadeži</h2>
             <div class="recepti_grid">
                 <figure class="recepti_slika">
-                    <img src="paella.png" alt="paella">
+                    <img src="slike/paella.png" alt="paella">
                     <figcaption>Paella</figcaption>
                 </figure>
                 <div class="o_receptu">
@@ -202,25 +202,25 @@
                                 cca. 50min
                             </li>
                             <li><b>Število porciji</b> <br>
-                                4 porcije
+                                <input type="number" class="stevilo_porcij" aria-label="Število porcij" min="1" max="12" step="1" value="4" style="width: 3.5em; font: inherit; text-align: center; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0.3rem;"> porcije
                             </li>
                         </ul>
                     </div>
                     <div class="recepti_sestavine">
                         <h3>Sestavine</h3>
                         <ul>
-                            <li>320g riža za paello (npr. bomba ali podobna kratkozrnata sorta)</li>
-                            <li>300g očiščenih kozic</li>
-                            <li>300g školjk, dobro očiščenih</li>
-                            <li>200g lignjev, narezanih na kolobarje</li>
-                            <li>1 srednje velika čebula</li>
-                            <li>1 rdeča paprika</li>
-                            <li>3 stroki česna</li>
-                            <li>250g sesekljanega paradižnika</li>
-                            <li>900g ribje jušne osnove (približno; odvisno od riža)</li>
+                            <li><span data-kolicina="320">320</span>g riža za paello (npr. bomba ali podobna kratkozrnata sorta)</li>
+                            <li><span data-kolicina="300">300</span>g očiščenih kozic</li>
+                            <li><span data-kolicina="300">300</span>g školjk, dobro očiščenih</li>
+                            <li><span data-kolicina="200">200</span>g lignjev, narezanih na kolobarje</li>
+                            <li><span data-kolicina="1">1</span> srednje velika čebula</li>
+                            <li><span data-kolicina="1">1</span> rdeča paprika</li>
+                            <li><span data-kolicina="3">3</span> stroki česna</li>
+                            <li><span data-kolicina="250">250</span>g sesekljanega paradižnika</li>
+                            <li><span data-kolicina="900">900</span>g ribje jušne osnove (približno; odvisno od riža)</li>
                             <li>ščepec žafrana</li>
-                            <li>1 žlička sladke mlete paprike</li>
-                            <li>3 žlice olivnega olja</li>
+                            <li><span data-kolicina="1">1</span> žlička sladke mlete paprike</li>
+                            <li><span data-kolicina="3">3</span> žlice olivnega olja</li>
                             <li>sol in poper</li>
                             <li>limona</li>
                             <li>svež peteršilj</li>

restavracija/rezervacija.html

@@ -1,7 +1,8 @@
+
 <!DOCTYPE html>
 <html lang="sl">
 <head>
-    <link rel="stylesheet" href="stylesheet.css">
+    <link rel="stylesheet" href="css/stylesheet.css">
     <script src="java_script.js"></script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,8 +12,8 @@
     <header class="site_header">
         <nav class="nav_bar">
             <a class="logo" href="index.html">
-                <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
-                <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
+                <img src="slike/logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+                <img src="slike/logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
                 <span>Za prste obliznit</span>
             </a>
             <ul class="main_menu">
@@ -48,16 +49,26 @@
             </p>
         <h2>Rezervacija</h2>
         <p>Izpolnite podatke in pošljite zahtevo za restavracijo.</p>
-        <form id="obrazec_rezervacija" method="get" novalidate> <!novalidate pomeni da bomo lahko dodali svoje napise za opozorila!>
+        <form id="obrazec_rezervacija" method="get" novalidate> <!-- novalidate pomeni da bomo lahko dodali svoje napise za opozorila -->
             <fieldset class="field_rezervacija">
                 <legend>Podrobnosti rezervacije:</legend>
 
-                Datum obiska
-                <input type="date" id="datum-obiska" name="datum-obiska" required>
-                Ura obiska
-                <input type="time" id="ura-obiska" name="ura-obiska" min="10:00" max="21:00" required>
-                Število oseb
-                <input type="number" min="1" max="11" id="stevilo-oseb" name="stevilo-oseb" required>
+                <label for="datum-obiska">Datum obiska</label>
+                <div class="vnos_rezervacija">
+                    <input type="date" id="datum-obiska" name="datum-obiska" required>
+                    <span class="sporocilo_napake" id="napaka-datum"></span>
+                </div>
+                <label for="ura-obiska">Ura obiska</label>
+                <div class="vnos_rezervacija">
+                    <input type="time" id="ura-obiska" name="ura-obiska" required>
+                    <span class="sporocilo_napake" id="napaka-ura"></span>
+                </div>
+                <label for="stevilo-oseb">Število oseb</label>
+                <div class="vnos_rezervacija">
+                    <input type="number" id="stevilo-oseb"
+                        name="stevilo-oseb" min="1" max="12" required> <!-- in in max sem obdrzala ker potem se prikazejo samo vrednost med 1 in 12 na izbiro, vseeno sem naredila validacijo v js -->
+                    <span class="sporocilo_napake" id="napaka-osebe"></span>
+                </div>
                 Prostor:
                     <select id="prostor" name="prostor">
                         <option value="notranjost">Notranjost</option>
@@ -71,7 +82,7 @@
                 <div class="vnos_rezervacija">
                     <input type="text" id="ime-priimek" name="ime-priimek"
                         placeholder="Neža Novak" required>
-                    <span class="sporocilo_napake" id="napaka-ime"></span> <!span bo prostor kjer se bodo izpisale napake!>
+                    <span class="sporocilo_napake" id="napaka-ime"></span> <!-- span bo prostor kjer se bodo izpisale napake -->
                 </div>
                 <label for="email">E-poštni naslov</label>
                 <div class="vnos_rezervacija">
@@ -132,15 +143,17 @@
                 <br>
                 <textarea id="opombe" placeholder="Npr. potrebujete stolček za otroka, ..." name="opombe" rows="5" cols="50" ></textarea>
                 <br>
-                 <div class="pogoji_uporabe">
+                <div class="pogoji_uporabe"> <!-- v js se pogoji preimenujejeo v soglasje -->
                     <input type="checkbox" id="pogoji" name="pogoji" value="da" required>
-                    <label for="pogoji">Strinjam se z obdelavo osebnih podatkov </label>
+                    <label for="pogoji">Strinjam se z obdelavo osebnih podatkov</label>
+                    <span class="sporocilo_napake" id="napaka-pogoji"></span>
                 </div>
             </fieldset>
             <br><br>
             <input class="gumb_osnovni_obratno" type="submit" value="Oddaja rezervacije">
             <input class="gumb_manj" type="reset" value="Ponastavi">
         </form>
+        <div id="potrditev-rezervacije" class="potrditev_rezervacije" hidden></div> <!-- hidden da ostane skrit ko se stran odpre oz dokler ga ne potrebujem -->
         <br><br>
     </main>
     <footer>