`
</head>
<body>
<header>
<div class="container">
<h2 class="titulo">Lista de Leitura</h2>
</div>
</header>
<main>
<section class="container">
<h2>Minhas Leituras</h2>
<table>
<thead>
<tr>
<th>Titulo</th>
<th>autor</th>
<th>Total de´Páginas</th>
<th>Página atual</th>
</tr>
</thead>
<tbody id="tabela-livros">
<tr class="biblioteca" id="primeiro-livro">_</tr>
<tr class="biblioteca">_</tr>
<tr class="biblioteca">_</tr>
<tr class="biblioteca">_</tr>
</tbody>
</table>
</section>
</main><br>
<form id="salvador">
<div class="container">
<label for="titulo">Livro:</label>
<input id="titulo" type="text" name="titulo" placeholder="titulo" ><br>
<label for="autor">Autor</label>
<input id="autor" type="text" name="autor" placeholder="Autor" ><br>
<label for="totalDePaginas">Numero de Páginas</label>
<input id="totalDePaginas" type="text" name="totalDePaginas" placeholder="Numero da pagina" ><br>
<label for="paginaAtual">Página Atual</label>
<input id="paginaAtual" type="text" name="paginaAtual" placeholder="Numero da pagina" ><br>
<button id="cadastrar" class="button">Adicionar</button>
</div> <script src="js/principal.js" ></script>
</body>botaoAdicionar.addEventListener("click", function(event) { event.preventDefault();
//pega as variaveis do form
var form = document.querySelector("#salvador");
//chama a função que cria o objeto leitura
var leitura = leituraAtual(form);
//cria as TR e coloca oas valors na tabela
var livroTr = montaTr(leitura);var tabela = document.querySelector("#tabela-livros");
tabela.appendChild(livroTr); form.reset(); }); // função que cria o objeto leitura a partir do form function leituraAtual(form){
var leitura ={
titulo: form.titulo.value,
autor: form.autor.value,
totalDePaginas: form.totalDePaginas.value,
paginaAtual: form.paginaAtual.value
}
return leitura;} //funçãoque monta a TR recebendo os itens do objeto leitura function montaTr(leitura){
var livroTr = document.createElement("tr"); livroTr.classList.add("leitura");
livroTr.appendChild(montaTd(leitura.titulo, "info-titulo")); livroTr.appendChild(montaTd(leitura.autor, "info-autor")); livroTr.appendChild(montaTd(leitura.totalDePaginas,"info-totalPaginas"); livroTr.appendChild(montaTd(leitura.paginaAtual, "info-paginaAtual"); /* var tituloTd = document.createElement("td"); var autorTd = document.createElement("td"); var totalDePaginasTd = document.createElement("td"); var paginaAtualTd = document.createElement("td");
tituloTd.textContent = leitura.titulo; autorTd.textContent = leitura.autor; totalDePaginasTd.textContent = leitura.totalDePaginas; paginaAtualTd.textContent = leitura.paginaAtual;
livroTr.appendChild(tituloTd); livroTr.appendChild(autorTd); livroTr.appendChild(totalDePaginasTd); livroTr.appendChild(paginaAtualTd); */ return livroTr; } function montaTd(dado,classe){
var td = document.createElement("td"); td.textContent = dado; td.classList.add(classe);
return td; }
