coneccao firebase tarefas

by thvinic

HTML

<h2>Minhas Tarefas Agendadas</h2>
<div id="tarefas">Carregando tarefas...</div>

<h3>Adicionar nova tarefa</h3>
<input type="date" id="dataTarefa" />
<input type="text" id="descricaoTarefa" placeholder="Descrição da tarefa" />
<br /><br />
<textarea id="notasTarefa" rows="3" cols="40" placeholder="Notas adicionais (opcional)"></textarea>
<br />
<button id="btnAdicionar">Adicionar</button>

CSS

#tarefas { border: 1px solid #ccc; padding: 10px; width: 350px; }
  .tarefa { 
    margin-bottom: 10px; 
    padding: 5px; 
    background: #f0f0f0; 
    position: relative; 
    padding-right: 60px;
  }
  .descricao { font-weight: bold; }
  .notas { font-style: italic; color: #555; margin-top: 3px; }
  .btn-excluir {
    position: absolute;
    right: 5px;
    top: 5px;
    background: #dc3545;
    color: white;
    border: none;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
  }
  .btn-excluir:hover { background: #c82333; }
  body { font-family: Arial, sans-serif; margin: 20px; }

JavaScript

// Importa os módulos necessários do SDK Firebase
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js";
import { getDatabase, ref, push, onValue, remove } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-database.js";

// SUAS credenciais do Firebase - já configuradas
const firebaseConfig = {
  apiKey: "AIzaSyB8ShnY9P7YaymM_I31h0Y2hR7g4bpqQyw",
  authDomain: "opcaoarfrio-1-default-rtdb.firebaseapp.com",
  databaseURL: "https://opcaoarfrio-1-default-rtdb.firebaseio.com",
  projectId: "opcaoarfrio-1",
  storageBucket: "opcaoarfrio-1-default-rtdb.appspot.com",
  messagingSenderId: "1106899287",
  appId: "1:1106899287:android:98530a50ca44cbe0338e12"
};

// Inicializa o Firebase
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

// Referência para o nó "tarefas" no Realtime Database
const tarefasRef = ref(database, 'tarefas');

// Função para adicionar tarefa no banco
function adicionarTarefa() {
  const dataInput = document.getElementById('dataTarefa').value;
  const descricaoInput = document.getElementById('descricaoTarefa').value.trim();
  const notasInput = document.getElementById('notasTarefa').value.trim();

  if (!dataInput || !descricaoInput) {
    alert("Por favor, preencha a data e a descrição da tarefa.");
    return;
  }

  const tarefa = {
    data: dataInput,
    descricao: descricaoInput,
    notas: notasInput,
    criadaEm: new Date().toISOString()
  };

  push(tarefasRef, tarefa)
    .then(() => {
      alert("Tarefa adicionada com sucesso!");
      document.getElementById('dataTarefa').value = '';
      document.getElementById('descricaoTarefa').value = '';
      document.getElementById('notasTarefa').value = '';
    })
    .catch((error) => {
      alert("Erro ao adicionar tarefa: " + error.message);
    });
}

// Função para excluir tarefa
function excluirTarefa(key) {
  if (confirm("Tem certeza que deseja excluir esta...