urejen povzetek rezervacije

js/rezervacija.js

@@ -15,6 +15,9 @@ 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
@@ -209,12 +212,61 @@ obrazec.addEventListener("submit", function(event) { //ko oddamo funkcijo se izv
     const osebePravilno = preveriOsebe();
     const soglasjePravilno = preveriSoglasje();
 
+    
 if (imePravilno && emailPravilno && telefonPravilno && datumPravilno && uraPravilno && osebePravilno && soglasjePravilno) {
-        potrditev.textContent = "Podatki rezervacije so uspešno preverjeni!";
-        potrditev.hidden = false;
+    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
     }
 
-    else {
-    potrditev.hidden = true;
-    }
 });

stylesheet.css

@@ -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;