1
resposta

Adicionar convidado na lista

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>
1 resposta

Fala ai Victória, tudo bem? Qual erro que está dando ao tentar adicioná-lo na lista? Consegue me enviar o log completo do mesmo?

Fico no aguardo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software