Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Projeto] [Desafio] Lógica de programação: explore funções e listas > 01. Interagindo com HTML

Lista de desafios para a prática: Desafios

  1. Faça o download de outro projeto clicando neste link e abra no Visual Studio Code.
  2. Altere o conteúdo da tag h1 com document.querySelector e atribua o seguinte texto: Hora do Desafio.
  3. Crie uma função que exiba no console a mensagem O botão foi clicado sempre que o botão Console for pressionado.
  4. Crie uma função que exiba um alerta com a mensagem: Eu amo JS, sempre que o botão Alerta for pressionado.
  5. Crie uma função que é executada quando o botão prompt é clicado, perguntando o nome de uma cidade do Brasil. Em seguida, exiba um alerta com a mensagem concatenando a resposta com o texto: Estive em {cidade} e lembrei de você.
  6. Ao clicar no botão soma, peça 2 números inteiros e exiba o resultado da soma em um alerta.

Após alterar o arquivo index.html para adicionar um comportamento ao clicar nos botões da página da seguinte forma:

    <main class="container">
        <button onclick="verificarConsole()" class="button">Console</button>
        <button onclick="verificarAlerta()" class="button">Alert</button>
        <button onclick="verificarPrompt()" class="button">Prompt</button>
        <button onclick="verificarSoma()" class="button">Soma</button>
    </main>

Resolvi os desafios no arquivo app.js assim:

// Curso: Lógica de programação: explore funções e listas
// Aula: 01. Interagindo com HTML
// Desafio 1
// Baixar o projeto

// Desafio 2
let titulo = document.querySelector('h1');
titulo.innerHTML = 'Hora do Desafio';

//Desafio 3
function verificarConsole() {
    console.log('O botão Console foi pressionado');
}

// Desafio 4
function verificarAlerta() {
    alert('Eu amo JavaScript.');
}

// Desafio 5
let cidade;
function verificarPrompt() {
    cidade = prompt('Digite o nome de uma cidade do Brasil:');
    alert(`Estive em ${cidade} e lembrei de você.`);
}
// Desafio 6
function verificarSoma() {
    let valor1;
    let valor2;
    let soma;
    do {
        valor1 = prompt('Digite aqui o primeiro número inteiro para ser somado:');
    } while (isNaN(valor1) || valor1.trim() === "");
    do {
        valor2 = prompt('Digite aqui um segundo número inteiro para ser somado:');
    } while (isNaN(valor2) || valor2.trim() === "");
    
    valor1 = parseInt(valor1);
    valor2 = parseInt(valor2);
    soma = valor1 + valor2;
    
    alert(`A soma de ${valor1} e ${valor2} é: ${soma}`);
}

Formas alternativas e/ou sugestões são sempre bem vindas!

2 respostas
solução!

Oi Gabriel, tudo bem? 😊

Parabéns por concluir os desafios e por buscar aprimorar suas habilidades em JavaScript!

Sua solução está ótima e demonstra um bom entendimento dos conceitos de manipulação do DOM, funções e eventos.

Vou apenas sugerir algumas pequenas melhorias e alternativas para enriquecer ainda mais seu código:

  1. Simplificação da validação dos números:

    Em vez de usar um loop do...while para cada entrada, você pode criar uma função genérica para validar se a entrada é um número inteiro.

    Isso torna o código mais limpo e reutilizável.

    function obterNumeroInteiro(mensagem) {
      let valor;
      do {
        valor = prompt(mensagem);
      } while (isNaN(valor) || valor.trim() === "");
      return parseInt(valor);
    }
    
    function verificarSoma() {
      let valor1 = obterNumeroInteiro('Digite o primeiro número inteiro:');
      let valor2 = obterNumeroInteiro('Digite o segundo número inteiro:');
      let soma = valor1 + valor2;
      alert(`A soma de ${valor1} e ${valor2} é: ${soma}`);
    }
    
  2. Uso de template literals:

    Você já usou template literals (strings com crases) no alerta da cidade.

    Pode usar também para concatenar as mensagens de soma, tornando o código mais legível.

  3. Adicionar tratamento de erro:

    Caso o usuário clique em "Cancelar" no prompt, a variável cidade ficará com o valor null.

    Você pode adicionar uma verificação para evitar exibir mensagens com valor nulo.

    function verificarPrompt() {
      let cidade = prompt('Digite o nome de uma cidade do Brasil:');
      if (cidade) {
        alert(`Estive em ${cidade} e lembrei de você.`);
      }
    }
    

Continue praticando e explorando novas possibilidades!

🎓 Para saber mais:

tux matrixCaso este post o tenha ajudado,marque-o como solucionado ☑️.Bons Estudos! 🤓

Ah sim! Obrigado, o código está melhor agora. :)