//Desafio 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.
JS:
let totalGeral = 0;
limpar();
function adicionar() {
let produto = document.getElementById('produto').value;
let nomeProduto = produto.split('-')[0];
let valorProduto = produto.split('R$')[1];
let quantidade = document.getElementById('quantidade').value;
let preco = quantidade * valorProduto;
if(quantidade !== '0' && quantidade !== '' && quantidade !== null) {
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>`;
} else {
alert("Você precisa informar uma quantidade de produtos válida.");
}
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 - 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>Recuperar Valores dos inputs</title>
</head>
<body>
<form action="" id="formulario">
<h1>Formulário para recuperar valores</h1>
<p class="paragrafo">Paragrafo para alterar texto com JavaScript</p>
<p id="paragrafo-split">Estou ; dividindo esse; paragrafo em; varias partes; a partir do metodo; split do JS</p>
<div>
<label for="nome">Nome:
<input type="text" name="nome" id="nome">
</label>
</div>
<div>
<label for="sobrenome">Sobrenome:
<input type="text" name="sobrenome" id="sobrenome">
</label>
</div>
<div>
<label for="idade">Idade:
<input type="text" name="idade" id="idade">
</label>
</div>
<button onclick="capturarValores()" type="button">Capturar</button>
</form>
</body>
</html>
<script src="./app.js"></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);
}
Desafio 3 - Tenha um elemento HTML na página (por exemplo, um parágrafo) e utilize JavaScript para modificar seu conteúdo usando a propriedade textContent.
Altera a partir da tag
<p class="paragrafo">Paragrafo para alterar texto com JavaScript</p>`
document.querySelector('p').textContent = 'Alterei o conteudo do paragrafo com JS a partir da tag';`
Altera a partir da classe
let paragrafo = document.getElementsByClassName('paragrafo')[0];
paragrafo.textContent = 'Alterei o conteúdo do parágrafo com JS a partir da classe';
Desafio 4 - Faça a soma de duas variáveis numéricas e apresente no console com uma mensagem amigável em Template String.
let numero1 = 25;
let numero2 = 38;
let resultado = numero1 + numero2;
console.log(`O resultado de ${numero1}+${numero2} é: ${resultado}`);
Desafio 5 - Receba, no mínimo, duas sentenças como uma string e utilize split() para quebrá-la em frases menores com base em um ponto e vírgula como delimitador.
let paragrafo = document.getElementById('paragrafo-split').textContent;
let frases = paragrafo.split(';');
console.log(frases);
Desafio 6 - Receba uma string contendo números separados por vírgulas. Utilize split() para separar os números e exibi-los no console.
let listaNumeros = "1,2,3,4,5,6,7,8,9,10";
let numerosSeparados = listaNumeros.split(',');
console.log(numerosSeparados);
