Modificações funções para mudar tema da página e exibir galeria de im…

…agens da série
Vieiraanap · Aug 26, 2022 · b0996be · b0996be
1 parent a51d91a
commit b0996be
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 31 deletions.
diff --git a/assets/js/gallery.js b/assets/js/gallery.js
@@ -0,0 +1,31 @@
+function getImagesList() {
+    return [
+        {
+            'img': 'assets/images/content/serie-image-01.png',
+            'alt': 'Imagem de Vecna'
+        },
+        {
+            'img': 'assets/images/content/serie-image-02.png',
+            'alt': 'Imagem ilustrativa dos amigos de Eleven'
+        },
+        {
+            'img': 'assets/images/content/serie-image-03.png',
+            'alt': 'Imagem Eleven assustada'
+        },
+        {
+            'img': 'assets/images/content/serie-image-03.png',
+            'alt': 'Imagem Eleven assustada'
+        }
+    ]
+}
+
+export function gallery(galleryImagelist) {
+    const imgList = getImagesList();
+
+    galleryImagelist.innerHTML = imgList.map(img => `
+        <li class="gallery-image invert-element">
+            <img src="${img.img}" alt="${img.alt}"/>
+        </li>`
+    ).join('');
+
+}
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1,7 +1,9 @@
 import { switchTheme } from "./switch-theme.js";
+import { gallery } from "./gallery.js";
 import { inscricaoHellfireClub, getInscricoesHellfireClub } from "./firebase/hellfire-club.js";
 
 const switchThemeButton = document.getElementById('switch-theme-button');
+const galleryImagelist = document.getElementById('gallery-image-list');
 
 const txtName = document.getElementById('txtName');
 const txtEmail = document.getElementById('txtEmail');
@@ -10,13 +12,10 @@ const txtCharacter = document.getElementById('txtCharacter');
 const btnSubscribe = document.getElementById('btnSubscribe');
 
 // mudar tema da página
-switchThemeButton.addEventListener('click', () => {
-    const audio = document.getElementById('music');
-    audio.play();
-    audio.volume = 0.2;
+switchTheme(switchThemeButton);
 
-    switchTheme();
-});
+// exibir galeria
+gallery(galleryImagelist);
 
 // enviar formulário de inscrição
 btnSubscribe.addEventListener('click', async () => {

diff --git a/assets/js/switch-theme.js b/assets/js/switch-theme.js
@@ -1,12 +1,14 @@
-export function switchTheme() {
-    document.body.classList.toggle('dark-theme');
-    document.body.classList.toggle('light-theme');
-
-    const theme = document.body.classList[0];
-    const music = theme === 'light-theme' ? 'normal-world.mpeg' : 'inverted-world.mpeg'
-
-    const audio = document.getElementById('music');
-    audio.src = `assets/musics/${music}`;
-    audio.play();
-    audio.volume = 0.2;
-}
+export function switchTheme(switchThemeButton) {
+    switchThemeButton.addEventListener('click', () => {
+        document.body.classList.toggle('dark-theme');
+        document.body.classList.toggle('light-theme');
+
+        const theme = document.body.classList[0];
+        const music = theme === 'light-theme' ? 'normal-world.mpeg' : 'inverted-world.mpeg'
+
+        const audio = document.getElementById('music');
+        audio.src = `assets/musics/${music}`;
+        audio.play();
+        audio.volume = 0.2;
+    });
+}
diff --git a/index.html b/index.html
@@ -78,19 +78,7 @@ <h2>Stranger Things Vol. 4</h2>
             <div class="container section-text">
                 <h2>A segunda série mais assistida da Netflix</h2>
 
-                <ul class="gallery-container" role="gallery">
-                    <li class="gallery-image invert-element">
-                        <img src="assets/images/content/serie-image-01.png" alt="Imagem de Vecna" />
-                    </li>
-
-                    <li class="gallery-image invert-element">
-                        <img src="assets/images/content/serie-image-02.png"
-                            alt="Imagem ilustrativa dos amigos de Eleven" />
-                    </li>
-
-                    <li class="gallery-image invert-element">
-                        <img src="assets/images/content/serie-image-03.png" alt="Imagem Eleven assustada" />
-                    </li>
+                <ul class="gallery-container" id="gallery-image-list" role="gallery">
                 </ul>
             </div>
         </section>