<!DOCTYPE html>
<html lang="en">
<thead>
<tmeta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Password Generator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="box">
<h2>Password Generator</h2>
<input
type="text"
name=""
placeholder="Create password"
id="password"
readonly
required
/>
<table>
<th>
<div id="button" class="btn1" onclick="genPassword()">Generate</div>
</th>
<th>
<a id="button" class="btn2" onclick="copyPassword()"> Copy </a>
</th>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
<link rel="stylesheet" href="style.css">
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
}
body {
background-color: rgb(79, 75, 75);
}
.box {
background-color: rgb(176, 169, 169);
padding: 40px;
border-radius: 30px;
box-shadow: 8px 5px 14px -1px rgb(94, 94, 94);
-webkit-box-shadow: 8px 5px 14px -1px rgba(94, 94, 94);
-moz-box-shadow: 8px 5px 14px -1px rgba(94, 94, 94);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
@media (min-width: 600px) and (max-width: 720px) {
body {
background-color: lightseagreen;
}
.box {
height: 100vh;
width: 100%;
overflow: hidden;
padding: 20px;
}
}
.box h2 {
margin-bottom: 40px;
text-align: center;
font-size: 26px;
color: black;
font-family: Roboto;
}
input {
padding: 20px;
user-select: none;
height: 50px;
width: 400px;
border-radius: 6px;
border: none;
border: 2px solid black;
outline: none;
font-size: 22px;
}
input::placeholder {
font-size: 23px;
}
#button {
font-family: sans-serif;
font-size: 15px;
margin-top: 40px;
width: 155px;
height: 50px;
text-align: center;
background-color: #14e5;
display: flex;
color: rgb(255, 255, 255);
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 7px;
transition: 300ms ease-in-out;
}
.btn2 {
margin-left: 85px;
}
#button:hover {
color: white;
background-color: black;
}
<script src="script.js"></script>
let password = document.getElementById('password');
function genPassword() {
var chars = '0123456789abcdefghakshSNUAI2425NYfijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var passwordLength = 12;
var password = '';
for (var i = 0; i <= passwordLength; i++) {
var randomNumber = Math.floor(Math.random() * chars.length);
password += chars.substring(randomNumber, randomNumber + 1);
}
document.getElementById('password').value = password;
}
function copyPassword() {
var copyText = document.getElementById('password');
copyText.select();
copyText.setSelectionRange(0, 999);
}