Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Entendi o objetivo "Separando Responsabilidades".

Entendi o objetivo do código, apesar de ele ficar mais complexo. Por Enquanto, só copiando, mas o importante é que estou entendendo e inicialmente adquirindo referência do raciocínio para novos trabalhos. Obrigado Professor.

<ul>
    <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">18</span>
    </li>

    Total das idades: <span class="total"></span>
</ul>

<script>

    /* esta função isola a responsabilidade de converter cada elemento do DOM em um convidado.
Esse convidado é um objeto JavaScript com as propriedade nome e idade. 
Se alguém em nosso código quiser ler facilmente a lista de convidados, basta chamar esse método que retornará uma lista de objetos já mastigada para se trabalhar.
        */
    function criaListaDeConvidados() {

        var itens = document.querySelectorAll('.convidado');

        var convidados = [];

        for(var i = 0; i < itens.length; i++) {

            var convidado = {
                nome:  itens[i].querySelector('.nome').textContent,
                idade: parseInt(itens[i].querySelector('.idade').textContent)
            };

            convidados.push(convidado);
        }

        return convidados;
    }

 /* essa função tem como responsabilidade extrair o total da lista de convidados retornando-o para quem chamá-la. 
Isso é interessante, porque quem receber o resultado pode querer exibir na tela com um `alert`,
`console.log` ou até mesmo atualizando essa informação em algum elemento da página.*/

    function calculaTotalDasIdades(convidados) {

        var total = 0;

        for(var i = 0; i < convidados.length; i++) {

            total+=convidados[i].idade;
        }

        return total;

    }

       /* essa função tem como responsabilidade receber um total qualquer e exibí-lo no HTML */
    function exibeTotalDasIdades(total) {
        document.querySelector('.total').textContent = total;    
    }

/* usando nossas funções. Veja que uma pessoa fora do universo da programação 
está mais inclinada a entender o que essas instruções fazem devido aos nomes autoexplicativos. */

    var convidados = criaListaDeConvidados();
    var totalDasIdades = calculaTotalDasIdades(convidados);
    exibeTotalDasIdades(totalDasIdades);

</script>
1 resposta
solução!
<ul>
    <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">18</span>
    </li>

    Total das idades: <span class="total"></span>
</ul>

<script>

    /* esta função isola a responsabilidade de converter cada elemento do DOM em um convidado.
Esse convidado é um objeto JavaScript com as propriedade nome e idade. 
Se alguém em nosso código quiser ler facilmente a lista de convidados, basta chamar esse método que retornará uma lista de objetos já mastigada para se trabalhar.
        */
    function criaListaDeConvidados() {

        var itens = document.querySelectorAll('.convidado');

        var convidados = [];

        for(var i = 0; i < itens.length; i++) {

            var convidado = {
                nome:  itens[i].querySelector('.nome').textContent,
                idade: parseInt(itens[i].querySelector('.idade').textContent)
            };

            convidados.push(convidado);
        }

        return convidados;
    }

 /* essa função tem como responsabilidade extrair o total da lista de convidados retornando-o para quem chamá-la. 
Isso é interessante, porque quem receber o resultado pode querer exibir na tela com um `alert`,
`console.log` ou até mesmo atualizando essa informação em algum elemento da página.*/

    function calculaTotalDasIdades(convidados) {

        var total = 0;

        for(var i = 0; i < convidados.length; i++) {

            total+=convidados[i].idade;
        }

        return total;

    }

       /* essa função tem como responsabilidade receber um total qualquer e exibí-lo no HTML */
    function exibeTotalDasIdades(total) {
        document.querySelector('.total').textContent = total;    
    }

/* usando nossas funções. Veja que uma pessoa fora do universo da programação 
está mais inclinada a entender o que essas instruções fazem devido aos nomes autoexplicativos. */

    var convidados = criaListaDeConvidados();
    var totalDasIdades = calculaTotalDasIdades(convidados);
    exibeTotalDasIdades(totalDasIdades);

</script>