Password Generator Script for blogger Apple Point 2021
It’s time to forget “123456” and “qwertyui” and other weak passwords – a strong password generator is a tool that will make your life easier and safer. It’s a feature that is a must-have for an efficient password manager.
Related Article
<!DOCTYPE html>
<html>
<head>
<title>Password Generator V1</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Kanit:300,500,700'>
<style>
@charset "UTF-8";
body {
min-height: 100vh;
padding-top: 100px;
background: linear-gradient(20deg, #b2085a 0%, #52149e 51%, #089bd1 95%);
font-family: "Kanit", sans-serif;
font-weight: 300;
}
.instructions {
font-size: 0.9rem;
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
margin: 0;
}
.title-wrapper {
background: #af5095;
padding: 2px 10px;
color: white;
}
h1 {
font-size: 1.1rem;
}
.inner-wrapper {
padding: 20px;
}
.wrapper {
overflow: hidden;
margin: auto;
width: 90%;
max-width: 380px;
background: white;
border-radius: 5px;
box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.4);
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-flow: column wrap;
}
.wrapper .password-wrapper {
position: relative;
border: 2px solid lightgray;
color: gray;
padding: 2px 2px 2px 8px;
border-radius: 5px;
text-align: left;
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.wrapper .password-wrapper .alert {
position: absolute;
padding: 0 5px;
border-radius: 2px;
width: 21ch;
height: 89%;
left: 2px;
top: -100%;
width: 96%;
text-align: center;
color: #333;
opacity: 0;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.wrapper .password-wrapper .alert.success {
background: rgba(88, 216, 191, 0.9);
opacity: 1;
}
.wrapper .password-wrapper .alert.fail {
background: rgba(188, 90, 118, 0.9);
color: white;
opacity: 1;
}
.wrapper .password-wrapper .copy {
height: 100%;
width: 50px;
background: #af5095;
border: 0;
color: white;
border-radius: 2px;
padding: 8px;
cursor: pointer;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.wrapper .password-wrapper .copy:hover {
background: #b762a0;
}
.wrapper .controls {
text-align: left;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-flow: column wrap;
}
.wrapper .controls .control {
padding: 3px;
border-bottom: 1px solid lightgray;
width: 100%;
margin: 2px;
}
.wrapper .controls .generate {
width: 100%;
border: 0;
color: white;
background: #af5095;
border-radius: 3px;
height: 25px;
margin-top: 10px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.wrapper .controls .generate:hover {
background: #b762a0;
}
#length-box {
width: 100%;
}
#length-box input {
width: 100%;
}
input[type="checkbox"] {
visibility: hidden;
}
label.check-label {
position: relative;
}
label.check-label:before {
content: "";
height: 1rem;
width: 1rem;
left: -24px;
top: 0;
border: 0.5px solid lightgray;
position: absolute;
background: transparent;
-webkit-transition: all 0.3s cubic-bezier(0, 0.82, 1, 1.81);
transition: all 0.3s cubic-bezier(0, 0.82, 1, 1.81);
}
input[type="checkbox"]:checked + label.check-label:before {
content: "?";
font-family: "FontAwesome";
font-size: 0.8rem;
color: #58d8bf;
text-align: center;
background: #d4f5ef;
-webkit-transition: all 0.3s cubic-bezier(0, 0.82, 1, 1.81);
transition: all 0.3s cubic-bezier(0, 0.82, 1, 1.81);
}
</style>
</head>
<h4 style="text-align:center;"><a href="https://applepoint021.blogspot.com/">Devlop By: Apple Point</a></h4>
<body>
<div class="wrapper">
<div class="title-wrapper">
<h1 class="title">Password Generator</h1>
</div>
<div class="inner-wrapper">
<div class="password-wrapper">
<div class="password-here" id="password-here">
----
</div>
<button id="copy" class="copy">Copy</button>
<div class="alert" id="alert"><span class="message" id="message"></div>
</div>
<p class="instructions">Select your options and click the "generate" button. Your passord will appear above.</p>
<div class="controls">
<div class="control length" id="length-box" >
<label for="length">Password Length</label>
<input type="range" id='length' min="4" max="20"list="tickmarks">
<datalist id="tickmarks">
<option value="4" label="4">
<option value="5">
<option value="6">
<option value="7">
<option value="8">
<option value="9">
<option value="10">
<option value="11">
<option value="12" label="12">
<option value="13">
<option value="14">
<option value="15">
<option value="16">
<option value="17">
<option value="18">
<option value="19">
<option value="20">
</datalist>
</div>
<div class="control">
<input type="checkbox" id="lowercase">
<label class="check-label" for="lowercase"><span class="checkbox">Use lowercase letters</span></label>
</div>
<div class="control">
<input type="checkbox" id="uppercase">
<label class="check-label" for="uppercase"><span class="checkbox">Use uppercase letters</span></label>
</div>
<div class="control">
<input type="checkbox" id="numbers">
<label class="check-label" for="numbers"><span class="checkbox">Use numbers</span></label>
</div>
<div class="control">
<input type="checkbox" id="punctuation">
<label class="check-label" for="punctuation"><span class="checkbox">Use special characters</span></label>
</div>
<button class="generate" id="generate">Generate!</button>
</div>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js'></script>
<script>
var clipboard = new Clipboard('.copy');
var lowercase = "abcdefghijklmnopqrstuvwxyz",
uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
numbers = "0123456789",
punctuation = "!@#$%^&*()_+~`|}{[]:;?><,./-=",
lowercaseInput = document.getElementById("lowercase"),
uppercaseInput = document.getElementById("uppercase"),
punctuationInput = document.getElementById("punctuation"),
numbersInput = document.getElementById("numbers"),
lengthInput = document.getElementById("length"),
passwordFeild = document.getElementById("password-here"),
generateButton = document.getElementById("generate"),
copyButton = document.getElementById("copy"),
plength,
userPassword,
passwordCharSet;
function generate() {
userPassword = "";
passwordCharSet = "";
if (lowercaseInput.checked) {
passwordCharSet += lowercase;
}
if (uppercaseInput.checked) {
passwordCharSet += uppercase;
}
if (punctuationInput.checked) {
passwordCharSet += punctuation;
}
if (numbersInput.checked) {
passwordCharSet += numbers;
}
plength = Number(lengthInput.value);
for (let i = 0; i < plength; i++) {
userPassword += passwordCharSet.charAt(
Math.floor(Math.random() * passwordCharSet.length)
);
}
if (userPassword == "") {
let alertbox = document.getElementById('alert');
alertbox.innerHTML = "Please select an option before generating"
alertbox.classList.add('fail');
setTimeout(function(){
alertbox.classList.remove('fail');
}, 3000);
} else {
passwordFeild.innerHTML = userPassword;
}
copyButton.setAttribute("data-clipboard-text", userPassword)
}
generateButton.addEventListener("click", generate);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
let alertbox = document.getElementById('alert');
alertbox.innerHTML = "Copied!"
alertbox.classList.add('success');
setTimeout(function(){
alertbox.classList.remove('success');
}, 3000);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
let alertbox = document.getElementById('alert');
alertbox.innerHTML = "Try select the text to copy"
alertbox.classList.add('fail');
setTimeout(function(){
alertbox.classList.remove('fail');
}, 3000);
});
</script>
</body>
</html>
One amazing feature you would love is your:
Ability to decide the length of the password
Ability to select what your password should entail (e.g Only UpperCase Alphabets, alphabets, and symbols, e.t.c).
Responsive Design (Test)
Google Testing tool Validator
SEO Optimized
Ads Ready
And Much More...
Note: Not for Mobile view
0 Comments
Thanks For Watching