Newsletter sign-up form with success message

Community feedback

• Account deleted

  Hi 👋 Nice solution!

  Here are some tips:

  HTML semantics

  It's better to use ul element for list like content. Your markup could look like this:

  <ul>
    <li>Product ... </li>
    <li>Measuring ...</li>
    <li>And much more</li>
  <ul>
  

  One extra advantage here except a correct markup is a bullet points customisation. You don't need to insert svg element before each item. You can change list style with this simple CSS:

  li::marker {
    content: url(./path/to/your/image.svg);
  }
  

  Modals

  There is a <dialog> element that makes it easier to work with modals. You can move success message to your markup and reduce JS code. Even though <dialog> relatively new it's well supported by all major browsers

  Error

  Your custom error does not work. That's because you're trying to use pseudo-element selector with self-closing element. When you use pseudo-element, browser will kinda nest it inside the original one. Example:

  CSS:

  div::before {
    content: /* something happening here */
  }
  
  .div::after {
    content: /* something happening here */
  }
  

  DOM:

  <div>
    ::before
    // div content
    ::after
  </div>
  

  But input element is self-closing:

  <input />
  

  That means there is no space for ::before or ::after element inside it because that "inside" does not exists

  Hope that was helpful. Keep coding.

  0