Password Visibility
Posted on 07 Oct 2022
Tech Stack
Frontend
HTML, CSS, JavaScript
Deployment
GitHub Pages
Highlights
CSS Adjacent Sibling Selector
About
Here is my solution/demo to the password visibility toggle found on many websites. This is a pure JavaScript solution. As per the pattern I learned from Kevin Powell, I’ve used data-
attributes as my selectors like the form or password toggle buttons. I’ve now streamlined to use a custom data-element
attribute and the value as the label of the element—e.g. data-element=\"form-example\"
. Then I access it in CSS
like this: [data-element=form-example]
or in JS
like this: document.querySelector(\"[data-element=form-example]\")
.
For the solution demo, the form doesn’t do anything and just outputs the form values on the page itself.
Feel free to use my code for your own reference! :)
Featured Projects
Scroll left and right to see more.
A lame joke…
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat aliquid consequuntur ducimus id eligendi sequi sapiente est corrupti illum autem!
Nulla exercitationem tempore, molestiae laborum cum ullam culpa facere magni suscipit? Mollitia assumenda fugiat temporibus perferendis quaerat, error eum quasi.
Repellendus enim nemo similique, nobis hic sit dolor molestiae accusamus rem sequi dolorem est vitae corrupti! Dolorem sequi magni dolore.