From b0996bedcb25cbd514bd7ead791548537b9e7450 Mon Sep 17 00:00:00 2001
From: Ana Paula <anapaulavieira.ac@gmail.com>
Date: Fri, 26 Aug 2022 13:57:25 -0500
Subject: [PATCH] =?UTF-8?q?Modifica=C3=A7=C3=B5es=20fun=C3=A7=C3=B5es=20pa?=
 =?UTF-8?q?ra=20mudar=20tema=20da=20p=C3=A1gina=20e=20exibir=20galeria=20d?=
 =?UTF-8?q?e=20imagens=20da=20s=C3=A9rie?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/js/gallery.js      | 31 +++++++++++++++++++++++++++++++
 assets/js/main.js         | 11 +++++------
 assets/js/switch-theme.js | 26 ++++++++++++++------------
 index.html                | 14 +-------------
 4 files changed, 51 insertions(+), 31 deletions(-)
 create mode 100644 assets/js/gallery.js

diff --git a/assets/js/gallery.js b/assets/js/gallery.js
new file mode 100644
index 0000000..f0c5569
--- /dev/null
+++ 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('');
+
+}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index 96075bf..469c7a6 100644
--- 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
index 8c2309a..018634f 100644
--- 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;
-}
\ No newline at end of file
+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
index 65ca389..866e844 100644
--- 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>