Newsletter sign-up form with success message

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.