Exer 2 - Criando formulário | Lógica de programação: praticando com desafios

Pelo que eu observei acabei fazendo de uma forma diferente dos demais e até da resolução do instrutor.
Utilizo IA como um "professor" para sanar dúvidas, solicitar orientação e até um passo a passo explicativo quando necessário, uma vez que algumas resoluções utilizam algumas "ferramentas" que ainda não vimos nos cursos anteriores. No meu entendimento o formulário era pra ser criado todo em JavaScript, e o meu ficou assim:

let formulario = document.createElement('form');
let campoNome = document.createElement('input');
let campoEmail = document.createElement('input');
let botao = document.createElement('button');
let resultado = document.createElement('p')

campoNome.type = 'text';
campoNome.placeholder = 'Digite seu nome';

campoEmail.type = 'email';
campoEmail.placeholder = 'exemplo@email.com'

botao.textContent = 'Enviar'

formulario.appendChild(campoNome);
formulario.appendChild(campoEmail);
formulario.appendChild(botao);

document.body.appendChild(formulario);
document.body.appendChild(resultado);

botao.addEventListener('click', function () {
    event.preventDefault();

    let nome = campoNome.value;
    let email = campoEmail.value;

    console.log('Nome:' + nome);
    console.log('email:' + email);

    resultado.textContent = 'Nome: ' + nome  + ' | Email ' + email;
});

Depois a IA me forneceu um HTML básico para testar a funcionalidade:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Formulário</title>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>

Oi, Mike! Como vai?

Foi boa forma como você resolveu o desafio criando todos os elementos do formulário usando document.createElement. Isso mostra que você já está explorando bem a manipulação do DOM com JavaScript. Também foi uma boa decisão usar event.preventDefault() para evitar o recarregamento da página ao clicar no botão, e a exibição do resultado usando textContent deixou o comportamento do formulário bem claro.

Uma dica interessante para o futuro é usar o método trim() para remover espaços extras que podem aparecer antes ou depois do texto digitado pelo usuário. Isso ajuda a evitar dados com espaços desnecessários. Veja este exemplo:


let nome = campoNome.value.trim();
let email = campoEmail.value.trim();

console.log(nome);
console.log(email);

Nesse código usamos trim() para remover espacos no inicio e no final do texto digitado, garantindo que os valores capturados sejam mais organizados antes de serem usados no programa.

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

Exer 2 - Criando formulário

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