1. Adicione validações no código para garantir que o usuário só consiga adicionar produtos ao carrinho se tiver selecionado um produto válido e inserido uma quantidade válida. Se a entrada não for válida, exiba uma mensagem de erro apropriada.
let totalGeral = 0;
document.getElementById('lista-produtos').innerHTML = '';
document.getElementById('valor-total').textContent = 'R$ 0';
function adicionar() {
//recuperar valores: nome do produto, quantidade e valor
let produto = document.getElementById('produto').value;
let quantidade = document.getElementById('quantidade').value;
//verificar se o produto selecionado é válido
if (!produto || produto.trim() === "") {
alert("Selecione um produto válido.");
return;
}
//verificar se a quantidade inserida é válida
if (isNaN(quantidade) || quantidade <= 0) {
alertert("Selecione uma quantidade válida.");
return;
}
let nomeProduto = produto.split('-')[0].trim();
let valorUnitario = parseFloat(produto.split('R$')[1].trim());
//calcular o preço, o nosso subtotal
let preco = quantidade * valorUnitario;
//adicionar no carrinho
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>`;
//atualizar o valor total
totalGeral = totalGeral + preco;
let campoTotal = document.getElementById('valor-total');
campoTotal.textContent = `R$ ${totalGeral}`;
document.getElementById('quantidade').value = '';
}
function limpar() {
totalGeral = 0;
document.getElementById('lista-produtos').innerHTML = '';
document.getElementById('valor-total').textContent = 'R$ 0';
document.getElementById('produto').value = '';
}
2. Crie um formulário simples com campos de entrada e utilize JavaScript para recuperar os valores digitados nos campos usando a propriedade value. Exiba os valores no console e na tela.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desafio 2</title>
</head>
<body>
<form id="meuForm">
<label for="campoNome">Nome:</label>
<input type="text" id="campoNome" name="nome">
<label for="campoIdade">Idade:</label>
<input type="text" id="campoIdade" name="idade">
<button type="button" onclick="capturarValores()">Capturar Valores</button>
<div id="mostraNome"><span>Seu nome e idade irão aparecer aqui.</span></div>
</form>
<script src="app.js"></script>
</body>
</html>
function capturarValores() {
const nome = document.getElementById('campoNome').value;
const idade = document.getElementById('campoIdade').value;
document.getElementById('mostraNome').textContent = `Nome: ${nome}, Idade: ${idade}`;
}
3. Tenha um elemento HTML na página (por exemplo, um parágrafo) e utilize JavaScript para modificar seu conteúdo usando a propriedade textConten
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desafio 3</title>
</head>
<body>
<p id="meuParagrafo">Bom dia!</p>
<button onclick="modificarConteudo()">Modificar Conteúdo</button>
<script src="app.js"></script>
</body>
</html>
function modificarConteudo() {
const paragrafo = document.getElementById('meuParagrafo');
paragrafo.textContent = 'Boa noite!';
}
4. Faça a soma de duas variáveis numéricas e apresente no console com uma mensagem amigável em Template String.
Como pede o exercício:
const num1 = 2;
const num2 = 8;
const soma = num1 + num2;
const mensagem = `A soma de ${num1} + ${num2} é ${soma}`;
console.log(mensagem);
Fiz de outra forma...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desafio 4</title>
</head>
<body>
<p id="meuParagrafo">A soma de dois números aparecerá aqui!</p>
<button type="button" onclick="calculo()">Somar</button>
<script src="app.js"></script>
</body>
</html>
function calculo() {
const num1 = 2;
const num2 = 8;
const soma = num1 + num2;
const mensagem = `A soma de ${num1} + ${num2} é ${soma}`;
const paragrafo = document.getElementById('meuParagrafo');
paragrafo.textContent = mensagem;
}
