{"id":19817661,"url":"https://github.com/raizertechdev/formulario-inscricao-tutorial","last_synced_at":"2025-02-28T15:23:43.795Z","repository":{"id":242882554,"uuid":"810500735","full_name":"RaizerTechDev/formulario-inscricao-tutorial","owner":"RaizerTechDev","description":"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.","archived":false,"fork":false,"pushed_at":"2024-10-29T00:50:42.000Z","size":56777,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-11T08:12:13.217Z","etag":null,"topics":["css3","hrml5","javascript"],"latest_commit_sha":null,"homepage":"https://raizertechdev-forminscricao.netlify.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RaizerTechDev.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-04T20:21:43.000Z","updated_at":"2024-12-24T09:44:50.000Z","dependencies_parsed_at":"2025-01-11T08:11:48.273Z","dependency_job_id":"855ba3ac-dd9c-4ff1-ab09-1a4f8fc9793d","html_url":"https://github.com/RaizerTechDev/formulario-inscricao-tutorial","commit_stats":null,"previous_names":["rafarz76dev/formulario-inscricao-tutorial","raizertechdev/formulario-inscricao-tutorial"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2Fformulario-inscricao-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2Fformulario-inscricao-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2Fformulario-inscricao-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2Fformulario-inscricao-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RaizerTechDev","download_url":"https://codeload.github.com/RaizerTechDev/formulario-inscricao-tutorial/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241173927,"owners_count":19922208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","hrml5","javascript"],"created_at":"2024-11-12T10:13:16.399Z","updated_at":"2025-02-28T15:23:43.774Z","avatar_url":"https://github.com/RaizerTechDev.png","language":"CSS","readme":"# Formulário/Inscrição-Tutorial!!\n\n\u003cbr\u003e\n\n \u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://media.giphy.com/media/9TFBxN300KpCUI6sBD/giphy.gif\" align=\"center\" height=\"45\" width=\"45\"\u003e\n\n[ ( Clique aqui e se inscreva para mais dicas ao: `Formulário de Inscrição!!`) ](https://raizertechdev-forminscricao.netlify.app/)\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \n\u003cimg src= \"https://media.giphy.com/media/3zSF3Gnr7cxMbi6WoP/giphy.gif\" align=\"center\" height=\"55\" width=\"55\"\u003e [Demonstração-Formulário/Inscrição-Tutorial] \u003cimg src= \"https://media.giphy.com/media/E5DzZsofmgxc9wjbhX/giphy.gif\" align=\"center\" height=\"35\" width=\"35\"\u003e\n\n\u003cimg height=\"480em\" src=\"./assets/images/git-readme.gif\"  align=\"center\"\u003e\n\n---\n\n\u003cdiv align=\"left\"\u003e\n\n### 📌 Objetivos:\n\n- 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.\n\n\u003cbr/\u003e\n\n- O layout responsivo assegura que o verificador funcione bem em dispositivos móveis.\n\n\u003cbr/\u003e\n\n- 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.\n\n\u003cbr/\u003e\n\n---\n\n### 📌 Estrutura do Projeto:\n\nAdotei 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.\n\n```\nFormulário de Inscrição-Tutorial/\n│\n├── .vscode/\n│   └── settings.json\n│\n├── assets/\n│   ├── images/\n│   │   ├── bg-intro-desktop.png\n│   │   ├── bg-intro-mobile.png\n│   │   ├── icon-error.svg\n│   │\n│   └── css/\n│   │   ├── styles.css\n│   │   └── terms.css\n│   │\n│   └── js/\n│       └── script.js\n│\n├── index.html\n│\n├── terms.html\n│\n└── README.md\n```\n\n---\n\n### 📌 Aqui está uma pequena documentação do Projeto: Conceitos Aplicados👇\n\n▪ `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.\n\n🚀Copy code\n\n```\n\u003cdiv class=\"leftpage\"\u003e\n      \u003ch1 class=\"page__header\"\u003e\n        \u003cspan class=\"page__text\"\u003eAprenda a programar!!\u003c/span\u003e\n        \u003cbr /\u003e\u003cbr /\u003e\n        \u003cspan class=\"page__span\"\u003e\"Observando os outros.\"\u003c/span\u003e\n      \u003c/h1\u003e\n    \u003c/div\u003e\n```\n\n```\n    \u003cdiv class=\"rightpage\"\u003e\n      \u003cform class=\"form form--subscription\"\u003e\n        \u003cdiv class=\"form__password-container\"\u003e\n            \u003cdiv class=\"form__input-wrapper\"\u003e\n              \u003cimg src=\"./images/icon-error.svg\" class=\"form__error\" /\u003e\n              \u003cinput id=\"passwordInput\" type=\"password\" placeholder=\"Password\" class=\"form__input\" /\u003e\n              \u003ci id=\"togglePassword\" class=\"fas fa-eye form__toggle-password\"\u003e\u003c/i\u003e\n            \u003c/div\u003e\n        \u003c/form\u003e\n```\n\n▪ `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.\n\n🚀Copy code\n\n```\n:root {\n  --Red: hsl(0, 100%, 74%);\n  --Green: hsl(154, 59%, 51%);\n  --Blue: hsl(248, 32%, 49%);\n  --DarkBlue: hsl(249, 10%, 26%);\n  --GrayishBlue: hsl(246, 25%, 77%);\n}\n```\n\n```\n.page__text {\n  text-decoration: underline;\n  text-decoration-color: #333; /* Apply underline only to this span */\n  font-weight: bold;\n}\n\n.page__span {\n  font-size: 28px;\n  color: rgb(147, 249, 92);\n  font-weight: bold;\n  letter-spacing: normal;\n  text-decoration: none; /* Ensure no underline is applied */\n  font-style: italic;\n}\n```\n\n```\n.form__password-container {\n  position: relative;\n}\n\n.form__input-wrapper {\n  position: relative;\n}\n\n.form__toggle-password {\n  position: absolute;\n  top: 65%;\n  right: 10px;\n  transform: translateY(-50%);\n  cursor: pointer;\n  color: #333;\n}\n\n.form__toggle-password.fa-eye-slash {\n  right: 30px; /* Ajuste conforme necessário para manter a posição quando a senha estiver visível */\n}\n```\n\n▪ `JavaScript`: Implementa a validação de formulário com dados inseridos pelos usuários antes do envio.\n\n1. Suas Funcionalidades Principais:\n\n- Validação de campos obrigatórios.\n- Verificação de formato de e-mail.\n- Verificação da força da senha.\n- 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.\n\n2. Regras para a classificação das senhas incluem:\n\n- Letras minúsculas;\n- Letras maiúsculas;\n- Números;\n- Caracteres especiais.\n\n🚀Copy code\n\n```\n// Define uma array de mensagens de erro para cada campo\nconst errormessages = [\n  \"First name cannot be empty\",\n  \"Last name cannot be empty\",\n  \"Looks like this is not an email\",\n  \"Password cannot be empty\",\n  \"Interesses Específicos cannot be empty\", // Esta mensagem de erro é para o campo de \"Interesses Específicos\"\n];\n```\n\n```\n// Função para validar um endereço de e-mail\nconst isValidEmail = (email) =\u003e {\n  const atLocation = email.indexOf(\"@\");\n  if (atLocation \u003e 0) {\n    const domain = email.substring(atLocation + 1);\n    if (domain.indexOf(\".\") \u003e 0 \u0026\u0026 domain.indexOf(\".\") \u003c domain.length - 1) {\n      return true;\n    }\n  }\n  return false;\n};\n```\n\n```\n// Função para alternar a visibilidade da senha\n togglePassword.addEventListener(\"click\", () =\u003e {\n  if (passwordInput.type === \"password\") {\n    passwordInput.type = \"text\";\n    togglePassword.classList.remove(\"fa-eye\");\n   togglePassword.classList.add(\"fa-eye-slash\");\n   } else {\n    passwordInput.type = \"password\";\n    togglePassword.classList.remove(\"fa-eye-slash\");\n    togglePassword.classList.add(\"fa-eye\");\n   }\n });\n```\n\n```\n// Verifica se o checkbox de aceitação dos termos foi marcado\n  const termsCheckbox = document.querySelector('input[name=\"terms\"]');\n  if (!termsCheckbox.checked) { // Verifica se o checkbox não está marcado\n    alert(\"Por favor, aceite os termos e condições.\");\n    allcorrect = false;\n  }\n```\n\n---\n\n## Tecnologias\n\n\u003cimg src=\"https://media.giphy.com/media/iT138SodaACo9LImgi/giphy.gif\" align=\"center\" height=\"75\" width=\"75\"\u003e Tecnologias utilizadas no projeto:\n\n- HTML5 (Linguagem de marcação utilizada para a construção das páginas web).\n\n- CSS3 (Mecanismo para adicionar estilos a uma página web).\n\n- 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).\n\n- Git (Sistema de controle de versões).\n\n- Github (Plataforma para hospedagem de código-fonte).\n\n- Visual Studio Code (Editor de código-fonte).\n\n- Navegador web (Interação com documentos HTML).\n\n---\n\n\u003cimg src=\"https://media.giphy.com/media/SS8CV2rQdlYNLtBCiF/giphy.gif\" align=\"center\" height=\"35\" width=\"45\"\u003e Ferramenta utilizada no projeto:\n\n- [VsCode](https://code.visualstudio.com/download) (v1.80.1)\n\n---\n\n## Licença\n\n- Esse projeto está sob a licença MIT.\n\n---\n\n\u003cimg src=\"https://media.giphy.com/media/ImmvDZ2c9xPR8gDvHV/giphy.gif\" align=\"center\" height=\"25\" width=\"25\"\u003e Autor\n\n\u003cp\u003e\n    \u003cimg align=left margin=10 width=80 src=\"https://avatars.githubusercontent.com/u/87991807?v=4\"/\u003e\n    \u003cp\u003e\u0026nbsp\u0026nbsp\u0026nbspRafaRaizer-Dev\u003cbr\u003e\n    \u0026nbsp\u0026nbsp\u0026nbsp\u003ca href=\"https://api.whatsapp.com/send/?phone=47999327137\"\u003eWhatsapp\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"https://www.linkedin.com/in/rafael-raizer//\"\u003eLinkedIn\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"https://github.com/RaizerTechDev\"\u003eGitHub\u003c/a\u003e|\u0026nbsp;\u003ca href=\"https://public.tableau.com/app/profile/rafael.raizer\"\u003eTableau\u003c/a\u003e|\u0026nbsp;\u003ca href=\"https://raizertechdev-portfolio.netlify.app/\"\u003ePortfólio\u003c/a\u003e\u0026nbsp;\u003c/p\u003e\n\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraizertechdev%2Fformulario-inscricao-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraizertechdev%2Fformulario-inscricao-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraizertechdev%2Fformulario-inscricao-tutorial/lists"}