Add displaying of gallery cards.

views/main/index.html

@@ -50,7 +50,7 @@
                 <p>Интересные Ссылкы</p>
             </button>
 
-            <button id="travelButton">
+            <button id="galleryButton">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                     <circle cx="8.5" cy="8.5" r="1.5"></circle>
@@ -159,23 +159,14 @@
             </div>
 
             <div id="gallery" style="display:none">
+                <div id="galleryContainer"></div>
+
                 <template id="galleryCard">
                     <div class="card">
                         <h1></h1>
                         <img>
                     </div>
                 </template>
-
-                <template id="backCard">
-                    <div class="card backCard">
-                        <h1>BACK</h1>
-
-                        <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <polyline points="9 14 4 9 9 4"></polyline>
-                            <path d="M20 20v-7a4 4 0 0 0-4-4H4"></path>
-                        </svg>
-                    </div>
-                </template>
             </div>
 
             <div id="learn" class="cardContainer" style="display:none"></div>
@@ -268,7 +259,16 @@
                 fetch("/gallery/retrieve")
                     .then(response => response.json())
                     .then((response)=>{
-                        console.log(response);
+                        let container = document.getElementById("galleryContainer");
+                        let template = document.getElementById("galleryCard").content.children[0];
+
+                        for(let i = 0; i < response.length; i++){
+                            let card = template.cloneNode(true);
+                            card.children[0].innerText = response[i].title;
+                            card.children[1].src = response[i].images[0];
+                            card.children[1].alt = `${response[i].title} thumbnail`;
+                            container.appendChild(card);
+                        }
                     })
                     .catch((err)=>{
                         console.log(err);