Random Password Generator using HTML, CSS and JAVASCRIPT

HuXn-WebDev · HuXn-WebDev · commit b3d621c25f4d · 2022-09-01T23:54:16.000-07:00
diff --git a/67. Password Generator/app.js b/67. Password Generator/app.js
@@ -0,0 +1,24 @@
+const genBtn = document.querySelector(".btn1");
+const copyBtn = document.querySelector(".btn2");
+
+genBtn.addEventListener("click", () => genPassword());
+copyBtn.addEventListener("click", () => copyPassword());
+
+function genPassword() {
+  let chars =
+    "0123456789abcdefghijklmnopqristuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  passwordLength = 7;
+  password = "";
+
+  for (let i = 0; i <= passwordLength; i++) {
+    let randomNumber = Math.floor(Math.random() * chars.length);
+    password += chars.substring(randomNumber, randomNumber + 1);
+  }
+  document.getElementById("password").value = password;
+}
+
+function copyPassword() {
+  let copyText = document.getElementById("password");
+  copyText.select();
+  document.execCommand("copy");
+}
diff --git a/67. Password Generator/index.html b/67. Password Generator/index.html
@@ -0,0 +1,21 @@
+<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>Random Password Generator</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h2>Random Password Generator</h2>
+      <input type="text" placeholder="Create a Password" id="password" />
+      <div class="buttons">
+        <button class="btn1">Generate</button>
+        <button class="btn2">Copy</button>
+      </div>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/67. Password Generator/style.css b/67. Password Generator/style.css
@@ -0,0 +1,61 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+  font-family: sans-serif;
+}
+
+:root {
+  --main-color: rgb(7, 7, 55);
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: var(--main-color);
+}
+
+.container {
+  background: #fff;
+  padding: 30px;
+}
+
+.container h2 {
+  margin-bottom: 40px;
+  text-align: center;
+  font-size: 26px;
+  color: var(--main-color);
+}
+
+input {
+  padding: 20px;
+  user-select: none;
+  height: 50px;
+  width: 400px;
+  border: none;
+  outline: none;
+  border: 2px solid var(--main-color);
+  font-size: 20px;
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+button {
+  font-size: 15px;
+  margin-top: 40px;
+  border: 2px solid var(--main-color);
+  width: 155px;
+  height: 50px;
+  text-align: center;
+  background-color: var(--main-color);
+  color: white;
+  text-transform: uppercase;
+  cursor: pointer;
+}
