Password generator

September 28, 2023

Password generator

History

Password length :

a-z A-Z 0-9 Symbols

CODE

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body><br>
      <header>Password Generator</header><br>
      <div class="main-section">
        <textarea id="history_area" readonly>History</textarea>
        <div class="password_ce"><input type="text" id="password"><button id="copy-btn" onclick="copyText()">Copy password</button></div>
        <input id="submit-btn" type="submit" onclick="gen()" value="Generate password"> 
        <div id="password_length">  
          <label for="myRange">Password length : </label><span id="value"></span>
          <input type="range" id="myRange" name="myRange" min="4" max="25">
        </div> 
        <div class="checkbox">
          <label for="smallaz">
            <input type="checkbox" name="option" id="smallaz" checked required>a-z 
          </label>
          <label for="capitalAZ">
            <input type="checkbox" name="option" id="capitalAZ" checked>A-Z
          </label>
          <label for="num">
            <input type="checkbox" name="option" id="num" checked>0-9
          </label>
          <label for="symbol">  
            <input type="checkbox" name="option" id="symbol" checked>Symbols<br>
          </label>
        </div>
      </div>
    
        <script>
     
    
          let history=[]
            const slider = document.getElementById("myRange");
            const output = document.getElementById("value");
            output.innerHTML = slider.value;
            slider.oninput = function() {
                output.innerHTML = this.value;
            }
            arr1 = [0,1,2,3]
            function generate_char(character){
                switch (character){
                  case 0:
                    const myArray = ['!', '@', '#', '$', '%', '&'];  
                    const randomElement = myArray[Math.floor(Math.random() * myArray.length)];  
                    return(randomElement);
                    break;
                  case 1:
                    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                    const randomLetter = alphabet[Math.floor(Math.random() * alphabet.length)];
                    return(randomLetter);
                    break;
                  case 2:
                    const small_alphabet = 'abcdefghijklmnopqrstuvw';
                    const randomsmallLetter = small_alphabet[Math.floor(Math.random() * small_alphabet.length)];
                    return(randomsmallLetter)
                    break;
                  case 3:
                    const randomNumber = Math.floor(Math.random() * 10);
                    return(randomNumber)
                    break;
                }
            }
            flag = 1
            function password_call(arr1, length){
              password = ''
              arr2 = []
              for(let i=0; i<length; i++){  
                if (arr1.length == 0){
                  arr1 = arr2
                  arr2 = []
                }
                character = arr1[Math.floor(Math.random()*arr1.length)]
                arr2.push(character);
                const index = arr1.indexOf(character);
                arr1.splice(index, 1);
                password = password + generate_char(character)
              } 
              history.push(password);
              for(let i=2; i<history.length;i++){ 
                document.getElementById('password').innerHTML = history[i];
              }
              document.getElementById("password").value = password;
              const myTextarea = document.querySelector('#history_area');
              let textareaValue = myTextarea.value;
              let lines = textareaValue.split('\n');
              lines[flag] = password; 
              flag++;
              textareaValue = lines.join('\n');
              myTextarea.value = textareaValue;
              scrollToBottom();
            }  
            function gen(){
                arr1=[];
                const checkbox_smallaz = document.getElementById('smallaz');
                const checkbox_capitalAZ = document.getElementById('capitalAZ');
                const checkbox_symbol = document.getElementById('symbol');
                const checkbox_num = document.getElementById('num');
                if (checkbox_smallaz.checked) {
                  arr1.push(2);
                } 
                if (checkbox_capitalAZ.checked) {
                  arr1.push(1);
                }
                if (checkbox_symbol.checked) {
                  arr1.push(0);
                }
                if (checkbox_num.checked) {
                  arr1.push(3);
                }
                if(arr1.length==0){  
                  checkbox_smallaz.checked = true;  
                  arr1.push(2); 
                }
                password_call(arr1, slider.value); 
            }  
    
            const myTextarea = document.querySelector('#history_area');
            function scrollToBottom() {
              myTextarea.scrollTop = myTextarea.scrollHeight;
            }
    
            function copyText() {
              var textElement = document.getElementById("password");
              document.getElementById("copy-btn").innerHTML="copied";
                 setTimeout(() => {
                document.getElementById("copy-btn").innerHTML = "Copy password";
              }, 1000);        
              var range = document.createRange();
              range.selectNodeContents(textElement); 
              window.getSelection().removeAllRanges();
              window.getSelection().addRange(range);
              document.execCommand("copy");
              window.getSelection().removeAllRanges();
            }
            document.addEventListener("keydown", function(event) {
              if (event.key === "Enter" || event.key === " ") {
                gen(); 
              }
            });  
         </script>
        <style>
          :root { 
            --dark-bg-color: #01050c;
            --dark-primary: #115288;
            --dark-secondary: #092c49;
            --dark-accent: #3798e6;
          }
          html{ 
            font-family: system-ui;
            color: white; 
          }
          #history_area{
            padding: 5px 10px;  
            outline: transparent; 
            resize: none; 
          }
          .password_ce{ 
                display: flex;
                justify-content: space-between; 
          }
          #password{
            outline: transparent; 
            color: white; 
          }
          body {
              background-color: var(--dark-bg-color);  
          }
          header{
              color: var(--dark-accent);  
          }
            #history_area{
              background-color: #0d151c;
              border-color: white;  
            }
            #password{
              background-color: var(--dark-primary);
              border: none; 
            }
            #copy-btn{
              background-color: var(--dark-secondary);
              border: none;
            }
            #copy-btn:hover{
              border: 1px solid var(--dark-primary);
            }
            #submit-btn{
              background-color: var(--dark-secondary); 
              border: none;
            }
            #submit-btn:hover{
              border: 1px solid var(--dark-primary); 
            }
            body{
              max-width: 20cm; 
              margin: 0 auto;  
            }
              label {  
                  margin-bottom: 10px;
                  width: 90%; 
              }
              header{ 
                text-align: center;
                font-size: 3em;
                margin-block: 22px; 
              } 
              .main-section{
                display: grid;
                margin: 0 auto;   
                width: 90%;  
              }
              #history_area {
                height: 200px;         
              }  
              #password{
                height: 1cm; 
                min-width: 50%;  
                width: 100%;    
                margin-right: 10px; 
                padding: 0 10px; 
              }
              #copy-btn{
                width: 34%;
                color: white; 
              }
              #submit-btn{ 
                height: 1cm;
                color: white;
              } 
              .checkbox{
                display: grid; 
                grid-template-columns: 1fr 1fr;   
              }
              #history_area, #password {
                font-size: 16px;
                color: white; 
              }
              #password_length input[type="range"] {
                width: 100%; 
                margin-bottom: 10px;
              }
              #password_length,
              .password_ce,
              #submit-btn {
                margin-top: 10px; 
              }
              #history_area, #password, #copy-btn, #submit-btn{ 
              border-radius: 10px;  
            }
            @media (width < 700px){header{font-size: 2.5em;}}
            @media (width < 550px){header{font-size: 2em;}} 
            @media (width < 450px){header{font-size: 1.6em;}} 
            @media (width < 350px){header{font-size: 1.4em;}}  
        </style>
    </body>
    </html>

Search This Blog

Coderati

Password generator

Comments

Post a Comment

Popular Posts

Glowing Button