1
FACULDADE ANHANGUERA – SANTO ANDRÉ/SP
SUPERIOR EM ANÁLISE E DESENVOLVIMENTO DE
SISTEMAS
DANIEL DAVID MARTINS - RA: 3614094505
PORTFÓLIO - RELATÓRIO DE AULA PRÁTICA:
DISCIPLINA: DESENVOLVIMENTO EM JAVASCRIPT
São Paulo/SP
2025
2
DANIEL DAVID MARTINS - RA: 3614094505
PORTFÓLIO - RELATÓRIO DE AULA PRÁTICA
TRABALHO: PREENCIMENTO DE E-MAIL
Trabalho de portfólio apresentado como
requisito parcial para a obtenção de pontos
para a média semestral.
Coordenador: ---
Tutor: Rogian Villa
Professor: Anderson Emidio de
Macedo Goncalves
São Paulo/SP
2025
3
1. INTRODUÇÃO
Escrita de código em JavaScript para validar campo de um formulário simples para
colega de e-mail. Apresentar uma mensagem orientando como preencher
corretamente o campo de email.
O playcode é uma plataforma online de criação de código em linguagens como
JavaScript que permite realizar testes e executar rotinas escritas na linguagem e
forma prática, rápita e interativa.
2. DESENVOLVIMENTO
Criar um novo projeto dentro do Playcode.io composto por um pequeno formulário
com campo para colega de email que deve ser informado pelo usuário.
Escrever código que deverá verificar se o campo de e-mail está preenchido
corretamente, mostrar uma mensagem ao usuário informando a composição correta
de um e-mail.
São Paulo/SP
2025
4
3. RESULTADO
Primeiro passo é acessar o site playcode.io, clicar em “começar a codificar” e escolher a linguagem
HTML.
Proximo passo sera a criação do código HTML para a elaboração do campo de e-mail, onde sera
feito uma verificação se está preenchido corretamente e mostrar uma mensagem ao usuário
informando a composição correta de um e-mail
Código fonte;
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validação de E-mail</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
}
São Paulo/SP
2025
5
.form-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 300px;
}
.form-container input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-container button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.form-container button:hover {
background-color: #45a049;
}
.message {
margin-top: 10px;
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Cadastro de E-mail</h2>
<form id="emailForm">
<label for="email">Digite seu E-mail:</label>
<input type="text" id="email" name="email" placeholder="exemplo@dominio.com">
<button type="submit">Enviar</button>
</form>
<p id="message" class="message"></p>
</div>
<script>
const form = document.getElementById('emailForm');
const emailInput = document.getElementById('email');
const message = document.getElementById('message');
São Paulo/SP
2025
6
form.addEventListener('submit', function (event) {
event.preventDefault(); // Impede o envio do formulário
const emailValue = emailInput.value;
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(emailValue)) {
message.textContent = "Por favor, insira um e-mail válido. Exemplo:
exemplo@dominio.com";
} else {
message.textContent = "E-mail válido! Obrigado.";
message.style.color = 'green';
}
});
</script>
</body>
</html>
São Paulo/SP
2025
7
Podemos analisar que ao digitar o e-mail incorretamente, a mensagem com o erro
aparece para orientar como devemos preencher o campo.
Em seguida corrigimos o e-mail e uma mensagem aparece informando que o e-mail é válido.
4. CONCLUSÃO
Utilizando a linguagem de programação dentro da plataforma playcode.io, podemos
criar um formulário contendo as informações de e-mail do usuário. No HTML
inserimos os elementos necessários para a digitação do e-mail do usuário, e também
utilizamos propriedades do CSS para estilizar a página web de forma agradável. No
JavaScript, foram adicionados comandos para validar os campos, alertando com uma
mensagem de erro caso o usuário digite um e-mail incorreto ou fora do padrão exigido.
O HTML é fundamental na construção de websites, permitindo a inclusão de
conteúdos como vídeos e imagens através de hipertextos.
São Paulo/SP
2025
8
O JavaScript possibilita a adição de diversos efeitos dinâmicos ao site, melhorando
significativamente sua interatividade em resposta às ações do usuário.
O CSS é utilizado para estilizar elementos marcados em linguagens como HTML,
separando o conteúdo da apresentação visual do site. Ele é essencial para a
personalização visual, permitindo ajustes como cores, fontes e espaçamento entre
parágrafos.
Nesta atividade prática, destacamos como a linguagem de programação pode ser
uma aliada poderosa no dia a dia de trabalho, tornando projetos mais dinâmicos,
atrativos e profissionais.
São Paulo/SP
2025
