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

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

Word and character Counter

Word and Character Counter Word and Character Counter A word and character counter is a tool that counts the number of words and characters in a text or document. It is a useful tool for writers, editors, and students who need to keep track of the length of their writing and ensure that they are meeting specific word or character requirements. Here are the steps to use a word and character counter: 1. Copy and paste the text or document you want to count into the word and character counter tool. 2. The tool will automatically count the number of words and characters in the text. 3. Some word and character counters may also provide additional information, such as the number of sentences, paragraphs, or reading time. 4. Use the information provided by the word and character counter to adjust the length of your writing as needed. Why use a word and character counter? A word and character counter is a helpful tool for several ...
Post a Comment
Read more