Password Generator – CodingNepal

Random Password Generator in HTML CSS & JavaScript

CodingNepal — Thu, 03 Nov 2022 21:11:20 +0000

You may have generated random passwords using a website and wondered how to create a Random Password Generator like that using HTML CSS & JavaScript. Then, this blog is written for you.

Today in this blog, you will learn How to Create a Random Password Generator in HTML CSS & JavaScript step by step. Even if you have a basic knowledge of HTML CSS & JavaScript then
also you will be able to create a Random Password Generator after
reading this blog.

The Password Generator is the program that generates random passwords for the user as they want. Password generators can be in different UI designs with functions. For example, some Password generator generates weak passwords, some medium, and some strong, and along with the strengthening of the password, their character can be different which depends on the coding.

Take a look at the given image of our Random Password Generator. As you can see in the image there is a password field with a strong password. Strong passwords are those which has all the combination of the characters such as small, capital alphabet, numbers, and special with a decent length. As far as strength passwords are concerned, our program will also help us to create all types of passwords with custom lengths.

By the password field, there is a copy icon which obviously is for copying the password which is shown in the password field. Below the password field, there is a range slider that helps us to create the length of the password as we want and underneath the range slider, there is a button that is used to generate passwords.

To see the real demo of this random password generator as well as all the source codes that I have used to create this strong password generator, a full video tutorial is given below. Watching the given video tutorial will help you understand the codes that work behind this password generator.

Random Password Generator in HTML CSS & JavaScript

You would be wondering to get the source code, I have provided all the HTML CSS, and JavaScript code to create a random password generator. Before getting into the source code file, I would be delighted to explain this given video tutorial briefly.

As you have seen in the video tutorial on Random Password Generators. At first, there was our password generator with a password that was generated with the webpage. At first, we had a total of 16 length passwords and that was the maximum limit of the password that we can create.

I could easily copy that generated password with the copy icon which was available right side of that password. When I dragged the range slider the password automatically started to generate with the value of the password’s length. Also, I generated the password by clicking on the button.

I believe you can create this Random Password Generator using HTML CSS and JavaScript. If you are feeling difficulty building this password generator, I have provided all the source codes below.

Random Password Generator [Source Codes]

To create Random Password Generator, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Random Password Generator by clicking on the given download button.

First, paste the following codes into your index.html file.




  
    
    
    
   Password Generator JavaScript
    
    
    
   
  
  
    
      
        
        
      

      
        
        8

