Random Password Generator Using HTML, CSS and JavaScript

Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Random Password Generator" project using HTML, CSS & JavaScript. 

Preview 

In the above video, you’ve seen the preview of the "Random Password Generator" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS, and JavaScript code below. 

Random Password Generator [Source Code] 

To get the following HTML, CSS & JS code for the Random Password Generator project. You need to create three files one is an HTML file, the second one is a CSS file and another one is a JS file. After creating these three files then you can copy-paste the given codes on your document. 

Remember, you’ve to create a file with a .html extension for HTML code, a .css extension for CSS code, and .js for JavaScript code.

You can also download all source code files from the given download button.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Password Generator</title>
    <link rel="stylesheet" href="style.css">

    <!-- Font Awesome  -->
    <script src="https://kit.fontawesome.com/ebb335c6c8.js" crossorigin="anonymous"></script>
</head>

<body>
    <h1>Random Password Generator</h1>
    <div class="container">
        <div class="inputContainer">
            <input type="text" disabled>
            <i class="fa-solid fa-clipboard"></i>
        </div>
        <div class="rangeContainer">
            <input type="range" min="8" max="16">
            <span>8</span>
        </div>
        <button class="generateBtn">Generate</button>
    </div>

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

</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  background-color: #053a5f;
}

h1 {
  color: white;
  margin-bottom: 10px;
  word-spacing: 5px;
}

.container {
  width: 400px;
  padding: 50px;
  background-color: white;
  border-radius: 10px;
}

.inputContainer {
  position: relative;
}

.inputContainer input {
  width: 100%;
  height: 50px;
  font-size: 18px;
  padding: 0 30px;
  border: 1px solid #053a5f;
  border-radius: 10px;
  outline: none;
}

.inputContainer i {
  font-size: 24px;
  color: #053a5f;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.rangeContainer {
  margin: 30px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rangeContainer input {
  width: 90%;
  accent-color: #053a5f;
  cursor: pointer;
}

/* For Firefox */
.rangeContainer input::-moz-range-thumb {
  border: 3px solid #053a5f;
  outline: 4px solid #053a5f;
  outline-offset: 3px;
}

.rangeContainer input::-moz-range-track {
  height: 12px;
  border-radius: 50px;
  background: #053a5f;
}

/* For chrome, edge and safari */
.rangeContainer input::-webkit-slider-thumb {
  border: 3px solid #053a5f;
  outline: 4px solid #053a5f;
  outline-offset: 3px;
}

.rangeContainer span {
  font-weight: 600;
}

.generateBtn {
  font-size: 24px;
  width: 100%;
  height: 50px;
  color: white;
  background-color: #053a5f;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.generateBtn:active {
  transform: scale(0.95);
}
JavaScript
const inputEl = document.querySelector(".inputContainer input");
const copyEl = document.querySelector(".inputContainer i");
const rangeEl = document.querySelector(".rangeContainer input");
const spanEl = document.querySelector(".rangeContainer span");
const generateBtnEl = document.querySelector(".generateBtn");

// All characters
var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var password = "";

// when we change the input range it automatically calls the generatePassword Function
rangeEl.addEventListener("input",()=>{
    spanEl.innerHTML = rangeEl.value
    generatePassword()
})

// Generates random password
function generatePassword(){
    value = rangeEl.value
    var password = "";
    for(var i=0; i<value; i++){
    var randomNumber = Math.floor(Math.random() * chars.length);
    password = password + chars[randomNumber];
    }
    inputEl.value = password;
    copyEl.classList.replace("fa-clipboard-check","fa-clipboard");
}

// Whenever we click on the generate button it call generatePassword function
generateBtnEl.addEventListener("click",()=>{
    generatePassword();
})

// if we click on the copy icon, the password will copy to our clipboard
copyEl.addEventListener("click",()=>{
    navigator.clipboard.writeText(inputEl.value)
    copyEl.classList.replace("fa-clipboard","fa-clipboard-check");
    setTimeout(() => {
    copyEl.classList.replace("fa-clipboard-check","fa-clipboard");
    }, 1500);
})

generatePassword();
You have to wait 15 seconds.

Generating Download Link...

Post a Comment

Previous Post Next Post