[Projeto] Como ficou meu código

1
resposta

por João Pedro Carvalho Duarte

| 4.6k xp | 1 posts

No HTML:`

<main class="container">
        <button onclick="botaoConsole()" class="button">Console</button>
        <button onclick="botaoAlerta()" class="button">Alert</button>
        <button onclick="perguntarCidade()" class="button">Prompt</button>
        <button onclick="botaoSoma()" class="button">Soma</button>
    </main>

No JS:

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

function botaoConsole() {
    console.log ('O botão foi clicado');
    }

    alert ('Eu amo JS');
    }

function perguntarCidade() {
    let cidade = prompt = 'Qual sua cidade?'
    alert (`Estive em ${cidade} e lembrei de você`)
    }

function botaoSoma() {
    let primeiroNumero = parseInt(prompt('Digite um número'))
    let segundoNumero = parseInt (prompt('Digite o segundo número'))
    let resultado = primeiroNumero + segundoNumero
    alert (`${primeiroNumero} + ${segundoNumero} = ${resultado}`)
}

1 resposta

por Lorena Garcia

| 13527.4k xp | 20031 posts

Instrutor

14 horas atrás

Oi, João! Como vai?

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

É legal ver que você criou diferentes botões para interagir com console, alert, prompt e também fez uma soma usando parseInt(). Isso mostra que você praticou bem a ideia de ligar o HTML com funções JavaScript.

No futuro, você pode usar o método addEventListener() pra ligar eventos aos botões em vez de usar onclick direto no HTML. Isso ajuda a deixar o código mais organizado.


let botao = document.querySelector('.button');

botao.addEventListener('click', function() {
    console.log('botao clicado');
});

Neste código, querySelector seleciona um elemento da página e addEventListener adiciona uma ação quando o botão e clicado. Assim você separa melhor o HTML da logica do JavaScript.

Conteúdos relacionados

HTML DOM Document addEventListener()

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

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema