Boa Noite, preciso muito de ajuda estou fazendo este trabalho da faculdade:
Questão 1: https://docs.google.com/document/d/1W6LO6F7uikLFV9t9BPt7uAOwvQ4uNJAwGBTlXMvw_Ds/edit
Questão 2:https://docs.google.com/document/d/1axpdoimV8xGS2yihI7flz3Yqdh1la7sReDhbXPF9l8M/edit
Até o momento consegui fazer o seguinte código:
<!DOCTYPE html>
<html lang="pt" dir="ltr">
<head>
<meta charset="utf-8">
<title>Trabalho Laboratório Web 1</title>
</head>
<body>
<h1>Trabalho Laboratório Web 1</h1>
<form name="soma">
<div>
<label for="n">Nome</label>
<input type="text" name="n" id="n"/>
<input type="submit" name="somar" value="Adicionar" />
</div>
<br>
<div>
<label for="cfix" for="ccap">Produto</label>
<input type="text" name="p"/>
<input type="submit" name="prod" value="Adicionar" />
</div>
<br>
<div>
<label for="cfix" for="ccap">Valor Unitário</label>
<input type="number" name="valor"/>
<input type="submit" name="cfix" value="Custo Fixo"/>
<input type="submit" name="ccap" value="Custo Per capita"/>
</div>
</form>
<p><h2>Nomes: <span>0</span></h2>
<ul></ul>
<p><h2>Produtos: <span> </span></h2>
<table id="tf" border="1">
<tr>
<td colspan="4"><center><b>Custo fixo</b></center></td>
</tr>
<tr>
<td colspan="2">Produto</td>
<td colspan="2">Valor</td>
</tr>
</table>
<br>
<table id="tp" border="1">
<tr>
<td colspan="4"><b>Custo Per Capita</b></td>
</tr>
<tr>
<td colspan="2">Produto</td>
<td colspan="2">Valor</td>
</tr>
</table>
<p><center><h2 style="color:red;">Valor para cada um : R$<span> </span></h2></center></p>
<script>
document.soma.addEventListener('submit', adicionar);
var lista = document.querySelector('ul');
var qtd = document.querySelector('span');
var soma = 0;
function adicionar(e) {
e.preventDefault();
var novoLi = document.createElement('li');
novoLi.textContent = document.soma.n.value;
lista.appendChild(novoLi);
soma++;
qtd.textContent = soma;
document.soma.n.value = "";
}
</body>
</html>
Porém não consigo seguir em frente, alguém pode me dar alguma dica ou ajuda?