Second, paste the following codes into your style.css file.

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #927dfc;
}
.wrapper {
  position: relative;
  max-width: 300px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 30px 25px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper .password-box {
  position: relative;
  height: 50px;
}
.password-box input {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  padding: 0 45px 0 15px;
  border: 1px solid #aaa;
  background-color: transparent;
}
.password-box .copy-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  color: #707070;
  font-size: 20px;
  cursor: pointer;
  transform: translateY(-50%);
}
.copy-icon:hover {
  color: #826afb;
}
.wrapper .range-box {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.range-box input {
  width: 100%;
  height: 5px;
  accent-color: #826afb;
  cursor: pointer;
}
.range-box .slider-number {
  min-width: 30px;
  text-align: right;
  font-size: 17px;
  color: #707070;
}

.wrapper .generate-button {
  width: 100%;
  color: #fff;
  padding: 12px 0;
  margin-top: 20px;
  background: #927dfc;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.generate-button:hover {
  background-color: #826afb;
}

Third paste the following code in your script.js file

   const passwordInput = document.querySelector(".password-box input"),
  copyIcon = document.querySelector(".password-box .copy-icon"),
  rangeInput = document.querySelector(".range-box input"),
  sliderNumber = document.querySelector(".range-box .slider-number"),
  generateButton = document.querySelector(".generate-button");

//Characters of alphabet(a-z/A-Z), numbers(0-9) and Symbols($%&[]...)
let allCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789^!$%&|[](){}:;.,*+-#@<>~";

//this function will be called on, page reload, generateButton clicked & rangeInput slide
const generatePassword = () => {
  let newPassword = "";

  //for loop will run till rangeInput value
  for (let i = 0; i < rangeInput.value; i++) {
    let randomNumbers = Math.floor(Math.random() * allCharacters.length);
    newPassword += allCharacters[randomNumbers];
  }
  passwordInput.value = newPassword;
  copyIcon.classList.replace("uil-file-check-alt", "uil-copy"); //replace icon
};

rangeInput.addEventListener("input", () => {
  sliderNumber.innerText = rangeInput.value;
  generatePassword();
});

//copy passInput's value on copyIcon click
//copy passInput's value on copyIcon click
copyIcon.addEventListener("click", () => {
  navigator.clipboard.writeText(passwordInput.value);
  copyIcon.classList.replace("uil-copy", "uil-file-check-alt"); //replace icon
});

generatePassword();
generateButton.addEventListener("click", generatePassword);

If you face any difficulties while creating your Strong Password Generator or your code is not working as expected, you can download the source code files for this Random Password Generator for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

Random Password Generator in HTML CSS & JavaScript

CodingNepal — Tue, 11 Oct 2022 10:42:37 +0000

If you have some basic JavaScript knowledge and you’re looking for a beginner-friendly JavaScript project to improve your skills. In that case, you can create a Random Password Generator.

Hey friends, today in this blog, you’ll learn to create a Random Password Generator in HTML CSS & JavaScript. If you want more projects like this, you can view my 10 Best JavaScript Projects blog where I’ve listed different projects for beginners to intermediate developers.

If you don’t know, a password generator is a software or tool that creates random or customized passwords for users. These types of passwords contain different combinations of characters such as letters, numbers, symbols, etc.

In my Random Password Generator App, users can generate random passwords by customizing their preferred settings such as lowercase, uppercase, number, etc. There is also a password strength meter that indicates the strength of the user’s generated password. And last, user can copy their generated password to the clipboard.

If you are excited to know what this project looks like, you can view a live demo of it. But, if you want to see a full video tutorial of this Password Generator in JavaScript, you can watch the given YouTube video.

Video Tutorial of Password Generator in JavaScript

I hope you liked the demo of the password generator and watch the video tutorial till the end. If you didn’t watch the video, I suggest you watch it till the end because in the video, I’ve tried to explain each line of code by written comments and shown which line of code does what.

So, if you understand the logic and methods properly, it’ll help you to clear your confusion while recreating this password generator or using the codes of it in your other projects.

Remember, if you’re familiar with JavaScript functions, events listeners, arrays, and objects and have created some projects before then the codes of this random password generator won’t be difficult for you to understand. But if you find it difficult, before creating this project, you can create this Easy Random Password Generator.

If you want to get source codes or files of this password generator, you can easily copy or download them from the bottom of this blog post.

Password Generator in JavaScript [Source Codes]

To create a Random Password Generator using HTML CSS & JavaScript, follow the given steps line by line:

Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder.
Create a index.html file. File name must be index and its extension .html
Create a style.css file. File name must be style and its extension .css
Create a script.js file. File name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Password Generator by clicking on the given download button. It’s free of cost.

First, paste the following codes into your index.html file.




  
    
    Password Generator JavaScript | CodingNepal
    
    
    
    
    
  
  
    
      Password Generator
      
        
          
          copy_all
        
        
        
          
            Password Length
            
          
          
        
        
          Password Settings
          
            
              
              Lowercase (a-z)
            
            
              
              Uppercase (A-Z)
            
            
              
              Numbers (0-9)
            
            
              
              Symbols (!-$^+)
            
            
              
              Exclude Duplicate
            
            
              
              Include Spaces

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #4285F4;
}
.container{
  width: 450px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.container h2{
  font-weight: 600;
  font-size: 1.31rem;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid #d4dbe5;
}
.wrapper{
  margin: 1.25rem 1.75rem;
}
.wrapper .input-box{
  position: relative;
}
.input-box input{
  width: 100%;
  height: 53px;
  color: #000;
  background: none;
  font-size: 1.06rem;
  font-weight: 500;
  border-radius: 4px;
  letter-spacing: 1.4px;
  border: 1px solid #aaa;
  padding: 0 2.85rem 0 1rem;
}
.input-box span{
  position: absolute;
  right: 13px;
  cursor: pointer;
  line-height: 53px;
  color: #707070;
}
.input-box span:hover{
  color: #4285F4!important;
}
.wrapper .pass-indicator{
  width: 100%;
  height: 4px;
  position: relative;
  background: #dfdfdf;
  margin-top: 0.75rem;
  border-radius: 25px;
}
.pass-indicator::before{
  position: absolute;
  content: "";
  height: 100%;
  width: 50%;
  border-radius: inherit;
  transition: width 0.3s ease;
}
.pass-indicator#weak::before{
  width: 20%;
  background: #E64A4A;
}
.pass-indicator#medium::before{
  width: 50%;
  background: #f1c80b;
}
.pass-indicator#strong::before{
  width: 100%;
  background: #4285F4;
}
.wrapper .pass-length{
  margin: 1.56rem 0 1.25rem;
}
.pass-length .details{
  display: flex;
  justify-content: space-between;
}
.pass-length input{
  width: 100%;
  height: 5px;
}
.pass-settings .options{
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.pass-settings .options .option{
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  width: calc(100% / 2);
}
.options .option:first-child{
  pointer-events: none;
}
.options .option:first-child input{
  opacity: 0.7;
}
.options .option input{
  height: 16px;
  width: 16px;
  cursor: pointer;
}
.options .option label{
  cursor: pointer;
  color: #4f4f4f;
  padding-left: 0.63rem;
}
.wrapper .generate-btn{
  width: 100%;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  background: #4285F4;
  font-size: 1.06rem;
  padding: 0.94rem 0;
  border-radius: 5px;
  text-transform: uppercase;
  margin: 0.94rem 0 1.3rem;
}

Last, paste the following codes into your script.js file.

const lengthSlider = document.querySelector(".pass-length input"),
options = document.querySelectorAll(".option input"),
copyIcon = document.querySelector(".input-box span"),
passwordInput = document.querySelector(".input-box input"),
passIndicator = document.querySelector(".pass-indicator"),
generateBtn = document.querySelector(".generate-btn");

const characters = { // object of letters, numbers & symbols
    lowercase: "abcdefghijklmnopqrstuvwxyz",
    uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    numbers: "0123456789",
    symbols: "^!$%&|[](){}:;.,*+-#@<>~"
}

const generatePassword = () => {
    let staticPassword = "",
    randomPassword = "",
    excludeDuplicate = false,
    passLength = lengthSlider.value;

    options.forEach(option => { // looping through each option's checkbox
        if(option.checked) { // if checkbox is checked
            // if checkbox id isn't exc-duplicate && spaces
            if(option.id !== "exc-duplicate" && option.id !== "spaces") {
                // adding particular key value from character object to staticPassword
                staticPassword += characters[option.id];
            } else if(option.id === "spaces") { // if checkbox id is spaces
                staticPassword += `  ${staticPassword}  `; // adding space at the beginning & end of staticPassword
            } else { // else pass true value to excludeDuplicate
                excludeDuplicate = true;
            }
        }
    });

    for (let i = 0; i < passLength; i++) {
        // getting random character from the static password
        let randomChar = staticPassword[Math.floor(Math.random() * staticPassword.length)];
        if(excludeDuplicate) { // if excludeDuplicate is true
            // if randomPassword doesn't contains the current random character or randomChar is equal 
            // to space " " then add random character to randomPassword else decrement i by -1
            !randomPassword.includes(randomChar) || randomChar == " " ? randomPassword += randomChar : i--;
        } else { // else add random character to randomPassword
            randomPassword += randomChar;
        }
    }
    passwordInput.value = randomPassword; // passing randomPassword to passwordInput value
}

const upadatePassIndicator = () => {
    // if lengthSlider value is less than 8 then pass "weak" as passIndicator id else if lengthSlider 
    // value is less than 16 then pass "medium" as id else pass "strong" as id
    passIndicator.id = lengthSlider.value <= 8 ? "weak" : lengthSlider.value <= 16 ? "medium" : "strong";
}

const updateSlider = () => {
    // passing slider value as counter text
    document.querySelector(".pass-length span").innerText = lengthSlider.value;
    generatePassword();
    upadatePassIndicator();
}
updateSlider();

const copyPassword = () => {
    navigator.clipboard.writeText(passwordInput.value); // copying random password
    copyIcon.innerText = "check"; // changing copy icon to tick
    copyIcon.style.color = "#4285F4";
    setTimeout(() => { // after 1500 ms, changing tick icon back to copy
        copyIcon.innerText = "copy_all";
        copyIcon.style.color = "#707070";
    }, 1500);
}

copyIcon.addEventListener("click", copyPassword);
lengthSlider.addEventListener("input", updateSlider);
generateBtn.addEventListener("click", generatePassword);

That’s all, now you’ve successfully created a Random Password Generator in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file will be downloaded that contains the project folder with source code files.

Password Generator – CodingNepal

Random Password Generator in HTML CSS & JavaScript

Random Password Generator in HTML CSS & JavaScript

You May Like This:

Random Password Generator [Source Codes]

Random Password Generator in HTML CSS & JavaScript

Video Tutorial of Password Generator in JavaScript

You may like this:

Password Generator in JavaScript [Source Codes]

Password Generator