JavaScript Password Generator

Web Development

05 June, 2023

JavaScript Password Generator
Sagar Damjibhai Patel

Sagar Damjibhai Patel

CDO, Softices

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.

javascript password Generator

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">

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>

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.


Ways You Can Manage Your Perfectionism

Previous

5 Ways You Can Manage Your Perfectionism

Next

7 Productivity Improvement Tips and Strategies for Success

productivity improvement tips and strategies