<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<title>Sistema de Cadastro CDS</title>
<link rel="stylesheet" href="style.css">
<!--o uso do defer é é fazer com que o navegador execute o script após o
carregamento completo do HTML-->
</head>
<body>
<body>
<header>
<img class="logocds" src="./logo.png" />
<h1 class="titulo">Sistema de Cadastro de Visitantes ao CDS</h1>
</header>
<form id="cadastroForm">
<section class="camposdigitacao">
<div><label for="grad">Posto/graduação</label>
<select name="grad" id="grad">
<option value="sc">Servidor Civil</option>
<option value="sd">Soldado</option>
<option value="cb">Cabo</option>
<option value="3sgt">3º Sargento</option>
<option value="2sgt">2º Sargento</option>
<option value="1sgt">1º Sargento</option>
<option value="sten">Sub-Tenente</option>
<option value="aspof">Aspirante Oficial</option>
<option value="2ten">2º Tenente</option>
<option value="1ten">1º Tenente</option>
<option value="cap">Capitão</option>
<option value="maj">Major</option>
<option value="tc">Tenente Coronel</option>
<option value="cel">Coronel</option>
<option value="gen">General</option>
</select>
</div>
<label>Digite seu nome de guerra:<input type="text" id="name" autocomplete='given-name'> </label>
<label>Digite sua identidade militar:<input type="text" id="idmil" maxlength="14" /> </label>
<label>OM de Origem:<input type="text" id="origem" name="om" /> </label>
<label>Digite seu celular ou ramal:<input type="text" id="phone" maxlength="13" autocomplete="tel" /> </label>
</div>
<div>
<button type="submit" class="btCadastro">cadastrar visitante</button>
</div>
</section>
</form>
<section class="tabela">
<table id="tabela">
<thead>
<tr>
<th>Posto/Graduação</th>
<th>Nome</th>
<th>Identidade Militar</th>
<th>OM de Origem</th>
<th>Celular</th>
<th>Horário de Entrada</th>
</tr>
</thead>
<tbody class="tabela-corpo"></tbody>
</table>
</section>
<script src="main.js"></script>
</body>
</html>
const graduacao= document.querySelector('#grad').value
const nome = document.querySelector('#name').value
const idmil = document.querySelector('#idmil').value
const om = document.querySelector('#origem').value
const ramal = document.querySelector('#phone').value
const btn=document.querySelector('.btnCadastro')
const form =document.querySelector('#cadastroForm')
const tabela = document.querySelector('#tabela')
const horario= new Date().toLocaleDateString()
form.addEventListener('submit',(event)=>{
event.preventDefault()
function insereLinha(){
var linha=tabela.insertRow(-1);//adiciona uma linha à tabela
var coll=linha.insertCell(0)
var coll1=linha.insertCell(1)
var coll2=linha.insertCell(2)
var coll3=linha.insertCell(3)
var coll4=linha.insertCell(4)
var coll5=linha.insertCell(5)
coll.textContent=graduacao
coll1.textContent=nome
coll2.textContent=idmil
coll3.textContent=om
coll4.textContent=ramal
coll5.textContent=horario
// limpa o formulário após adicionar a linha
}
validaDados()
insereLinha()
})
function validaDados(){
if (nome==null || idmil==null || om==null|| ramal==null)
alert('preencha corretamente os campos')
return
}
o retorno acaba sempre o mesmo )
