diff --git a/assets/js/firebase/app.js b/assets/js/firebase/app.js new file mode 100644 index 0000000..ea5b46d --- /dev/null +++ b/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; \ No newline at end of file diff --git a/assets/js/firebase/hellfire-club.js b/assets/js/firebase/hellfire-club.js new file mode 100644 index 0000000..d4edddb --- /dev/null +++ b/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; +} diff --git a/assets/js/main.js b/assets/js/main.js index e69de29..96075bf 100644 --- a/assets/js/main.js +++ b/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(); \ No newline at end of file diff --git a/assets/js/switch-theme.js b/assets/js/switch-theme.js new file mode 100644 index 0000000..8c2309a --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/index.html b/index.html index 6dafa99..65ca389 100644 --- a/index.html +++ b/index.html @@ -118,7 +118,7 @@