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

अनुशंसित

21 September 2024

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

27 November 2024

<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);

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

अनुशंसित

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

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

उद्धरण जनरेटर

HTML

CSS

JS

अनुशंसित

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

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

उद्धरण जनरेटर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS