Well, I need to do a CRUD and then a search on what is submitted on my form.
I have already created the page and can already submit my form and show it in a table.
I'm not sure how to do this.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Agenda de Contatos</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<header>
<div class="container">
<h1>Agenda Contatos</h1>
</div>
</header>
<main class="container">
<section>
<h2>Meus Contatos</h2>
<table>
<tr>
<th>Nome</th>
<th>Rua</th>
<th>Bairro</th>
<th>Telefone Fixo</th>
<th>Telefone Celular</th>
</tr>
<tbody class="contato">
</tbody>
</table>
</section>
<section>
<h2>Cadastro de Contatos</h2>
<form id="formulario" >
<fieldset>
<label for="campo-nome">Nome:</label>
<input id="campo-nome" type="text" placeholder="digite o nome do seu Contato">
</fieldset>
<fieldset class="campo-endereco">
<label for="campo-endereco">Rua:</label>
<input id="campo-endereco" type="text" placeholder="digite o endereço do seu Contato">
</fieldset>
<fieldset class="campo-bairro">
<label for="campo-bairro">Bairro:</label>
<input id="campo-bairro" type="text" placeholder="digite o seu bairro do seu Contato">
</fieldset>
<fieldset class="campo-endereco">
<label for="campo-telefoneFixo">Telefone Fixo:</label>
<input id="campo-telefoneFixo" type="text" placeholder="digite o telefone Fixo">
</fieldset>
<fieldset class="campo-TelefoneCelular">
<label for="campo-celular">Telefone Celular:</label>
<input id="campo-celular" type="text" placeholder="digite o telefone Celular">
</fieldset>
<button id="adicionar-contato" class="botao bto-principal">Adicionar</button>
</form>
</section>
</main>
<script src="js/index.js"></script>
</body>
</html>
index.js
var contatos = [
document.querySelector("#campo-nome"),
document.querySelector("#campo-endereco"),
document.querySelector("#campo-bairro"),
document.querySelector("#campo-telefoneFixo"),
document.querySelector("#campo-celular"),
];
console.log(contatos);
document.querySelector('#formulario').addEventListener("submit", function(event){
event.preventDefault();
var tr = document.createElement('tr');
/*campo é o meu elemento, como se fosse o i.*/
contatos.forEach(function(posicao) {
td = document.createElement('td');
td.textContent = posicao.value;
tr.appendChild(td);
});
var tabela = document.querySelector("table tbody");
tabela.appendChild(tr);
for(var i=0;i <=contatos.length;i++){
this[i].value ='';
}
contatos[0].focus();
});