dodana funkcija za izpis jedi (zaenkrat samo predjedi) in popravljen CSS kej je bila table raztegnjena cez celo stran (max-width sem napisala 2x in je bil pravilen preglasen)

js/jedilnik.js

@@ -212,3 +212,76 @@ const jedi = [ //const jedi - ustvari spremenljivko jedi, z [] pa označimo polj
     }
 ];
 
+function izrisiJedilnik() {
+    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 = "Predjedi"; //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 = "Predjedi";
+    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 === "Predjedi") { //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);
+
+}
+
+izrisiJedilnik();

stylesheet.css

@@ -403,12 +403,12 @@ footer p {
 
 /* kategorije jedilnika */
 
-.jedilnik_kategorija {
+#jedilnik {
     margin-bottom: 4rem;
 }
 
-.jedilnik_kategorija h2,
-.jedilnik_kategorija p {
+#jedilnik h2,
+#jedilnik p {
     text-align: center;
 }
 
@@ -424,9 +424,11 @@ footer p {
 }
 
 /* Preprečimo, da bi vsebina raztegnila stran */
-.jedilnik_page,
-.jedilnik_kategorija {
+.jedilnik_page, #jedilnik {
     min-width: 0;
+}
+
+#jedilnik {
     max-width: 100%;
 }