Integração com o firebase

assets/js/firebase/app.js

@@ -0,0 +1,19 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.3/firebase-app.js";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyBS5Dq7HpT38Vi7tndaZJOwzo5AvW_BQrA",
+  authDomain: "dio-semana-frontend.firebaseapp.com",
+  projectId: "dio-semana-frontend",
+  storageBucket: "dio-semana-frontend.appspot.com",
+  messagingSenderId: "806755493252",
+  appId: "1:806755493252:web:cefeda84579a956be9a9d1"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+export default app;

assets/js/firebase/hellfire-club.js

@@ -0,0 +1,26 @@
+import app from "./app.js";
+
+// versão 9.9.3 deve ser a mesma presente no arquivo app.js
+import { getFirestore, collection, addDoc, getDocs } from 'https://www.gstatic.com/firebasejs/9.9.3/firebase-firestore.js'
+
+export async function inscricaoHellfireClub(inscricao) {
+    const db = getFirestore(app); // referência ao banco de dados no firebase
+
+    const helfireCollection = collection(db, 'hellfire-club'); // referência aà collection/tabela dentro do bd
+
+    const refDocumento = await addDoc(helfireCollection, inscricao); // referência do documento salvo dentro da tabela do bd
+
+    return refDocumento.id;
+}
+
+export async function getInscricoesHellfireClub() {
+    const db = getFirestore(app); // referência ao banco de dados no firebase
+
+    const helfireCollection = collection(db, 'hellfire-club'); // referência aà collection/tabela dentro do bd
+
+    const snapshothelfireCollection = await getDocs(helfireCollection); // pegar os dados do bd em tempo real
+
+    const listaInscricoes = snapshothelfireCollection.docs.map(doc => doc.data());
+
+    return listaInscricoes;
+}

assets/js/main.js

@@ -0,0 +1,47 @@
+import { switchTheme } from "./switch-theme.js";
+import { inscricaoHellfireClub, getInscricoesHellfireClub } from "./firebase/hellfire-club.js";
+
+const switchThemeButton = document.getElementById('switch-theme-button');
+
+const txtName = document.getElementById('txtName');
+const txtEmail = document.getElementById('txtEmail');
+const txtLevel = document.getElementById('txtLevel');
+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();
+});
+
+// enviar formulário de inscrição
+btnSubscribe.addEventListener('click', async () => {
+    const valorForm = {
+        name: txtName.value,
+        email: txtEmail.value,
+        level: txtLevel.value,
+        character: txtCharacter.value
+    }
+
+    // chamando função que salva no bd
+    const inscricaoId = await inscricaoHellfireClub(valorForm);
+
+    txtName.value = '';
+    txtEmail.value = '';
+    txtLevel.value = '';
+    txtCharacter.value = '';
+
+    alert('Inscrição realizada com sucesso!')
+});
+
+// listar inscrições do bd
+// async function loadData() {
+//     const inscricoes = await getInscricoesHellfireClub();
+//     console.log(inscricoes);
+// }
+
+// loadData();

assets/js/switch-theme.js

@@ -0,0 +1,12 @@
+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;
+}

index.html

@@ -118,7 +118,7 @@ <h3>Entre para o clube de D&D e tenha experiências de <span>outro mundo<span></
                         <input type="email" name="email" id="txtEmail">
 
                         <label for="level">Level</label>
-                        <input type="text" name="level" id="txtLevel">
+                        <input type="number" name="level" id="txtLevel">
 
                         <label for="character">Personagem</label>
                         <textarea name="character" cols="30" rows="10" id="txtCharacter"></textarea>
@@ -139,26 +139,10 @@ <h3>Entre para o clube de D&D e tenha experiências de <span>outro mundo<span></
         <img src="assets/images/footer/logo.svg" alt="Logo da Digital Inovation One">
     </footer>
 
+    <!-- 
+        type="module" é responsável por referenciar o module do firebase 
+        no arquivo app.js
+    -->
     <script type="module" src="assets/js/main.js"></script>
-    <script>
-        window.addEventListener('click', function() {
-        const audio = document.getElementById('music');
-        audio.play();
-        audio.volume = 0.2;
-      })
-
-      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;
-      }
-    </script>
 </body>
 </html>