Desafio: hora da prática 1/3 | Lógica de programação: praticando com desafios

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;
limpar();

function adicionar() {
    let produto = document.getElementById("produto").value;
    let nomeProduto = produto.split("-")[0];
    let valorProduto = produto.split("R$")[1];
    let qtd = document.getElementById("quantidade").value;
    if (qtd == 0) {
        alert('❌ Insira uma quantidade válida maior que zero para adicionar ao carrinho.');
        return
    }
    let preco = Number(qtd * valorProduto);
    let carrinho = document.getElementById("lista-produtos");
    carrinho.innerHTML =
        carrinho.innerHTML +
        `<section class="carrinho__produtos__produto">
        <span class="texto-azul">${qtd}x</span> ${nomeProduto} <span class="texto-azul">R$${valorProduto}</span>
        </section>
        </section>`;
    let total = document.getElementById('valor-total');
    totalgeral = totalgeral + preco;
    total.innerHTML = `R$${totalgeral}`;
    document.getElementById('quantidade').value  = 0;
}

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

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.

HTML :

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulário Simples</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }
        #resultado {
            margin-top: 20px;
            font-weight: bold;
            color: blue;
        }
    </style>
</head>
<body>
    <h2>Preencha o Formulário</h2>
    <form id="meuFormulario">
        <label for="nome">Nome:</label>
        <input type="text" id="nome" required>
        <br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" required>
        <br><br>
        
        <button type="button" onclick="mostrarValores()">Enviar</button>
    </form>
    
    <p id="resultado"></p>
    <script src="app.js"></script>
</body>
</html>

JAVASCRIPT:

function mostrarValores()  {
    let name = document.getElementById('nome').value;
    let email = document.getElementById('email').value;
    console.log(`Nome: ${name} Email: ${email}`);   
    alert(`Nome: ${name} Email: ${email}`)   
}

Tenha um elemento HTML na página (por exemplo, um parágrafo) e utilize JavaScript para modificar seu conteúdo usando a propriedade textContent.

HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modificar Conteúdo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
    <h2>Texto Modificável</h2>
    <p id="meuParagrafo">Este é um parágrafo que será modificado.</p>
    <button id="modificarTexto">Modificar Texto</button>
</body>
    <script src="app.js"></script>
</html>

JAVASCRIPT:

let paragrafo = document.getElementById('meuParagrafo');
let botao = document.getElementById('modificarTexto');
paragrafo.innerHTML = 'Clique no botão e descubra um segredo (ou talvez só um novo texto)!';
botao.innerHTML = 'Descobrir Segredo';