Newsletter Sign-Up

Solution retrospective
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.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Maximilian Dybvik'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