1
resposta

07 Desafio: hora da prática

// =========================================================
// EXERCÍCIO 1: Modificar o Título da Página
// =========================================================

// Seleciona o primeiro elemento <h1> encontrado no documento HTML.
let titulo = document.querySelector("h1");
// Altera o conteúdo de texto (innerHTML) do elemento <h1> para 'Hora do Desafio.'.
// Isso muda o título visível na página.
titulo.innerHTML = 'Hora do Desafio.';


// =========================================================
// EXERCÍCIO 2: Avisar que o Botão foi Clicado (Console)
// =========================================================

// Define uma função que será executada quando um botão for clicado (associado a esta função).
function aparecerConsole() {
    // Exibe uma mensagem no console do navegador.
    // Isso é útil para depuração e para verificar se a função foi chamada corretamente.
    console.log('O botão console foi clicado!');
}


// =========================================================
// EXERCÍCIO 3: Mostrar um Alerta com a Mensagem "EU AMO JS"
// =========================================================

// Define uma função para exibir um alerta pop-up.
function aparecerAlerta() {
    // Primeiro, registra uma mensagem no console para fins de depuração.
    console.log('O botão alert foi clicado!');
    // Em seguida, exibe uma caixa de diálogo de alerta para o usuário com a mensagem "EU AMO JS".
    alert('EU AMO JS');
}


// =========================================================
// EXERCÍCIO 4: Pedir o Nome de uma Cidade e Mostrar Mensagem Personalizada
// =========================================================
// Melhoria: Adição do método .trim() e validação mais robusta da entrada.

// Define uma função para interagir com o usuário via prompt e exibir uma mensagem personalizada.
function aparecerPprompt() {
    console.log('O botão prompt foi clicado!'); // Registra o evento no console.

    // Solicita ao usuário que digite o nome de uma cidade.
    // O método .trim() é aplicado imediatamente para remover quaisquer espaços em branco
    // do início e do fim da string digitada pelo usuário.
    let cidade = window.prompt('Diga um nome de uma cidade no Brasil:').trim();

    // Verifica se a variável 'cidade' tem um valor (ou seja, não é uma string vazia após o .trim()).
    // Isso garante que o usuário digitou algo significativo.
    if (cidade) {
        // Se a cidade foi digitada, exibe uma mensagem personalizada com o nome fornecido.
        alert(`Estive em ${cidade} e lembrei de você.`);
    } else {
        // Se o usuário não digitou nada ou apenas espaços, alerta que a entrada não é válida.
        alert('Digite um nome válido.');
    }
}


// =========================================================
// EXERCÍCIO 5: Criar uma Conta de Adição no Prompt e Mostrar o Resultado em um Alerta
// =========================================================
// Melhoria: Inclusão de tratamento de erro para entradas não numéricas.

// Define uma função para realizar uma soma interativa.
function aparecerSoma() {
    console.log('O botão soma foi clicado!'); // Registra o evento no console.

    // Solicita o primeiro valor e tenta convertê-lo para um número de ponto flutuante.
    // parseFloat() é usado para permitir números decimais.
    let valor1 = parseFloat(prompt('Digite o primeiro valor:'));
    // Solicita o segundo valor e tenta convertê-lo para um número de ponto flutuante.
    let valor2 = parseFloat(prompt('Digite o segundo valor:'));

    // Verifica se ambos os valores resultaram em números válidos (não são NaN - Not-a-Number).
    // isNaN() retorna true se o valor não é um número. Usamos '!' para verificar se NÃO é NaN.
    if (!isNaN(valor1) && !isNaN(valor2)) {
        // Se ambos são números válidos, realiza a operação de soma.
        let resultado = valor1 + valor2;
        // Exibe o resultado da soma em um alerta para o usuário.
        alert(`O resultado da soma é: ${resultado}`);
    } else {
        // Se alguma das entradas não for um número válido, informa o usuário.
        alert('Por favor, digite apenas números válidos para a soma.');
    }
}
1 resposta

Oi! Tudo bom?

Excelente! Siga praticando com os desafios e sempre compartilhe conosco.

Você soube aplicar a manipulação do DOM com querySelector de forma eficiente, aproveitou o uso do alert, prompt e console.log para interações com o usuário e entendeu como o uso do parseFloat combinado com validação é essencial para garantir a integridade das entradas numéricas.

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

Ícone de sugestão Para saber mais:

Sugestão de conteúdo para você mergulhar ainda mais sobre o tema:

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

Abraço e bons estudos!

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