[Projeto] Desafios | Lógica de programação: praticando com desafios

//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);