Password Generator JavaScript – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Mon, 14 Nov 2022 07:37:21 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Random Password Generator in HTML CSS & JavaScript https://www.codingnepalweb.com/random-password-generator-html-javascript/ https://www.codingnepalweb.com/random-password-generator-html-javascript/#comments Tue, 11 Oct 2022 10:42:37 +0000 https://www.codingnepalweb.com/?p=2971 Random Password Generator in HTML CSS & JavaScript Password Generator in JavaScript

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.

You may like this:

Password Generator in JavaScript [Source Codes]

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

  1. Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder.
  2. Create a index.html file. File name must be index and its extension .html
  3. Create a style.css file. File name must be style and its extension .css
  4. 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.

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Password Generator JavaScript | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Google Icon Link for Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <h2>Password Generator</h2>
      <div class="wrapper">
        <div class="input-box">
          <input type="text" disabled>
          <span class="material-symbols-rounded">copy_all</span>
        </div>
        <div class="pass-indicator"></div>
        <div class="pass-length">
          <div class="details">
            <label class="title">Password Length</label>
            <span></span>
          </div>
          <input type="range" min="1" max="30" value="15" step="1">
        </div>
        <div class="pass-settings">
          <label class="title">Password Settings</label>
          <ul class="options">
            <li class="option">
              <input type="checkbox" id="lowercase" checked>
              <label for="lowercase">Lowercase (a-z)</label>
            </li>
            <li class="option">
              <input type="checkbox" id="uppercase">
              <label for="uppercase">Uppercase (A-Z)</label>
            </li>
            <li class="option">
              <input type="checkbox" id="numbers">
              <label for="numbers">Numbers (0-9)</label>
            </li>
            <li class="option">
              <input type="checkbox" id="symbols">
              <label for="symbols">Symbols (!-$^+)</label>
            </li>
            <li class="option">
              <input type="checkbox" id="exc-duplicate">
              <label for="exc-duplicate">Exclude Duplicate</label>
            </li>
            <li class="option">
              <input type="checkbox" id="spaces">
              <label for="spaces">Include Spaces</label>
            </li>
          </ul>
        </div>
        <button class="generate-btn">Generate Password</button>
      </div>
    </div>
    
  </body>
</html>

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.

 

]]> https://www.codingnepalweb.com/random-password-generator-html-javascript/feed/ 3 Random Password Generator App in HTML CSS & JavaScript https://www.codingnepalweb.com/random-password-generator-javascript/ https://www.codingnepalweb.com/random-password-generator-javascript/#comments Thu, 25 Jun 2020 07:19:00 +0000 https://codingnepalweb.com/2020/06/25/random-password-generator-app-in-html-css-javascript/ Random Password Generator App in HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Random Password Generator App using HTML CSS & JavaScript. Earlier I have shared a blog on how to check Email Validation using JavaScript. Now it’s time to create Random Password Generator.

Random Password Generator is a program that automatically generates a password randomly. Those generated passwords are mix with numbers, alphabets, and punctuations. This type of program helps the user to create a strong password.

Today in this program, I’ll share with you this program (Random Password Generator). In this program, there is a container with an input field, a copy icon, and a button. When you click on the generate password button each time this program automatically generated a random password and, there is shown a copy button that copies that generated password when you click on that button.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Random Password Generator).

Video Tutorial of Random Password Generator App

 
As you have seen, the Random Password Generator Program in the video. This program generates a random password with the help of JavaScript Math.random() random function. Without JavaScript, this program won’t generate a random password. And therein video, you have also seen, the copy button which copies generated password. It is possible with the JavaScript document.execCommand(“copy”).

If you like this program (Random Password Generator) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You might like this:

To create this program (Random Password Generator). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Random Password Generator | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="container">
         <div class="text">
            Random Password Generator <br>in HTML CSS & JavaScript
         </div>
         <div class="input-data">
            <div class="display">
               <input type="text">
               <span class="far fa-copy" onclick="copy()"></span>
               <span class="fas fa-copy" onclick="copy()"></span>
            </div>
            <button>Generate Password</button>
         </div>
      </div>
      <script>
         const display = document.querySelector("input"),
         button = document.querySelector("button"),
         copyBtn = document.querySelector("span.far"),
         copyActive = document.querySelector("span.fas");
         let chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-=";
         button.onclick = ()=>{
           let i,
           randomPassword = "";
           copyBtn.style.display = "block";
           copyActive.style.display = "none";
           for (i = 0; i < 16; i++) {
             randomPassword = randomPassword + chars.charAt(
               Math.floor(Math.random() * chars.length)
             );
           }
           display.value = randomPassword;
         }
         function copy(){
           copyBtn.style.display = "none";
           copyActive.style.display = "block";
           display.select();
           document.execCommand("copy");
         }
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
  text-align: center;
}
.container{
  width: 450px;
  background: #111;
  border: 1px solid #444;
  border-radius: 5px;
  padding: 20px 25px;
}
.container .text{
  color: #ccc;
  font-weight: 600;
  font-size: 26px;
  line-height: 35px;
}
.container .input-data{
  margin: 20px 5px 15px 5px;
}
.input-data .display{
  height: 45px;
  width: 100%;
  display: flex;
  position: relative;
}
.input-data .display input{
  height: 100%;
  width: 100%;
  outline: none;
  color: #eee;
  border: 1px solid #333;
  background: #222;
  padding: 10px;
  font-size: 17px;
  pointer-events: none;
  user-select: none;
}
.input-data .display span{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  color: grey;
  z-index: 999;
  display: none;
  cursor: pointer;
}
.input-data button{
  display: block;
  height: 45px;
  width: 100%;
  margin-top: 15px;
  border: 1px solid #444;
  outline: none;
  background: #1b1b1b;
  color: #999;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.input-data button:hover{
  background: #222;
}

That’s all, now you’ve successfully created a Random Password Generator App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/random-password-generator-javascript/feed/ 7