How to make a random password generator using javascript

#html #css #javascript #opensource

So today we are doing to build a random password generator using html css js so lets start

At first lets see the folder structure

PASSWORD GENERATOR MINI PROJECT USING HTML CSS & JAVASCRIPT
├───css
├───img
└───js

in the project root make an index.html file and make a css file in css folder and a js file in js folder and for copying the password we need an clipboard image download it

open project in the code editor

code .

import css and js in the index.html file

now lets start codding.Write the entire html

After it we want to code the css so lets start. copy the entire style.css from here

* {
  margin: 0;
  padding: 0;
  font-family: Consolas;
  user-select: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f8f8f8;
}

.inputBox {
  position: relative;
  width: 450px;
}

.inputBox h2 {
  font-size: 28px;
  color: #333333;
}

.inputBox input {
  position: relative;
  width: 100%;
  height: 60px;
  border: none;
  margin: 15px 0 20px;
  background: transparent;
  outline: none;
  padding: 0 20px;
  font-size: 24px;
  letter-spacing: 4px;
  box-sizing: border-box;
  border-radius: 4px;
  color: #333333;
  box-shadow: -4px -4px 10px rgba(255, 255, 255, 1),
    inset 4px 4px 10px rgba(0, 0, 0, 0.05),
    inset -4px -4px 10px rgba(255, 255, 255, 1),
    4px 4px 10px rgba(0, 0, 0, 0.05);
}

.inputBox input::placeholder {
  letter-spacing: 0px;
}

.inputBox #btn {
  position: relative;
  cursor: pointer;
  color: #fff;
  background-color: #333333;
  font-size: 24px;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 8px;
}

.inputBox #btn:active {
  background-color: #9c27b0;
}

.copy {
  position: absolute;
  top: 58px;
  right: 15px;
  cursor: pointer;
  opacity: 0.2;
  width: 40px;
  height: 40px;
}

.copy:hover {
  opacity: 1;
}

.alertbox {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: #9c27b0;
  color: #fff;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 4em;
  display: none;
}

.alertbox.active {
  display: flex;
  justify-content: center;
  align-content: center;
}

now lets write the js file open it and start put the js code in

so now we have completed the project. the full code is on github .please follow me on github if you want and thanks for reading good bye...
github: get the code here

Top comments (5)

Thomas Werner • Jan 28 '21 • Edited

Nice tutorial!

I have a small but important suggestion: for generating truly random passwords or other security-related random tokens, it's safer to use Crypto.getRandomValues() instead of the regular Math.random().

From Mozilla's MDN page for Math.random():

Math.random() does not provide cryptographically secure random numbers. Do not use them for anything related to security. Use the Web Crypto API instead, and more precisely the window.crypto.getRandomValues() method.

Tezcatlipoca • Feb 1 '21

You should reread that MDN page that you linked to. Of course Crypto.getRandomValues is also pseudo-random. It's just better pseudo-random, with higher entropy, so it's safer (and more cpu-cycle-hungry).