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

[Desafio 03]

app.js

function mudarTitulo()
{
    let spanNode = adicionarClasse('texto-azul', document.createElement('span'));
    spanNode.textContent = 'o titulo';
    removerFilhos();
    document.querySelector('.titulo').textContent = 'Mudei ';
    adicionarElemento(document.querySelector('.titulo'), spanNode);
}

function adicionarClasse(classe, elemento)
{
    elemento.classList.add(classe);    
    return elemento;
}

function adicionarElemento(elementoPai, elementoFilho)
{
    elementoPai.append(elementoFilho);
    return elementoPai;
}

function removerFilhos()
{
    for (const filho of document.querySelectorAll('.texto-azul'))
    {
        document.querySelector('.titulo').removeChild(filho);
    }
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;600;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="style.css">

  <title>Carrinho de compras</title>
</head>

<body>
  <main class="conteudo-principal">
    <div class="grafismo-azul"></div>
    <section class="adicionar-produto">
      <h1 class="titulo">
        Carrinho de <span class="texto-azul">compras</span>
      </h1>

      <form class="formulario">
        <section class="parte-inferior">
          <section class="botoes-wrapper">
            <button onclick="mudarTitulo()" type="button" class="botao-form botao-adicionar">Mudar Titulo</button>
          </section>
        </section>
      </form>
    </section>
  </main>

  <script src="js/app.js"></script>
</body>

</html>

Esse também teve o carrinho de compras como base.

1 resposta
solução!

Oi, Leonardo, tudo bem?

Muito obrigado por compartilhar seu resultado para o desafio três com a comunidade do fórum. Seu resultado ficou excelente e tenho certeza que vai ser uma inspiração para os demais alunos e alunas que estão aprendendo lógica de programação com JavaScript.

Continue mergulhando em seus estudos e se tiver dúvidas, não hesite em postar no fórum!

Abraços e bons estudos!