In this post we are going to make a password generator in javascript
Install uuid
npm i uuid
Create a file named index.html, style.css, index.js.
index.html full source code:
<!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 Genenrator</title>
</head>
<body>
<h1>Password Generator</h1>
<input
type="text"
id="keyword"
placeholder="Enter a keyword"
maxlength="30"
/>
<button id="generate">Generate Password</button>
<h3 id="password">
When you enter a keyword and click the button the password will be
generated here
</h3>
<script src="index.js"></script>
</body>
</html>
style.css full source code:
* {
padding: 0px;
margin: 0px;
}
h1 {
text-align: center;
color: blueviolet;
font-family: cursive;
}
#keyword {
width: 1000px;
height: 35px;
text-align: center;
border: 3px solid #111;
font-family: 'Courier New', Courier, monospace;
background-color: #333;
border-radius: 10px;
color: white;
margin-left: 150px;
margin-top: 5px;
}
#generate {
margin-top: 20px;
display: block;
margin-left: 580px;
border: none;
background: none;
font-size: 20px;
cursor: pointer;
}
#password {
/*margin-left: 0px;
margin-right: 0px;*/
margin-top: 50px;
text-align: center;
padding: 20px;
color: #333;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: medium;
background-color: #f2f2f2;
}
index.js full source code:
import { v4 as uuidV4 } from 'uuid';
import './style.css';
const keyword = document.getElementById('keyword');
const generate = document.getElementById('generate');
const password = document.getElementById('password');
generate.addEventListener('click', function () {
if (keyword.value == '') {
password.innerText = 'Keyword is needed';
} else {
const text = `${keyword.value}`;
const modifiedText = text.replace(' ', '-');
password.innerText = modifiedText + '-' + uuidV4();
}
});
document.addEventListener('dblclick', function () {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else if (document.exitFullscreen) {
document.exitFullscreen();
}
});
Live demo: https://passwordgeneratorrishikesh.stackblitz.io/
source code: https://stackblitz.com/edit/passwordgeneratorrishikesh
Thank you!!!
Top comments (0)