Random Password Generator Tool for Blogger Website source script code
How To Create A Powerful Password Generating Tool For Blogger?
So let's move into the main topic of How you can easily create a Powerful Password Generating Tool for your blogger website.
Step-1: First log in to your Blogger account and go to the Dashboard.
Step-2: Now create a new page or post where you want to create password generating tool.
Step-3: Now copy the Random Password generating tool script from the below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<Style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
max-width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right bottom, #ffa585, #45c5d8);
color: #fff;
font-weight: 600;
}
.container{
border: 0.5px solid #fff;
border-radius: 10px;
padding: 28px 32px;
display: flex;
flex-direction: column;
background: transparent;
box-shadow: 8px 8px 4px #909090, 8px 8px 0px #575757;
}
.container h1{
font-size: 1.4rem;
margin-block: 8px;
}
.inputBox{
position: relative;
}
.inputBox span{
position: absolute;
top: 16px;
right: 6px;
color: black;
font-size: 28px;
cursor: pointer;
z-index: 2;
}
.passBox{
background-color: black ;
border: none;
outline: none;
padding: 10px;
width: 300px;
border-radius: 4px;
font-size: 20px;
margin-block: 8px;
text-overflow: ellipsis;
}
.row{
display: flex;
margin-block: 8px;
}
.row p, .row label{
flex-basis: 100%;
font-size: 18px;
}
.row input[type="checkbox"]{
width: 20px;
height: 20px;
}
.genBtn{
border: none;
outline: none;
background-color: #2c619e;
padding: 12px 24px;
color: #fff;
font-size: 18px;
margin-block: 8px;
font-weight: 700;
cursor: pointer;
border-radius: 4px;
}
.genBtn:hover{
background-color: #0066ff;
}
</Style>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<title>Password Generator | JavaScript Project</title>
</head>
<body>
<div class="container">
<h1>Password Generator</h1>
<div class="inputBox">
<input type="text" class="passBox" id="passBox" disabled />
<span class="material-icons" id="copyIcon">content_copy</span>
</div>
<input type="range" min="1" max="30" value="8" id="inputSlider" />
<div class="row">
<p>Password Length</p>
<span id="sliderValue"></span>
</div>
<div class="row">
<label for="lowercase">Include Lowercase Letters (a-z)</label>
<input type="checkbox" name="lowercase" id="lowercase" checked/>
</div>
<div class="row">
<label for="uppercase">Include Uppercase Letters (A-Z)</label>
<input type="checkbox" name="uppercase" id="uppercase" checked/>
</div>
<div class="row">
<label for="numbers">Include Numbers (0-9)</label>
<input type="checkbox" name="numbers" id="numbers" checked/>
</div>
<div class="row">
<label for="symbols">Include Symbols (@-*)</label>
<input type="checkbox" name="symbols" id="symbols" checked/>
</div>
<button type="button" class="genBtn" id="genBtn">
Generate Password
</button>
</div>
<script>
let inputSlider = document.getElementById("inputSlider");
let sliderValue = document.getElementById("sliderValue");
let passBox = document.getElementById("passBox");
let lowercase = document.getElementById("lowercase");
let uppercase = document.getElementById("uppercase");
let numbers = document.getElementById("numbers");
let symbols = document.getElementById("symbols");
let genBtn = document.getElementById("genBtn");
let copyIcon = document.getElementById("copyIcon");
// Showing input slider value
sliderValue.textContent = inputSlider.value;
inputSlider.addEventListener('input', ()=>{
sliderValue.textContent = inputSlider.value;
});
genBtn.addEventListener('click', ()=>{
passBox.value = generatePassword();
})
let lowerChars = "abcdefghijklmnopqrstuvwxyz";
let upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let allNumbers = "0123456789";
let allSymbols = "~!@#$%^&*";
// Function to generate Password
function generatePassword(){
let genPassword = "";
let allChars = "";
allChars += lowercase.checked ? lowerChars : "";
allChars += uppercase.checked ? upperChars : "";
allChars += numbers.checked ? allNumbers : "";
allChars += symbols.checked ? allSymbols : "";
if(allChars == "" || allChars.length == 0){
return genPassword;
}
let i = 1;
while(i<=inputSlider.value){
genPassword += allChars.charAt(Math.floor(Math.random() * allChars.length));
i++;
}
return genPassword;
}
copyIcon.addEventListener('click', ()=>{
if(passBox.value != "" || passBox.value.length >=1){
navigator.clipboard.writeText(passBox.value);
copyIcon.innerText = "check";
copyIcon.title = "Password Copied";
setTimeout(()=>{
copyIcon.innerHTML = "content_copy";
copyIcon.title = "";
}, 3000)
}
});
</script>
</body>
</html>
Step-3: Now dubble click on HTML View and copied random password generating HTML script by techmanishz.blogspot.com
Step-4: Now save the page or post and publish it.
You have successfully created this random password generating tool for your blogger website.
Comments
Post a Comment