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 [Link] 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 [Link], 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@[Link]">
<button type="submit">Enviar</button>
</form>
<p id="message" class="message"></p>
</div>
<script>
const form = [Link]('emailForm');
const emailInput = [Link]('email');
const message = [Link]('message');
São Paulo/SP
2025
6
[Link]('submit', function (event) {
[Link](); // Impede o envio do formulário
const emailValue = [Link];
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if () {
[Link] = "Por favor, insira um e-mail válido. Exemplo:
exemplo@[Link]";
} else {
[Link] = "E-mail válido! Obrigado.";
[Link] = '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 [Link], 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
