Skip to main content

Create Random Password Generator Using HTML,CSS and JavaScript (Source Code)


Random Password Generator Tool for Blogger Website source script code 


How To Create A Powerful Password Generating Tool For Blogger?

So let's move into the main topic of How you can easily create a Powerful Password Generating Tool for your blogger website. 


Step-1: First log in to your Blogger account and go to the Dashboard.

Step-2: Now create a new page or post where you want to create password generating tool. 

Step-3:  Now copy the Random Password generating tool script from the below.





<!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" />
      <Style>
         *{
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         font-family: sans-serif;
         }
         body{
         max-width: 100vw;
         min-height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
         background: linear-gradient(to right bottom, #ffa585, #45c5d8);
         color: #fff;
         font-weight: 600;
         }
         .container{
         border: 0.5px solid #fff;
         border-radius: 10px;
         padding: 28px 32px;
         display: flex;
         flex-direction: column;
         background: transparent;
         box-shadow: 8px 8px 4px #909090, 8px 8px 0px #575757;
         }
         .container h1{
         font-size: 1.4rem;
         margin-block: 8px;
         }
         .inputBox{
         position: relative;
         }
         .inputBox span{
         position: absolute;
         top: 16px;
         right: 6px;
         color: black;
         font-size: 28px;
         cursor: pointer;
         z-index: 2;
         }
         .passBox{
         background-color: black ;
         border: none;
         outline: none;
         padding: 10px;
         width: 300px;
         border-radius: 4px;
         font-size: 20px;
         margin-block: 8px;
         text-overflow: ellipsis;
         }
         .row{
         display: flex;
         margin-block: 8px;
         }
         .row p, .row label{
         flex-basis: 100%;
         font-size: 18px;
         }
         .row input[type="checkbox"]{
         width: 20px;
         height: 20px;
         }
         .genBtn{
         border: none;
         outline: none;
         background-color: #2c619e;
         padding: 12px 24px;
         color: #fff;
         font-size: 18px;
         margin-block: 8px;
         font-weight: 700;
         cursor: pointer;
         border-radius: 4px;
         }
         .genBtn:hover{
         background-color: #0066ff;
         }
      </Style>
      <link
         href="https://fonts.googleapis.com/icon?family=Material+Icons"
         rel="stylesheet"
         />
      <title>Password Generator | JavaScript Project</title>
   </head>
   <body>
      <div class="container">
         <h1>Password Generator</h1>
         <div class="inputBox">
            <input type="text" class="passBox" id="passBox" disabled />
            <span class="material-icons" id="copyIcon">content_copy</span>
         </div>
         <input type="range" min="1" max="30" value="8" id="inputSlider" />
         <div class="row">
            <p>Password Length</p>
            <span id="sliderValue"></span>
         </div>
         <div class="row">
            <label for="lowercase">Include Lowercase Letters (a-z)</label>
            <input type="checkbox" name="lowercase" id="lowercase" checked/>
         </div>
         <div class="row">
            <label for="uppercase">Include Uppercase Letters (A-Z)</label>
            <input type="checkbox" name="uppercase" id="uppercase" checked/>
         </div>
         <div class="row">
            <label for="numbers">Include Numbers (0-9)</label>
            <input type="checkbox" name="numbers" id="numbers" checked/>
         </div>
         <div class="row">
            <label for="symbols">Include Symbols (@-*)</label>
            <input type="checkbox" name="symbols" id="symbols" checked/>
         </div>
         <button type="button" class="genBtn" id="genBtn">
         Generate Password
         </button>
      </div>
      <script>
         let inputSlider = document.getElementById("inputSlider");
         let sliderValue = document.getElementById("sliderValue");
         let passBox = document.getElementById("passBox");
         let lowercase = document.getElementById("lowercase");
         let uppercase = document.getElementById("uppercase");
         let numbers = document.getElementById("numbers");
         let symbols = document.getElementById("symbols");
         let genBtn = document.getElementById("genBtn");
         let copyIcon = document.getElementById("copyIcon");
         
         
         // Showing input slider value 
         sliderValue.textContent = inputSlider.value;
         inputSlider.addEventListener('input', ()=>{
         sliderValue.textContent = inputSlider.value;
         });
         
         genBtn.addEventListener('click', ()=>{
         passBox.value = generatePassword();
         })
         
         let lowerChars = "abcdefghijklmnopqrstuvwxyz";
         let upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
         let allNumbers = "0123456789";
         let allSymbols = "~!@#$%^&*"; 
         
         // Function to generate Password
         function generatePassword(){
         let genPassword = "";
         let allChars = "";
         
         allChars  += lowercase.checked ? lowerChars : "";
         allChars  += uppercase.checked ? upperChars : "";
         allChars  += numbers.checked ? allNumbers : "";
         allChars  += symbols.checked ? allSymbols : "";
         
         
         if(allChars == "" || allChars.length == 0){
             return genPassword;
         }
         
         
         let i = 1;
         while(i<=inputSlider.value){
             genPassword += allChars.charAt(Math.floor(Math.random() * allChars.length));
             i++;
         }
         
         return genPassword;
         }
         
         copyIcon.addEventListener('click', ()=>{
         if(passBox.value != "" || passBox.value.length >=1){
             navigator.clipboard.writeText(passBox.value);
             copyIcon.innerText = "check";
             copyIcon.title = "Password Copied";
         
             setTimeout(()=>{
                 copyIcon.innerHTML = "content_copy";
                 copyIcon.title = "";
             }, 3000)
         }
         });
      </script>
   </body>
</html>

Step-3: Now dubble click on HTML View and copied  random password generating HTML script by techmanishz.blogspot.com

Step-4: Now save the page or post and publish it.

You have successfully created this random password generating tool for your blogger website. 


Labels:

Comments

Post a Comment

Popular posts from this blog

Money Management Excel Sheet (binary Trading)

  Money Management: A Powerful Tool for Trading Success In the ever-evolving world of finance and trading, having effective money management tools at your disposal is essential. One such tool that has gained prominence in recent times is the "Masaniello Money Management" indicator. This indicator serves as a critical resource for managing your finances and optimizing your trading decisions. What is Money Management? Masaniello Money Management is a specialized tool designed to help traders handle their finances efficiently. It operates as an indicator, enabling traders to manage price values effectively and make informed decisions for their trades. This tool serves as a predictive element, providing insights into future price movements and aiding in the management of financial resources within the market. How Money Management Works This innovative tool primarily targets the binary options market, offering traders a robust mechanism for controlling their finances. Notably, it ...
Post a Comment
Read more

QR Code Generator (Tool)

Generate Warning! Please Enter Something... �- What Is a QR Code (Quick Response Code)? In this case, 'QR' means Quick Response plus Code. Smartphones can read this two-dimensional barcode. More than 4000 characters can be encoded in a two-dimensional barcode. Most often, it is used to create links or text. Here's a picture of a QR code for your convenience. If you want to scan a QR code, you'll need the Scanner App. As you can see, there are several alternatives accessible on the Play Store and the Apple store. If you're feeling lazy, here's a link to a QR Code Scanner App you may download. What Is a QR Code and How Do I Use It? The abbreviation 'QR' is an acronym for Quick Response plus Code. The barcode is a two-dimensional barcode that smartphones are able to read. Two-dimensional barcodes may be encoded with about 4000 characters. As a general rule, it is used to generate hyperlinks and write text, am...
Post a Comment
Read more

Age Calculator

Age Calculator Age Calculator Enter your birthdate below to find out your age: Birthdate: Calculate Age About This Tool This age calculator was created to help people determine their age quickly and easily. It uses JavaScript to calculate the age based on the birthdate entered, and displays the result in years, months, and days. Additionally, it calculates the date of the user's next birthday and displays the time remaining until that date. How to Use This Tool To use this age calculator, simply enter your birthdate in the form above and click "Calculate Age". The result will be displayed below the form, showing your age in years, months, and days. Additionally, the date of your next birthday and the time remaining until that date will be displayed in a separate box below the age result. An age calculator is a tool that allows you to calculate a person's age based on their date of bi...
Post a Comment
Read more