Building a Secure Password Generator Using JavaScript

Introduction

In today's digital age, securing your online accounts is more important than ever. One of the best ways to ensure strong security is by using complex, unique passwords for each of your accounts. In this blog post, I'll walk you through creating a simple yet effective password generator using HTML, CSS, and JavaScript. You can use this tool to generate secure passwords with just a click of a button.

HTML Structure

The HTML structure for our password generator is straightforward. It includes a header, a section to generate and display the password, and buttons to generate and copy the password. Here's the code:


<div class="header">
  <h1>SECURE PASSWORD GENERATOR (RANDOM)</h1>
</div>

<div class="row">
  <div class="side">
    <div class="box">
      <h2>Random Password Generator</h2>
      <input type="text" name="" placeholder="Create password" id="password" readonly>
      <table>
        <tr>
          <td><div id="button" class="btn1" onclick="genPassword()">Generate</div></td>
          <td><a id="button" class="btn2" onclick="copyPassword()">Copy</a></td>
        </tr>
      </table>
    </div>
  </div>
</div>

CSS Styling

To make our password generator visually appealing, we need to add some CSS styling. Here's an example of some basic styles you can use:


body {
    font-family: Arial, sans-serif;
}
.header {
    text-align: center;
    margin-top: 50px;
}
.box {
    background-color: #f2f2f2;
    padding: 20px;
    margin: 20px auto;
    width: 50%;
    text-align: center;
    border-radius: 5px;
}
input[type="text"] {
    width: 80%;
    padding: 10px;
    margin: 10px 0;
}
.btn1, .btn2 {
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    margin: 5px;
    text-decoration: none;
}
.btn1:hover, .btn2:hover {
    background-color: #45a049;
}

JavaScript Functionality

Now, let's add the JavaScript functionality to generate and copy the passwords. Here’s the code:


<script>
    var password = document.getElementById("password");
function genPassword() {
        var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var passwordLength = 12;
        var password = "";
        for (var i = 0; i <= passwordLength; i++) {
            var randomNumber = Math.floor(Math.random() * chars.length);
            password += chars.substring(randomNumber, randomNumber + 1);
        }
        document.getElementById("password").value = password;
    }

    function copyPassword() {
        var copyText = document.getElementById("password");
        copyText.select();
        copyText.setSelectionRange(0, 99999); // For mobile devices
        document.execCommand("copy");
        alert("Password copied to clipboard!");
    }
</script>

Testing the Password Generator

You can test the password generator right here! Simply click the "Generate" button to create a new password, and then click the "Copy" button to copy it to your clipboard.

Generate

Copy