//escutando o click do botao
var botaoAdicionar = document.querySelector("#adiciona-conta");
botaoAdicionar.addEventListener("click", function(event){
    event.preventDefault(); //previnindo carregamento da pagina 

//selecionar o form
var form = document.querySelector("#form-adiciona");

//criando objeto conta
var conta = obtemContaDoFormulario(form);
// console.log(conta);

adicionaContaNaTabela(conta);

// form.reset(); // limpa os campos do form

});

function adicionaContaNaTabela(conta){
    var contaTr = montaTr(conta);
    var tabela = document.querySelector("#tabela-conta"); // selecionando tabela
    tabela.appendChild(contaTr); //colocando a linha tr dentro da tabela
}

//criando objeto com os dados do form
function obtemContaDoFormulario(form){

    var conta = {
        data: form.data.value,
        conta: form.conta.value,
        valor: form.valor.value
    }
    return conta;
}

//criar monta tr 
function montaTr(conta){
    var contaTr = document.createElement("tr");
    contaTr.classList.add("conta");

    contaTr.appendChild(montaTd(conta.data, "info-data"));
    contaTr.appendChild(montaTd(conta.conta, "info-conta"));
    contaTr.appendChild(montaTd(conta.valor, "info-valor"));

    return contaTr;
}

function montaTd(dado,classe){
        var td = document.createElement("td");
        td.textContent = dado;
        td.classList.add(classe);

        return td;
    }