Desafio: Hora da Prática

Desafio 1:

function adicionar() {
let produto = document.getElementById('produto').value;
let nomeProduto = produto.split('-')[0].trim();
let valorUnitario = parseFloat(produto.split('R$')[1].trim());
let quantidade = document.getElementById('quantidade').value;

let preco = quantidade * valorUnitario;
let carrinho = document.getElementById('lista-produtos');

    carrinho.innerHTML = carrinho.innerHTML + ` <section class="carrinho__produtos__produto">
          <span class="texto-azul">${quantidade}x</span> ${nomeProduto} <span class="texto-azul">R$${preco}</span>
        </section>`;

totalGeral = totalGeral + preco;
let campoTotal = document.getElementById('valor-total');
campoTotal.textContent = `R$ ${totalGeral}`;
document.getElementById('quantidade').value = 0;
}

function limpar() {
totalGeral = 0;
document.getElementById('lista-produtos').innerHTML = '';
document.getElementById('valor-total').textContent = 'R$ 0';
}

Desafio 2:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Formulário Simples</title>
</head>
<body>
<h2>Cadastro</h2>
<label>Nome:</label>
<input type="text" id="nome"><br><br>
<label>Sobrenome:</label>
<input type="text" id="sobrenome"><br><br>
<label>Idade:</label>
<input type="number" id="idade"><br><br>
<button onclick="capturarValores()">Enviar</button>
<h3>Resultado:</h3>
<p id="resultado"></p>
<script>

function capturarValores() {
let nome = document.getElementById('nome').value;
let sobrenome = document.getElementById('sobrenome').value;
let idade = document.getElementById('idade').value;

console.log(nome);
console.log(sobrenome);
console.log(idade);

document.getElementById('resultado').innerHTML =
"Nome: " + nome + "<br>" +
"Sobrenome: " + sobrenome + "<br>" +
"Idade: " + idade;
}

</script>

</body>
</html>

Desafio 3:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo textContent</title>
</head>
<body>
<h2>Alterar Texto com JavaScript</h2>
<p id="mensagem">Texto original do parágrafo.</p>
<button onclick="mudarTexto()">Mudar Texto</button>
<script>

function mudarTexto() {
let paragrafo = document.getElementById("mensagem");
paragrafo.textContent = "O texto foi alterado usando JavaScript e a propriedade textContent.";
}

</script>

</body>
</html>

Desafio 4:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Soma com Template String</title>
</head>
<body>
<script>

let numero1 = 10;
let numero2 = 5;
let soma = numero1 + numero2;

console.log(`A soma de ${numero1} + ${numero2} é igual a ${soma}.`);

</script>

</body>
</html>

Desafio 5:

let texto = "Hoje estou estudando JavaScript; Este exercício usa o método split; Estou aprendendo bastante";
let frases = texto.split(";");
console.log(frases);

Desafio 6:

let numeros = "10,20,30,40,50";
let lista = numeros.split(",");
console.log(lista);

Olá, Henrique! Como vai?

Parabéns pela resolução da atividade!

Observei que você explorou o uso de split para manipular strings em JavaScript, utilizou muito bem o textContent/innerHTML para atualizar elementos na página e ainda compreendeu a importância do template string para deixar o código mais legível e dinâmico.

Continue postando as suas soluções, com certeza isso ajudará outros estudantes e tem grande relevância para o fórum.

Uma dica interessante para o futuro é aplicar o forEach quando precisar percorrer listas geradas pelo split, tornando o código mais organizado. Assim:

let numeros = "10,20,30,40,50";
let lista = numeros.split(",");
lista.forEach((numero, index) => {
    console.log(`Posição ${index}: ${numero}`);
});

Isso faz com que cada elemento da lista seja exibido junto com sua posição, facilitando o entendimento e manipulação dos dados.

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema