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