How to make a random password generator using javascript

How to make a random password generator using javascript:

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

from Tumblr https://generouspiratequeen.tumblr.com/post/641734554168786944

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s