Welcome🎉 to amaos3 blog. In this blog, we will make a mystery expression generator application using javascript. This adventure guesses that you ought to have a crucial appreciation of HTML, CSS, and Vanilla javascript. Trust you participate in our blog so we ought to start with a key HTML structure for a mystery word generator javascript.
CONTENT:
How to Make Password Generator Using HTML CSS Javascript.
World Password Day :
Today 05/05/2022 is World Password Day To Make secure your account I Make Password Generator for you to Secure Your account.
HTML Code for Password Generator:
<!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">
<title>password Gen..</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="pw-container">
<div class="pw-header">
<div class="pw">
<span id="pw"> Password Here</span>
<button id="copy">Copy</button>
</div>
</div>
<div class="pw-body">
<div class="form-control">
<lable for="length">Password Length</lable>
<input id="len" value="10" type="number" min="8" max="30">
</div>
<div class="form-control">
<lable for="upper">Contain Uppercase Letters</lable>
<input id="upper" type="checkbox">
</div>
<div class="form-control">
<lable for="lower">Contain Lowercase Letters</lable>
<input id="lower" type="checkbox">
</div>
<div class="form-control">
<lable for="number">Contain Numbers </lable>
<input id="number" type="checkbox">
</div>
<div class="form-control">
<lable for="symbol">Contain Symbol</lable>
<input id="symbol" type="checkbox">
</div>
<button class="generate" id="generate">Generate Paaword</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>There is all HTML code for the secret key generator. We have made an essential format for the application and you can see the result of our HTML record underneath.
There is all HTML code for the password generator. We have created a basic layout for the app and you can see the output of our HTML document below. Output.
CSS for password generator
Next, we will style our app using CSS, to make it more appealing and interactive.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
*{
box-sizing: border-box;
}
body{
margin: 0;
font-family: "Poppins", sans-serif;
background-color: rebeccapurple;
color: #eee;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.pw-container{
width: 400px;
background-color: rgb(69, 17, 118);
box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}
.pw-header{
padding: 1rem;
}
.pw{
width: 100%;
height: 70px;
background-color: rebeccapurple;
display: flex;
align-items: center;
position: relative;
font-size: 1.5rem;
padding: 1rem;
/* overflow: auto; */
}
.pw button{
position: absolute;
top: 0;
right: 0;
transform: translate(0, 50%);
transition: opacity 0.2s ease, transform 0.2s ease;
opacity: 0;
background-color: rgb(35, 5, 66);
padding: 0.25rem 1rem;
font-family: inherit;
font-weight: bold;
color: #fff;
border: none;
cursor: pointer;
}
.pw:hover button{
opacity: 1;
transform: translate(0,-80%);
}
.pw-body{
padding: 0 1rem 1rem;
}
.form-control{
color: #eee;
display: flex;
justify-content: space-between;
margin: 0.75rem 0;
}
.generate{
display: block;
background-color: #ecb602;
color: rebeccapurple;
font-weight: bold;
padding: 1rem;
font-size: 1.5rem;
margin-top: 1rem;
border: none;
width: 100%;
cursor: pointer;
}OUTPUT:
Now add javascript for the password generator!
Javascript for password generator
const PwEl = document.getElementById("pw");
const copyEl = document.getElementById("copy");
const lenEl = document.getElementById("len");
const upperEl = document.getElementById("upper");
const lowerEl = document.getElementById("lower");
const symbolEl = document.getElementById("symbol");
const generateEl = document.getElementById("generate");
const numberEl = document.getElementById("number");
const upperLetters = "ABCDEFGHIJKLMNOPQSRTUVWXYZ";
const lowerLetters = "abcdefghijklmnopqrstuvwxyz";
const numbers = "0123456789";
const symbol = "~!@#$%^&*()_+=|";
function getLowercase() {
return lowerLetters[Math.floor(Math.random() * lowerLetters.length)];
}
function getUppercase() {
return upperLetters[Math.floor(Math.random() * upperLetters.length)];
}
function getNumber() {
return numbers[Math.floor(Math.random() * numbers.length)];
}
function getSymbol() {
return symbol[Math.floor(Math.random() * symbol.length)];
}
function generatePassword() {
const len = lenEl.value;
let password = "";
for (let i = 0; i < len; i++) {
const x = generateX();
password += x;
}
PwEl.innerText = password;
}
function generateX() {
const xs = [];
if (upperEl.checked) {
xs.push(getUppercase());
}
if (lowerEl.checked) {
xs.push(getLowercase());
}
if (numberEl.checked) {
xs.push(getNumber());
}
if (symbolEl.checked) {
xs.push(getSymbol());
}
if (xs.length === 0) return "";
return xs[Math.floor(Math.random() * xs.length)];
}
generateEl.addEventListener("click", generatePassword);
copyEl.addEventListener("click", () => {
const textarea = document.createElement("textarea");
const password = PwEl.innerText;
if (!password) {
return;
}
textarea.value = password;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
textarea.remove();
alert("password copied to clipboard");
}); Thanks For Reading
0 Comments