Merge pull request #339 from SuryaAbyss/patch-1

Create Password Generator
Evgenii-Bazhaov · Oct 31, 2024 · 2599349 · 2599349
2 parents a3e2b78 + 66e91c4
commit 2599349
Showing 1 changed file with 129 additions and 0 deletions.
diff --git a/Password Generator b/Password Generator
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Password Generator</title>
+    <link rel="stylesheet" href="test1.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Password Generator</h1>
+        <div class="password">
+            <input type="text" id="password" readonly> 
+            <button type="button" id="generate">Generate Password</button>
+        </div>
+        <div class="options">
+            <label for="length">Password Length</label>
+            <input type="number" id="length" value="8" min="8" max="64">
+            <label for="lowercase">Include lowercase</label>
+            <input type="checkbox" id="lowercase" checked>
+            <label for="uppercase">Include uppercase</label>
+            <input type="checkbox" id="uppercase" checked>
+            <label for="numbers">Include numbers</label>
+            <input type="checkbox" id="numbers" checked>
+            <label for="symbols">Include symbols</label>
+            <input type="checkbox" id="symbols">
+        </div>
+    </div>
+    <script src="test2.js"></script>
+</body>
+</html>
+
+
+#css 
+
+body{
+    background-color: aquamarine;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+.container{
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 25px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+    background-color: rgb(207, 169, 228);
+}
+
+h1{
+    text-align: center;
+    margin-top: 10px;
+}
+label{
+    display: flex; /*display flex alligned things serrially*/
+    align-items: center;
+    margin: 5px 2px;
+}
+label:hover{
+   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+   font-weight: bold;
+}
+#password{
+    margin-top: 25px;
+    font-size: 25px;
+    text-align: center;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: rgba(128, 128, 128, 0.623);
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+}
+#password:hover{
+    background-color: rgba(128, 128, 128, 0.97);
+}
+#generate{
+    margin: 20px;
+    background-color: rgb(230, 69, 69);
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 15px;
+    cursor: pointer;
+}
+#generate:hover{
+    background-color: white;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 15px;
+    color: red;
+    font-weight: bold;
+}
+
+#js
+const lowercaseletters = "abcdefghijklmnopqrstuvwxyz";
+const uppercaseletters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";  // Corrected from "ABCDEFGHIZKLMNOPQRSTUVWXYZ"
+const numbers = "0123456789";
+const symbols = "!#$%&'()*+,-./:;<=>?@[\]^_`{|}~";
+
+const lengthEl = document.getElementById("length");
+const lowercaseEl = document.getElementById("lowercase");
+const uppercaseEl = document.getElementById("uppercase");
+const numbersEl = document.getElementById("numbers");
+const symbolsEl = document.getElementById("symbols");
+const generateBtn = document.getElementById("generate");
+const passwordEl = document.getElementById("password");
+
+generateBtn.addEventListener("click", function() {
+    const length = lengthEl.value;
+    let characters = "";
+    let password = "";
+
+    if (lowercaseEl.checked) {
+        characters += lowercaseletters;
+    }
+    if (uppercaseEl.checked) {
+        characters += uppercaseletters;  // Corrected to include uppercase letters
+    }
+    if (numbersEl.checked) {
+        characters += numbers;
+    }
+    if (symbolsEl.checked) {
+        characters += symbols;
+    }
+    for (let i = 0; i < length; i++) {
+        password += characters.charAt(Math.floor(Math.random() * characters.length));
+    }
+    passwordEl.value = password;
+});
+