@xphstos
Posted
Pretty clean solution! I like it!
Regarding on selecting items in JS, there is no correct or incorrect way. That's the best and the worst part of using HTML, CSS and JS.
There are some best practices though that enforcing us with some confidence about our code.
-
Is using IDs to element we use with JS. IDs must be unique although this will error only if you validate your HTML.
-
Using data-attributes. Data attributes can have a predefined format, like
data-js="NAME". Again we're responsible to make them unique and even if we use the same name multiple times, there is no harm. -
Special CSS class. That's what you did and it's fine! You get the same treatment as using data attributes.
-
Using a combination of the above just to be sure our selector is unique. For example, in our very simple case of a form, a selector like
.js-email[name="email"]is more than enough. Keep in mind that if you work with components, that newsletter component could live on multiple pages and one of them could be another page containing a form (like a contact form) that also asks for user's email. Suddenly our selector seems random enough to be confusing. Usually in cases like that you could use#newsletterForm input[name="email"]and#contactForm input[name="email"]
Again, kudos for your solution!
You just have a small error in your code.
In email-input.js:18 you write email.ariaPlaceholder.style.textColor = "#ff625730";
Style is not an attribute of ariaPlaceholder, probably added there by mistake.
