https://github.com/raizertechdev/formulario-inscricao-tutorial
Meu projeto primordial é um Formulário de Inscrição meticulosamente refinado. Cada interação é uma sinfonia de validações, oferecendo orientação instantânea e feedback perspicaz. Moldado pelas tecnologias HTML, CSS e JS, sua essência é a excelência em cada detalhe.
https://github.com/raizertechdev/formulario-inscricao-tutorial
css3 hrml5 javascript
Last synced: 10 months ago
JSON representation
Meu projeto primordial é um Formulário de Inscrição meticulosamente refinado. Cada interação é uma sinfonia de validações, oferecendo orientação instantânea e feedback perspicaz. Moldado pelas tecnologias HTML, CSS e JS, sua essência é a excelência em cada detalhe.
- Host: GitHub
- URL: https://github.com/raizertechdev/formulario-inscricao-tutorial
- Owner: RaizerTechDev
- License: mit
- Created: 2024-06-04T20:21:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-29T00:50:42.000Z (about 1 year ago)
- Last Synced: 2025-01-11T08:12:13.217Z (12 months ago)
- Topics: css3, hrml5, javascript
- Language: CSS
- Homepage: https://raizertechdev-forminscricao.netlify.app/
- Size: 54.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Formulário/Inscrição-Tutorial!!
[ ( Clique aqui e se inscreva para mais dicas ao: `Formulário de Inscrição!!`) ](https://raizertechdev-forminscricao.netlify.app/)
[Demonstração-Formulário/Inscrição-Tutorial] 
---
### 📌 Objetivos:
- Este projeto não é apenas um formulário de inscrição comum. Ele representa um marco da minha jornada técnica, onde convergem habilidades e visão. Por trás da simplicidade de preenchimento de dados, reside a complexidade sutil de implementações meticulosas. Utilizando a metodologia BEM como uma ferramenta de precisão, eu não apenas desenvolvo código, mas esculpo uma experiência fluida e eficiente. Este formulário não é apenas uma interface, é uma expressão tangível da minha dedicação à excelência técnica e à arte de simplificar o complexo.
- O layout responsivo assegura que o verificador funcione bem em dispositivos móveis.
- A funcionalidade em JavaScript garante que o usuário preencha todos os campos, exibindo mensagens de erro caso contrário. Além disso, a visibilidade da senha e a verificação de sua força foram integradas e documentadas, proporcionando uma experiência de usuário aprimorada.
---
### 📌 Estrutura do Projeto:
Adotei uma estrutura padrão de Arquitetura/Organização de Pastas para gerenciar os arquivos de forma eficiente. Utilizando HTML, CSS e JavaScript, implementei esta solução, consolidando meus conhecimentos e me preparando para desafios futuros com confiança.
```
Formulário de Inscrição-Tutorial/
│
├── .vscode/
│ └── settings.json
│
├── assets/
│ ├── images/
│ │ ├── bg-intro-desktop.png
│ │ ├── bg-intro-mobile.png
│ │ ├── icon-error.svg
│ │
│ └── css/
│ │ ├── styles.css
│ │ └── terms.css
│ │
│ └── js/
│ └── script.js
│
├── index.html
│
├── terms.html
│
└── README.md
```
---
### 📌 Aqui está uma pequena documentação do Projeto: Conceitos Aplicados👇
▪ `HTML(index)`: Este código implementa um formulário de inscrição em um tutorial, incorporando o conceito de aprendizado observacional. A introdução destaca a eficácia de aprender a programar ao observar programadores experientes em ação.
🚀Copy code
```
Aprenda a programar!!
"Observando os outros."
```
```
```
▪ `CSS`: O conceito aplicado nesta estrutura é o uso de variáveis CSS para definir cores principais e auxiliares, permitindo uma fácil personalização e manutenção do esquema de cores em todo o documento.
🚀Copy code
```
:root {
--Red: hsl(0, 100%, 74%);
--Green: hsl(154, 59%, 51%);
--Blue: hsl(248, 32%, 49%);
--DarkBlue: hsl(249, 10%, 26%);
--GrayishBlue: hsl(246, 25%, 77%);
}
```
```
.page__text {
text-decoration: underline;
text-decoration-color: #333; /* Apply underline only to this span */
font-weight: bold;
}
.page__span {
font-size: 28px;
color: rgb(147, 249, 92);
font-weight: bold;
letter-spacing: normal;
text-decoration: none; /* Ensure no underline is applied */
font-style: italic;
}
```
```
.form__password-container {
position: relative;
}
.form__input-wrapper {
position: relative;
}
.form__toggle-password {
position: absolute;
top: 65%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
color: #333;
}
.form__toggle-password.fa-eye-slash {
right: 30px; /* Ajuste conforme necessário para manter a posição quando a senha estiver visível */
}
```
▪ `JavaScript`: Implementa a validação de formulário com dados inseridos pelos usuários antes do envio.
1. Suas Funcionalidades Principais:
- Validação de campos obrigatórios.
- Verificação de formato de e-mail.
- Verificação da força da senha.
- Confirmação de aceitação dos termos e condições. e verificar a força de suas senhas em tempo real, recebendo classificações como Muito Fraca, Fraca, Moderada, Forte ou Muito Forte.
2. Regras para a classificação das senhas incluem:
- Letras minúsculas;
- Letras maiúsculas;
- Números;
- Caracteres especiais.
🚀Copy code
```
// Define uma array de mensagens de erro para cada campo
const errormessages = [
"First name cannot be empty",
"Last name cannot be empty",
"Looks like this is not an email",
"Password cannot be empty",
"Interesses Específicos cannot be empty", // Esta mensagem de erro é para o campo de "Interesses Específicos"
];
```
```
// Função para validar um endereço de e-mail
const isValidEmail = (email) => {
const atLocation = email.indexOf("@");
if (atLocation > 0) {
const domain = email.substring(atLocation + 1);
if (domain.indexOf(".") > 0 && domain.indexOf(".") < domain.length - 1) {
return true;
}
}
return false;
};
```
```
// Função para alternar a visibilidade da senha
togglePassword.addEventListener("click", () => {
if (passwordInput.type === "password") {
passwordInput.type = "text";
togglePassword.classList.remove("fa-eye");
togglePassword.classList.add("fa-eye-slash");
} else {
passwordInput.type = "password";
togglePassword.classList.remove("fa-eye-slash");
togglePassword.classList.add("fa-eye");
}
});
```
```
// Verifica se o checkbox de aceitação dos termos foi marcado
const termsCheckbox = document.querySelector('input[name="terms"]');
if (!termsCheckbox.checked) { // Verifica se o checkbox não está marcado
alert("Por favor, aceite os termos e condições.");
allcorrect = false;
}
```
---
## Tecnologias
Tecnologias utilizadas no projeto:
- HTML5 (Linguagem de marcação utilizada para a construção das páginas web).
- CSS3 (Mecanismo para adicionar estilos a uma página web).
- JavaScript (Linguagem de programação de alto nível, que pode ser interpretada ou compilada just-in-time (JIT) para execução em um ambiente específico).
- Git (Sistema de controle de versões).
- Github (Plataforma para hospedagem de código-fonte).
- Visual Studio Code (Editor de código-fonte).
- Navegador web (Interação com documentos HTML).
---
Ferramenta utilizada no projeto:
- [VsCode](https://code.visualstudio.com/download) (v1.80.1)
---
## Licença
- Esse projeto está sob a licença MIT.
---
Autor
   RafaRaizer-Dev
   Whatsapp | LinkedIn | GitHub| Tableau| Portfólio