Password Hide and Show Using JavaScript (Beginner Project)

If you are learning JavaScript, this is one of the best and easiest beginner projects.
In this project, we will create a Password Hide and Show feature using HTML, CSS, and JavaScript.

This feature is used in login forms, signup pages, and web apps.

What You Will Learn

After completing this project, you will understand:

How input type="password" works
How to change input type using JavaScript
How to use addEventListener
Basic if-else logic
Real-world form functionality

This project is perfect for beginners.

Technologies Used

HTML – Structure
CSS – Styling
JavaScript – Logic

No library, no framework
Pure JavaScript

password-toggle/
│── index.html
│── style.css
│── script.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Password Hide & Show</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="box">
    <h2>Password Toggle</h2>
    <input type="password" id="password" placeholder="Enter password">
    <button id="toggleBtn">Show</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  font-family: Arial, sans-serif;
}

.box {
  background: white;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  width: 280px;
}

input {
  width: 100%;
  padding: 10px;
  margin: 15px 0;
  font-size: 16px;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  background: #667eea;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background: #5a67d8;
}

const password = document.getElementById("password");
const toggleBtn = document.getElementById("toggleBtn");

toggleBtn.addEventListener("click", () => {
  if (password.type === "password") {
    password.type = "text";
    toggleBtn.innerText = "Hide";
  } else {
    password.type = "password";
    toggleBtn.innerText = "Show";
  }
});

How This Works (Simple Explanation)

Password field is hidden by default (type="password")
When button is clicked:
- JavaScript checks input type
- If password → show text
- If text → hide password
Button text changes accordingly

This is a real-world JavaScript use case.

See demo of this code