Password Generator

Posted on : 16th March 2023 | Author : @ByDev24


						<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<div class="code-container">
	<form method="post" id="genratePassword">
		<div class="mb-4">
			<h5>Select Password Type</h5>
			<hr>
			<div class="form-check form-check-inline">
			  <input class="form-check-input" type="radio" name="passwordType" id="AlphaNumeric" value="1" role="button" required="">
			  <label class="form-check-label" for="AlphaNumeric" role="button">AlphaNumeric</label>
			</div>
			<div class="form-check form-check-inline">
			  <input class="form-check-input" type="radio" name="passwordType" id="Numeric" value="2" role="button" required="">
			  <label class="form-check-label" for="Numeric" role="button">Numeric</label>
			</div>
			<div class="form-check form-check-inline">
			  <input class="form-check-input" type="radio" name="passwordType" id="ALPHABET" value="3" role="button" required="">
			  <label class="form-check-label" for="ALPHABET" role="button">ALPHABET</label>
			</div>
			<div class="form-check form-check-inline">
			  <input class="form-check-input" type="radio" name="passwordType" id="alphabet" value="4" role="button" required="">
			  <label class="form-check-label" for="alphabet" role="button">alphabet</label>
			</div>
			<div class="form-check form-check-inline">
			  <input class="form-check-input" type="radio" name="passwordType" id="Symbol" value="5" role="button" required="">
			  <label class="form-check-label" for="Symbol" role="button">Symbol</label>
			</div>
			<div class="form-check form-check-inline">
			  <input class="form-check-input" type="radio" name="passwordType" id="AlphaNumericSymbol" value="6" role="button" required="">
			  <label class="form-check-label" for="AlphaNumericSymbol" role="button">AlphaNumericSymbol</label>
			</div>
		</div>
		<div class="mb-4">
			<h5>Enter Password Digit</h5>
			<hr>
			<input type="number" name="passwordLength" required="" min="6" max="50" class="form-control" placeholder="Enter password length">
		</div>
		<button type="submit" class="btn btn-primary mb-4">Genrate</button>
		<div>
			<h5>Output</h5>
			<hr>
			<div class="position-relative">
				<input type="text" readonly="" class="form-control pe-5" placeholder="Output will show here" id="output">
				<button type="button" class="position-absolute end-0 top-0 pt-1 copy-btn d-none" role="button" onclick="copyPassword()">
					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="30">
					  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"></path>
					</svg>
				</button>
			</div>
		</div>
	</form>
</div>


						@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
html{
	font-family: 'Poppins', sans-serif;
}
.code-container {
    width: 450px;
    max-width: 100%;
    padding: 15px;
    box-shadow: 0px 0px 10px #00000029;
    margin: 20px;
    border-radius: 10px;
}
.copy-btn {
    outline: none;
    background: transparent;
    border: none;
    box-shadow: none;
}


						//Password Generator function
const stringGenrator = (e) => {
	e.preventDefault()
	let passwordType = Number(e.target.passwordType.value)
	let passwordLength = Number(e.target.passwordLength.value)
	let ALPHA = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
	let alpha = 'abcdefghijklmnopqrstuvwxyz';
	let Num = '1234567890';
	let symbol = '~@#%^&amp;*()_-=+}{[]:?/*';
	let output = '';
	let characters = '';
	if(passwordType == 1){
		characters = ALPHA+alpha+Num
	}else if(passwordType == 2){
		characters = Num;
	}else if(passwordType == 3){
		characters = ALPHA;
	}else if(passwordType == 4){
		characters = alpha;
	}else if(passwordType == 5){
		characters = symbol
	}else if(passwordType == 6){
		characters = ALPHA+alpha+Num+symbol
	}else{
		characters = ALPHA+alpha+Num+symbol
	}
	const charactersLength = characters.length;
	let counter = 0;
	while (counter < passwordLength) {
	  output += characters.charAt(Math.floor(Math.random() * charactersLength));
	  counter += 1;
	}
	document.querySelector("#output").value = output
	document.querySelector(".copy-btn").classList.remove("d-none")
}

const form = document.getElementById("genratePassword");
form.addEventListener("submit", stringGenrator);

//Copy Passwprd
const copyPassword = () => {
  let output = document.querySelector("#output");
  output.select();
  output.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(output.value);
  alert("Copied the password: " + output.value);
}