पासवर्ड जनरेटर

अनुशंसित

23 April 2025

जावास्क्रिप्ट में क्यूआर कोड जनरेटर

HTML

<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> 
        <link rel="stylesheet" href="style.css">
        <title>Andev Web</title>
</head>

<body>
<div class="container">
  <div class="password-box">
     <h3 class="password">i3R&C=!Z(#BK</h3> 
     <div class="copy-btn">
        <i class="fa-regular fa-copy" id="copy-btn"></i>
        <span>Copied!</span>
     </div>
  </div>    
  <div class="checkboxes-box">
    <div class="uppercase">
      <input type="checkbox" name="" id="uppercase"> 
      <span>Uppercase</span>
    </div>  
    <div class="lowercase">
       <input type="checkbox" name="" id="" checked>
       <span>Lowercase</span>
    </div>  
    <div class="numbers">
            <input type="checkbox" name="" id="numbers">
            <span>Numbers</span>
    </div> 
    <div class="symbols">
            <input type="checkbox" name="" id="symbols">
            <span>Symbols</span>
    </div>    
  </div>
  <div class="password-length">
   <h3>Password Length</h3>  
   <input type="range" min="6" max="32" value="12" oninput="getPassLengthValue()">
   <div class="length-value">12</div>
  </div>
  <button class="generate-btn">Generate Password</button>
</div>
<script src="app.js"></script>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin:0;  
padding:0;
box-sizing:border-box;
}

body{
background:#7BDAF3;   
font-family: 'poppins', sans-serif;
}

.container{
padding:40px;   
width:380px;
background:#ffffff;
border-radius:7px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

.container .password-box{
height:45px;
width:100%;
border-radius:30px;
background:#FFFFFF;
border:1px solid grey;
padding:25px;
display:flex;
align-items:center;
}
.container .password-box h3{
font-size:14px;
color:grey;
font-weight:400;
}

.container .password-box .copy-btn{
position:absolute;  
right:63px;
color:grey;
font-size:17px;
cursor:pointer;
}

.container .checkboxes-box{
padding:1px; 
margin-top:15px;
}

.container .checkboxes-box .lowercase{
pointer-events:none;        
}

.container .checkboxes-box div{
height:35px;   
width:100%;
padding-left:35px;
display:flex;
align-items:center;
}

.container .checkboxes-box div span{
padding-left:20px;        
}

.container .checkboxes-box div input{
-webkit-appearance:none;   
height:18px;
width:18px;
border:1px solid grey;
border-radius:5px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

.container .checkboxes-box div input::before{
content:"\f00c";  
position:absolute;
font-family:FontAwesome;
color:white;
font-size:11px;
display:none;
}

.container .checkboxes-box div input:checked{
background:#38b3eb; 
border-color:#38b3eb;
}

.container .checkboxes-box div input:checked::before{
display:block;        
}

.container .password-length{
padding:2px; 
padding-left:35px;
}

.container .password-length h3{
font-size:15px;
color:grey;
font-weight:500;
margin-top:12px;
}

.container .password-length input{
-webkit-appearance:none;
height:3px;
width:70%;
background:lightgrey;
position:relative;
top:-3px;
cursor:pointer;
border-radius:3px;
}

.container .password-length input::-webkit-slider-thumb{
-webkit-appearance:none;
height:13px;
width:13px;
border-radius:100%;
background:#38b3eb; 
cursor:pointer;
}

.container .password-length .length-value{
height:30px;  
width:55px;
background:white;
display:flex;
align-items:center;
justify-content:center;
border-radius:3px;
border:1px solid grey;
position:absolute;
right:55px;
margin-top:-25px;
}

.container .generate-btn{
all:unset;
height:50px;
width:260px;
background:#38b3eb;
color:white;
border-radius:30px;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
margin-top:30px;
cursor:pointer;
}

.container .copy-btn span{
position:absolute;  
font-size:9px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display:none;
margin-left:-8px;
}

::selection{
background:rgb(100, 149, 237,0.8); 
color:white;
}

JS

let passLength = document.querySelector('.password-length input');
let options = document.querySelectorAll('.checkboxes-box div input');
let generateBtn = document.querySelector('.generate-btn');
let password = document.querySelector('.password');
let copyBtn = document.querySelector('#copy-btn');
let copiedMsg = document.querySelector('.container .copy-btn span');
let copiedIcon = document.querySelector('.container .copy-btn i');

let getPassLengthValue = () => {
        document.querySelector('.length-value').innerHTML = passLength.value;
}

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

let copyPassword = () => {
        navigator.clipboard.writeText(password.textContent);
        copiedIcon.style.display = 'none';
        copiedMsg.style.display = 'block';
        setTimeout(() => {
                copiedIcon.style.display = 'block';
                copiedMsg.style.display = 'none';
        }, 1000)
}

copyBtn.addEventListener('click', copyPassword);
generateBtn.addEventListener('click', getPassword);

पासवर्ड जनरेटर

अनुशंसित

SENAPI द्वारा पासवर्ड जनरेटर

पासवर्ड इनपुट लाइट

जावास्क्रिप्ट में क्यूआर कोड जनरेटर

HTML

CSS

JS

अनुशंसित

SENAPI द्वारा पासवर्ड जनरेटर

पासवर्ड इनपुट लाइट

जावास्क्रिप्ट में क्यूआर कोड जनरेटर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS