Newsletter Sign-Up

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

I'm pleased with the outcome, and how close it it is to the design.

What challenges did you encounter, and how did you overcome them?

Setting a background color on the input field seems to place the background over the placeholder text. Had to make background color somewhat transparent instead.

When adding the error class to my input field based on validation outcome, the field still inherited border color so I had to use !important, which I would prefer not to do.

.error {
  border-color: var(--tomato) !important;
  background-color: var(--tomato-transparent);
  color: var(--tomato);

  &:active, &:focus, &:target {
    border: 1.5px solid var(--dark-slate-grey) !important;
  }

  &::placeholder {
    color: var(--tomato);
    opacity: 1;
  }
}

What specific areas of your project would you like help with?

Any feedback is appreciated 😁

I added "autocomplete="email" autofocus" to my input field and I am not sure if this is bad practice, both for security reasons and for accessibility.

Secondly, whenever you type in an invalid email and try to submit, the button state gets "stuck" as active or focused, and I dont know how to prevent this.