How to Create a Sign-Up Page With Hide and Show Password Functionality

Hi guys I am back with another fantastic project in this project I create a Sign-Up page using HTML, CSS & JavaScript.

I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them for free.

Sign-Up Page

On this sign-up page, you see one image and two input fields first for Email and Second for Password and in last Sign-Up button.

But the main part is to hide and show the password when the user clicks on the hide and show icon.

It is very simple to create this type of Sign-Up page using HTML, CSS, and some JavaScript.

You can also use this source code in your projects without any copyright and limitations just download and use it as you want.

About This Project

This project was created by the codingpakistan team to help students learn coding and programming in a simple way. If you want to join our team please follow us on Instagram.

Created by	Coding Pakistan
Languages	HTML / CSS / JS
Source Code	Available Below
Preview	Take Preview

Create a Sign-Up Page

There are some steps to create this type of Sign-Up Page using HTML, CSS, and JavaScript that are given below.

The first step is to create one folder.

Open this folder in Vs Code Editor and create three files in HTML, CSS, and JavaScript.
Make sure the HTML file extension is (.html), the CSS file extension is (.css) and the JavaScript file extension is (.js)
After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)

The last step is copying and pasting the given code into your files.

NOTE: I use some images like hide and show icons and front images you can download from Google and change the path in your code.

Sign-Up Page Hide and Show Password – Source Code

HTML FILE

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sign Up 4</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="card">
      <img src="logo.png" />
      <h2>Sign Up</h2>
      <form class="form">
        <input
          spellcheck="false"
          class="control"
          type="email"
          placeholder="Email"
        />
        <div class="password">
          <input
            spellcheck="false"
            class="control"
            id="password"
            type="password"
            placeholder="Password"
            autocomplete="off"
          />
          <button
            class="toggle"
            type="button"
            onclick="togglePassword(this)"
          ></button>
        </div>
        <button class="control" type="button">Sign Up</button>
      </form>
    </div>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

CSS FILE

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

@keyframes rotate {
  100% {
    background-position: 0% 50%;
  }
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  background: #aca4f3;
  font-family: "Euclid Circular A", "Poppins";
  color: #3a334e;
  animation: rotate 1s infinite alternate linear;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
}

.control {
  border: 0;
  outline: none;
  width: 100%;
  height: 56px;
  padding: 0 56px 0 16px;
  border-radius: 6px;
  background: #f4f5f7;
  color: #5a4f79;
  font-family: inherit;
  font-size: 18px;
  transition: 0.4s;
}

.control:focus {
  border-color: rgb(0 0 0 / 30%);
}

.card {
  width: 400px;
  padding: 60px 30px 38px;
  border-radius: 1.25rem;
  background: #ffffff;
  text-align: center;
}

.card > img {
  width: 240px;
  margin-bottom: 20px;
}

.card > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 30px;
}

.form {
  width: 100%;
  margin: 0;
  display: grid;
  gap: 16px;
}

.form input.control::placeholder {
  color: #aaa7bc;
}

.form > button.control {
  cursor: pointer;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: #1c98dd;
  color: #f9f9f9;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.375s;
}

.password {
  position: relative;
}

.toggle {
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
  width: 30px;
  height: 30px;
  background-image: url("show.png");
  background-size: 85%;
  background-position: center;
  background-repeat: no-repeat;
}

.toggle.showing {
  background-image: url("hide.png");
}

JavaScript FILE

const setCaret = (el) => {
  if (!el) return;

  try {
    const range = document.createRange();
    const sel = window.getSelection();

    range.setStart(el.childNodes[0], el.innerText.length);
    range.collapse(true);

    sel.removeAllRanges();
    sel.addRange(range);
  } catch (err) {
    console.log("Error Setting Caret: ", err);
  }
};

const togglePassword = (button) => {
  button.classList.toggle("showing");
  const input = document.getElementById("password");
  input.type = input.type === "password" ? "text" : "password";
  input.focus();
  setCaret(input);
};

Conclusion

In this post, I show you how to create a Sign-Up page with hide and show password functionality using HTML, CSS, and JavaScript.

If you are a beginner in coding and programming this project is best for you to learn lots of things. If you have any ideas to create other projects please comment down below I will make it as soon as possible.