1
resposta

desafio da Aula 1. Interagindo com HTML - Funções e listas

fiz o exercício. gostaria de uma revisão, para ver se os passos foram seguidos de acordo com as melhores práticas.

HTML:

<!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="verificarBotaoConsole()" class="button">Console</button>
        <button onclick="botaoAlertJavascript()" class="button">Alert</button>
        <button onclick="promptBrasil()" class="button">Prompt</button>
        <button onclick="botaoSoma()" class="button">Soma</button>
    </main>

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

CSS:

header {
  text-align: center;
  font-size: 30px;
  color: #279EFF;
}

main, html {
  margin: 0;
  padding: 0;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0C356A;
}

.container {
  text-align: center;
  color: #279EFF;
}

.button {
  padding: 10px 20px;
  margin: 10px;
  font-size: 24px;
  border: none;
  background-color: #3498db;
  cursor: pointer;
  border-radius: 5px;
}

.button:hover {
  background-color: #2980b9;
}

JS:

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

function verificarBotaoConsole() {
    console.log('Botão clicado!');
}

function botaoAlertJavascript() {
    alert('Eu amo JS');
}

function promptBrasil() {
    let cidadeBrasil = prompt('Diga o nome de uma cidade no Brasil');
    alert(`Estive em ${cidadeBrasil} e lembrei de você`);
}

function botaoSoma() {
    let valor1 = prompt('Digite dois números inteiros separados por vírgula. Primeiro valor:');
    let valor2 = prompt('Segundo valor:');
    let soma = parseInt(valor1) + parseInt(valor2); // detalhe que parseInt é usado para converter string em número. o prompt retorna informações no formato string, e é necessário convertê-las em número para realizar operações matemáticas.
    alert(`A soma é: ${soma}`);
}
1 resposta

Oi, Vitor! Como vai?

Você estruturou muito bem os arquivos HTML, CSS e JavaScript. A utilização de funções para cada botão ficou super clara e organizada. Muito bom também ver que aplicou o querySelector para alterar o título dinamicamente.

Uma dica interessante para o futuro é usar o método toLowerCase(), que transforma textos em letras minúsculas, ajudando em comparações. Veja este exemplo:


let cidade = prompt('Digite uma cidade');
console.log(cidade.toLowerCase());

Isso imprime o texto digitado todo em minúsculo no console.

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