JavaScript Password Generator

June 05, 2023

JavaScript is an efficient and performant high-level programming language. JavaScript has grown over time to become primarily a front-end language. Because JavaScript can perform server-side rendering, it is used to create full-stack applications.This work utilizes HTML, CSS, and JavaScript to create a password generation online application. This web application has been launched and can be accessed via this link.

Building Index.html and Styles.css Create a new file with the name 'index.html'. This file will contain the structure/frame of the page. Content of the index.html

<!DOCTYPE html>
    <html lang="en">
        <thead>
            <tmeta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Password Generator</title>
            <link rel="stylesheet" href="style.css" />
        </head>
        <body>
            <div class="box">
            <h2>Password Generator</h2>
            <input
                type="text"
                name=""
                placeholder="Create password"
                id="password"
                readonly
                required
            />
            <table>
                <th>
                <div id="button" class="btn1" onclick="genPassword()">Generate</div>
                </th>
                <th>
                <a id="button" class="btn2" onclick="copyPassword()"> Copy </a>
                </th>
            </table>
            </div>
            <script src="script.js"></script>
        </body>
    </html>

Furthermore, the heading texts and buttons must be properly arranged and styled. The styles.css file is used to accomplish this effect. The 'index.html' file is connected to styles.css with the following line:

<link rel="stylesheet" href="style.css">

This is the content of the styles.css file:

* {
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
}
body {
  background-color: rgb(79, 75, 75);
}
.box {
  background-color: rgb(176, 169, 169);
  padding: 40px;
  border-radius: 30px;
  box-shadow: 8px 5px 14px -1px rgb(94, 94, 94);
  -webkit-box-shadow: 8px 5px 14px -1px rgba(94, 94, 94);
  -moz-box-shadow: 8px 5px 14px -1px rgba(94, 94, 94);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
@media (min-width: 600px) and (max-width: 720px) {
  body {
    background-color: lightseagreen;
  }
  .box {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    padding: 20px;
  }
}
.box h2 {
  margin-bottom: 40px;
  text-align: center;
  font-size: 26px;
  color: black;
  font-family: Roboto;
}
input {
  padding: 20px;
  user-select: none;
  height: 50px;
  width: 400px;
  border-radius: 6px;
  border: none;
  border: 2px solid black;
  outline: none;
  font-size: 22px;
}
input::placeholder {
  font-size: 23px;
}
#button {
  font-family: sans-serif;
  font-size: 15px;
  margin-top: 40px;
  width: 155px;
  height: 50px;
  text-align: center;
  background-color: #14e5;
  display: flex;
  color: rgb(255, 255, 255);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 7px;
  transition: 300ms ease-in-out;
}
.btn2 {
  margin-left: 85px;
}
#button:hover {
  color: white;
  background-color: black;
}

Most importantly, buttons, header texts are arranged nicely like this: The HTML and CSS files were in charge of the web application's frame and design/look. To put it another way, HTML is like the foundation/structure of a home,whereas CSS is the painting/aesthetics of the web page. Javascript code is required to finish the application. The logic for the web application will be written in Javascript. Javascript functions, such as the built-in random function, will be utilised to create new passwords with each repetition.In this project, a new variable named 'password' specified using the 'let' keyword will be used to specify the element for which logic will be defined. In the same folder;

index.html
style.css
script.js

here we have added script.js. Earlier, we added script.js to the index.html file.This is the snippet:

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

This is the code for the script.js:

let password = document.getElementById('password');
function genPassword() {
    var chars = '0123456789abcdefghakshSNUAI2425NYfijklmnopqrstuvwxyz!@#$%^&*()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, 999);
}

The directory 'jspassword' now contains three files namely; index.html,styles.css and script.js.