Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 3 months ago

Intro component with registration form Echo with HTML, CSS and JS

Benjamin Juarez•390
@ImBenja
A solution to the Intro component with sign-up form challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

Frontend - Intro component with sign up form solution

Esta es mi solución al desafío Intro component with sign up form solution de Frontend Mentor. Los desafíos de Frontend Mentor te ayudan a mejorar tus habilidades de codificación mediante la construcción de proyectos realistas.

📖 DESCRIPCION GENERAL

EL DESAFIO

Los usuarios deben poder:

  1. Ver el diseño óptimo según el tamaño de pantalla de su dispositivo.

  2. Ver los diseños flex-box y su estructura.

  3. Ver la pagina con un mensaje de agradecimiento una vez enviado el formulario.

  4. Ver los mensajes de errores para poder guiarse en el formulario si algo se produce.

  5. Ver en tiempo real cada mensaje de error.

  6. Ver el campo de contraseña para poder ocultar o mostrarla.

LINKS

  • Solution URL: Solucion
  • Live Site URL: Sitio en Vivo

⚒️ MI PROCESO

TECNOLOGIAS UTILIZADAS

  • HTML: Estructura semántica de toda la informacion y el formulario.

  • CSS: Estilos avanzados con flex-box.

  • JavaScript: Funcionalidad para los inputs y detalles extras.

  • Google Fonts: Fuente Poppins para un diseño moderno.

LO QUE APRENDI

  1. Manejo de Formulario: Aprendi a manejar multiples inputs y validarlos.

  2. Validacion de Formularios: Aprendi a validar formularios y mostrar mensajes de error.

  3. Debounce: Aprendi a usar debounce para evitar que se envien multiples peticiones al servidor.

  4. Validacion de Emails: Aprendi a validar emails y mostrar mensajes de error.

// Función para validar el correo electrónico
function validateEmail(emailValue) {
  // Validar el correo electrónico
  if (!emailValue) return { isValid: false, message: "Email is required" };
  // Validar el formato del correo electrónico
  if (emailValue.split("@").length > 2)
    return { isValid: false, message: "Only one @ allowed" };
  // Validar el dominio del correo electrónico
  if (!emailRegex.test(emailValue))
    return { isValid: false, message: "Please enter a valid email address" };
  return { isValid: true, message: "" };
}

// Función para validar el nombre
function validateName(nameValue) {
  // Validar el nombre
  if (!nameValue) return { isValid: false, message: "Name is required" };
  // Validar la longitud del nombre
  if (nameValue.length < 3)
    return { isValid: false, message: "Name must be at least 3 characters" };
  if (nameValue.length > 30)
    return { isValid: false, message: "Name must be at most 30 characters" };
  // Validar que solo contenga letras
  if (!/^[a-zA-Z]+$/.test(nameValue))
    return { isValid: false, message: "Name must contain only letters" };
  return { isValid: true, message: "" };
}

// Función para validar el apellido
function validateLastName(lastNameValue) {
  // Validar el apellido
  if (!lastNameValue)
    return { isValid: false, message: "Last name is required" };
  // Validar la longitud del apellido
  if (lastNameValue.length < 3)
    return {
      isValid: false,
      message: "Last name must be at least 3 characters",
    };
  if (lastNameValue.length > 30)
    return {
      isValid: false,
      message: "Last name must be at most 30 characters",
    };
  // Validar que solo contenga letras
  if (!/^[a-zA-Z]+$/.test(lastNameValue))
    return { isValid: false, message: "Last name must contain only letters" };
  return { isValid: true, message: "" };
}

// Función para validar la contraseña
function validatePassword(passwordValue) {
  // Validar la contraseña
  if (!passwordValue)
    return { isValid: false, message: "Password is required" };
  // Validar la longitud de la contraseña
  if (passwordValue.length < 8)
    return {
      isValid: false,
      message: "Password must be at least 8 characters",
    };
  if (passwordValue.length > 20)
    return {
      isValid: false,
      message: "Password must be at most 20 characters",
    };
  // Validar que contenga al menos una letra mayúscula, una letra minúscula, un número y un carácter especial
  if (!/[A-Z]/.test(passwordValue))
    return {
      isValid: false,
      message: "Password must contain at least one uppercase letter",
    };
  if (!/[a-z]/.test(passwordValue))
    return {
      isValid: false,
      message: "Password must contain at least one lowercase letter",
    };
  if (!/\d/.test(passwordValue))
    return {
      isValid: false,
      message: "Password must contain at least one number",
    };
  if (!/[!@#$%^&*()_+{}\[\]:;<>,.?~\\-]/.test(passwordValue))
    return {
      isValid: false,
      message: "Password must contain at least one special character",
    };
  return { isValid: true, message: "" };
}

👨‍💻 AUTOR

  • GitHub - ImBenja
  • Frontend Mentor - @ImBenja
  • Instagram - @benjajuarez1_
  • Twitter - @benjajuarez_2
  • Linkedin - Benjamim Juarez

🙏 AGREDECIMIENTOS

Agradezco a Frontend Mentor por proporcionar este desafío y a la comunidad por su apoyo y feedback.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Benjamin Juarez's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.