Tentei colocar o desafio de colocar um convidado na lista mas está dando erro, já fiquei um tempão olhando o código mas confesso que pra mim ainda é muito difícil, se alguém puder dar uma luz, eu agradeço, segue o código:
<body>
<ul class="lista-convidados">
<li class="convidado">
Nome <span class="nome">Douglas</span>,
idade <span class="idade">23</span>
</li>
<li class="convidado">
Nome <span class="nome">Daniel</span>,
idade <span class="idade">42</span>
</li>
<li class="convidado">
Nome <span class="nome">Marcos</span>,
idade <span class="idade">27</span>
</li>
<li class="convidado">
Nome <span class="nome">Flávio</span>,
idade <span class="idade">14</span>
</li>
Total das idades: <span class="total"></span>
</ul>
<section>
<h3>Adicionar novo convidado</h3>
<form id="form-adiciona">
<div class="nomeDoConvidado">
<label for="nomeDoConvidado">Nome:</label>
<input id="nomeDoConvidado" name="nomeDoConvidado" type="text" placeholder="Nome do convidado">
</div>
<div class="idadeDoConvidado">
<label for="idadeDoConvidado">Idade:</label>
<input id="idadeDoConvidado" name="idadeDoConvidado" type="text" placeholder="Idade do convidado">
</div>
<button id="adicionar-convidado" class="botao">Adicionar</button>
</form>
</section>
<script>
/*quando clica no botão adiciona novo convidado*/
var form = document.querySelector("#form-adiciona");
var botaoAdiciona = document.querySelector("#adicionar-convidado");
botaoAdiciona.addEventListener('click', function(event){
event.preventDefault();
var form = document.querySelector("#form-adiciona");
var convidadoLi = montaLi(convidado);
form.reset();
})
function obtemConvidadoDeFormulario(form){
var convidado = {
nome: form.nomeDoConvidado.textContent,
idade: form.idadeDoConvidado.textContent
}
return convidado;
}
console.log(obtemConvidadoDeFormulario(form));
function adicionaSpan(dado, classe){
var span = document.createElement("span");
span.textContent = dado;
span.classList.add(classe);
return span;
}
function montaLi(convidado){
var convidadoLi = document.createElement("li");
convidadoLi.classList.add("convidado");
convidadoLi.appendChild(adicionaSpan(convidado.nome, "nome"));
convidadoLi.appendChild(adicionaSpan(convidado.idade, "idade"));
}
/*cria lista de convidados a partir do elemento lista que pega todos os li's*/
function criaListaDeConvidados(){
var lista = document.querySelectorAll(".convidado"); //pega todos os meus li's
var convidados = [];
for(var i = 0; i < lista.length; i++){
var convidado = {
nome: lista[i].querySelector(".nome").textContent,
idade: parseInt(lista[i].querySelector(".idade").textContent)
};
convidados.push(convidado);
}
return convidados;
}
/*com a lista criada passada por parâmetro pega as idades dos convidados e soma;*/
function calculaTotalDasIdades(convidados){
var total = 0;
for(var i = 0; i < convidados.length; i++){
total += convidados[i].idade;
}
return total;
}
function colocaTotalDasIdades(total){
document.querySelector(".total").textContent = total;
}
var lista = criaListaDeConvidados();
var totalDasIdades = calculaTotalDasIdades(lista);
colocaTotalDasIdades(totalDasIdades);
</script>
</body>