Entrar Ainda não tem acesso?
1
resposta

[Projeto] Desafio 7 : desenvolvimento

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 Tamires Araujo dos Santos
| 10.4k xp | 7 posts

Código JS:

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

   
function exibirMensagemNoConsole() {
    console.log('O botão foi clicado!')
}

function exibirAlerta() {
    alert('Eu amo Js')
}

function exibirMensagemPrompt() {
    let pergunta = prompt ('Qual o nome da sua cidade?');
       alert(`Estive em ${pergunta} e lembrei de você!`)
}

function efetuandoSomando() {
    let numero1 =  parseInt(prompt('Digite um número:'));
    let numero2 =  parseInt(prompt('Digite outro número:'));
    let resultado = numero1 + numero2;
    alert(` ${numero1} + ${numero2} = ${resultado}`)
}

Código HTML:

<!DOCTYPE html>
<html lang="pt-br">
<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="exibirMensagemNoConsole()" class="button">Console</button>
        <button onclick="exibirAlerta()" class="button">Alert</button>
        <button onclick="exibirMensagemPrompt()" class="button">Prompt</button>
        <button onclick="efetuandoSomando()" class="button">Soma</button>
    </main>

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

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
1 resposta
por Rafaela Petelin Silvério
| 1480k xp | 3331 posts
Alura Scuba Team

Oi, Tamires! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Seu projeto ficou bem organizado e o uso das funções para cada interação com os botões mostra que você entendeu bem a proposta do desafio. Gostei de como utilizou prompt() e alert() para tornar o programa mais interativo.

Uma dica interessante para o futuro é usar addEventListener() no lugar do onclick, pois ele ajuda a manter o HTML mais limpo e o JavaScript mais flexível. Veja este exemplo: 


let botao = document.querySelector('.button');
botao.addEventListener('click', function() {
    console.log('Botao clicado!');
});

Esse código faz o mesmo que o onclick, mas separa a lógica do JS da estrutura HTML.

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