Entrar Ainda não tem acesso?
1
resposta

[Projeto] Desafios

Referente ao curso Lógica de programação: explore funções e listas, no capítulo Interagindo com HTML e atividade Desafio: hora da prática

por Keyse Eduarda Silva Souza
| 3.5k xp | 5 posts
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <h1></h1>
    </header>
    <main class="container">
        <button onclick="verificarConsole()" class="button">Console</button>
        <button onclick="verificarAlert()" class="button">Alert</button>
        <button onclick="verificarPrompt()" class="button">Prompt</button>
        <button onclick="verificarSoma()" class="button">Soma</button>
    </main>

      <script src="app.js"></script>
</body>
</html>

//DESAFIO Nº2
let titulo = document.querySelector('h1');
titulo.innerHTML= 'Hora do desafio.';

//DESAFIO Nº3
function verificarConsole(){
    console.log('O botão foi clicado');
}

//DESAFIO Nº4
function verificarAlert(){
    alert('Eu amo JS');
}

//DESAFIO Nº5
function verificarPrompt(){
    let cidade = prompt('Escreva o nome de uma cidade do Brasil');
    alert(`Estive em ${cidade} e lembrei de você!`);
}

//DESAFIO Nº6 
function verificarSoma(){
    let numero1 = parseInt(prompt('Digite um número inteiro'));
    let numero2 = parseInt(prompt('Digite outro número inteiro'));
    let soma = numero1 + numero2;

    alert(soma);
}
1 resposta
por Daniel Nogueira
| 621.1k xp | 1152 posts
Alura Scuba Team Analista de Suporte Educacional

Olá, Keyse! Tudo bem?

Parabéns! Continue resolvendo os desafios e compartilhando com a comunidade Alura.

Percebi que você dominou o uso de manipulação de elementos DOM com querySelector, aplicou muito bem o uso de funções para reagir a eventos e ainda demonstrou compreender a relevância de interações com o usuário usando alert, prompt e console.log para criar uma experiência dinâmica.

Uma sugestão interessante para evoluir ainda mais é usar addEventListener com o objetivo de separar melhor o JavaScript do HTML. Veja só:

document.getElementById("meuBotao").addEventListener("click", function() {
  alert("Botão clicado!");
});

Utilizar um trecho como esse possibilita exibir um alerta ao clicar no botão sem usar o atributo onclick no HTML.

Í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!