Dovineowuor/index.html

## index.html
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Password Generater</title>
</head>

<body>

  <div class="body">
    <div id="content">
      <h1> Password Generator</h1>
      <div id="generator">
        <div class="box">
          <h2>Password Generater</h2>
          <input type="text" name="" placeholder="Your secure password" id="password" readonly="">

          <table>
            <tbody>
              <tr>
                <th>
                  <div id="button" class="btn1" onclick="genPassword()">Generate</div>
                </th>
                <th><a id="button" class="btn2" onclick="copyPassword()">Copy</a></th>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
</body>
</htlm>

## password-generator.markdown

      
    Raw
  

              password-generator.markdown
            
          
    Password Generator

A Pen by Dovineowuor on CodePen.
License.

  
## script.js
var password = document.getElementById("password");
function genPassword() {
  var chars =
    "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()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);
  document.execCommand("copy");
}

## style.css
* {
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
}

body {
  background-color: #f1f2e9;
  justify-content: center;
  align-items: center;
  display: flex;
  min-height: 100vh;
}

.box {
  background-color: white;
  padding-top: 30px;
  padding: 30px;
}
.box h2 {
  margin-bottom: 40px;
  text-align: center;
  font-size: 26px;
  color: #015a96;
  font-family: sans-serif;
}

input {
  padding: 20px;
  user-select: none;
  height: 50px;
  width: 400px;
  border-radius: 6px;
  border: none;
  border: 2px solid rgb(13, 152, 245);
  outline: none;
  font-size: 22px;
}
input::placeholder {
  font-family: sans-serif;
  display: flex;
  justify-content: space-between;
  align-text: center;
  font-size: small;
}

#button {
  font-family: sans-serif;
  font-size: 15px;

  margin-top: 40px;
  border: 2px solid rgb(20, 139, 250);
  width: 155px;
  height: 50px;
  text-align: center;
  background-color: #0c81ee;
  display: flex;
  color: rgb(255, 255, 255);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 7px;
}
.btn2 {
  margin-left: 85px;
}

#button:hover {
  color: white;
  background-color: lightgreen;
}
#placeholder {
  align: center;
  colour: #e9f0f2;
}
h1 {
  margin-bottom: 40px;
  text-align: center;
  font-size: 26px;
  color: #111212;
  font-family: sans-serif;
}
.content {
  border-style: dashed;
}
input{
    width:
}
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Password Generater</title>
	</head>

	<body>

	<div class="body">
	<div id="content">
	<h1> Password Generator</h1>
	<div id="generator">
	<div class="box">
	<h2>Password Generater</h2>
	<input type="text" name="" placeholder="Your secure password" id="password" readonly="">

	<table>
	<tbody>
	<tr>
	<th>
	<div id="button" class="btn1" onclick="genPassword()">Generate</div>
	</th>
	<th><a id="button" class="btn2" onclick="copyPassword()">Copy</a></th>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</body>
	</htlm>
	var password = document.getElementById("password");
	function genPassword() {
	var chars =
	"0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()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);
	document.execCommand("copy");
	}
	* {
	margin: 0;
	padding: 0;
	user-select: none;
	box-sizing: border-box;
	}

	body {
	background-color: #f1f2e9;
	justify-content: center;
	align-items: center;
	display: flex;
	min-height: 100vh;
	}

	.box {
	background-color: white;
	padding-top: 30px;
	padding: 30px;
	}
	.box h2 {
	margin-bottom: 40px;
	text-align: center;
	font-size: 26px;
	color: #015a96;
	font-family: sans-serif;
	}

	input {
	padding: 20px;
	user-select: none;
	height: 50px;
	width: 400px;
	border-radius: 6px;
	border: none;
	border: 2px solid rgb(13, 152, 245);
	outline: none;
	font-size: 22px;
	}
	input::placeholder {
	font-family: sans-serif;
	display: flex;
	justify-content: space-between;
	align-text: center;
	font-size: small;
	}

	#button {
	font-family: sans-serif;
	font-size: 15px;

	margin-top: 40px;
	border: 2px solid rgb(20, 139, 250);
	width: 155px;
	height: 50px;
	text-align: center;
	background-color: #0c81ee;
	display: flex;
	color: rgb(255, 255, 255);
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 7px;
	}
	.btn2 {
	margin-left: 85px;
	}

	#button:hover {
	color: white;
	background-color: lightgreen;
	}
	#placeholder {
	align: center;
	colour: #e9f0f2;
	}
	h1 {
	margin-bottom: 40px;
	text-align: center;
	font-size: 26px;
	color: #111212;
	font-family: sans-serif;
	}
	.content {
	border-style: dashed;
	}
	input{
	width:
	}