Show and hide passwords with eye icon | JavaScript | CSS

In this video, I show you how to use password masking to show and hide passwords in an input field using vanilla JavaScript. I’ll also show you how to improve the appearance of the dots, add a nicer outline to the inputs, toggle the password visibility on and off, and switch the visibility icons.

00:20 – Hiding passwords and displaying dots
00:54 – Improving the appearance of the dots
01:56 – Making a better outline [focus state]
2:55 – Adding the eye icon
4:14 – Adding functionality to the icon and toggling password visibility with JavaScript
06:06 – Toggling the eye icons

—

const me = {
name: “Leanne 👩🏻”,
passions: [“coffee☕️”, “code 💻”, “cats 🐱”],
unpopular_opinion: “LOVES CSS ❤️”,
favorite_colors: [“hotpink”, “orangered”],
channel_aim: “Show the world that CSS is fun and web development rules! 👑”
}

—

🐤 Say hi on Twitter: https://twitter.com/RybaLeanne
🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychallenge