Added Password tool

LCSOGthb · web-flow · commit 846cabd95666 · 2025-09-14T02:11:52.000Z
diff --git a/index.html b/index.html
@@ -23,6 +23,11 @@ <h2>Calculator</h2>
       <p>Perform quick calculations.</p>
       <a href="tools/calculator.html" class="btn">Open</a>
     </div>
+    <div class="tool-card">
+      <h2>Password Generator</h2>
+      <p>Create strong and secure passwords.</p>
+      <a href="tools/password.html" class="btn">Open</a>
+     </div>
   </main>
 
   <footer>
diff --git a/tools/password.css b/tools/password.css
@@ -0,0 +1,31 @@
+.password-container {
+  max-width: 400px;
+  margin: 2rem auto;
+  background: white;
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.password-box {
+  margin-bottom: 1.2rem;
+}
+
+.password-box label {
+  display: block;
+  margin-bottom: 0.3rem;
+  font-weight: bold;
+}
+
+#result {
+  width: 70%;
+  padding: 0.6rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+}
+
+#copyBtn {
+  padding: 0.6rem 1rem;
+  margin-left: 0.5rem;
+}
diff --git a/tools/password.html b/tools/password.html
@@ -0,0 +1,41 @@
+<!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="../css/style.css">
+  <link rel="stylesheet" href="password.css">
+</head>
+<body>
+  <header>
+    <h1>Password Generator</h1>
+    <a href="../index.html" class="btn">← Back</a>
+  </header>
+
+  <main class="password-container">
+    <div class="password-box">
+      <label for="length">Length:</label>
+      <input type="number" id="length" value="12" min="4" max="50">
+    </div>
+
+    <div class="password-box">
+      <label><input type="checkbox" id="lowercase" checked> Lowercase (a-z)</label><br>
+      <label><input type="checkbox" id="uppercase" checked> Uppercase (A-Z)</label><br>
+      <label><input type="checkbox" id="numbers" checked> Numbers (0-9)</label><br>
+      <label><input type="checkbox" id="symbols"> Symbols (!@#$%)</label>
+    </div>
+
+    <div class="password-box">
+      <button id="generateBtn" class="btn">Generate</button>
+    </div>
+
+    <div class="password-box">
+      <input type="text" id="result" readonly>
+      <button id="copyBtn" class="btn">Copy</button>
+    </div>
+  </main>
+
+  <script src="password.js"></script>
+</body>
+</html>
diff --git a/tools/password.js b/tools/password.js
@@ -0,0 +1,43 @@
+const lengthInput = document.getElementById("length");
+const lowercaseCb = document.getElementById("lowercase");
+const uppercaseCb = document.getElementById("uppercase");
+const numbersCb = document.getElementById("numbers");
+const symbolsCb = document.getElementById("symbols");
+const resultField = document.getElementById("result");
+const generateBtn = document.getElementById("generateBtn");
+const copyBtn = document.getElementById("copyBtn");
+
+const lowercase = "abcdefghijklmnopqrstuvwxyz";
+const uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const numbers = "0123456789";
+const symbols = "!@#$%^&*()_+{}[]<>?/|";
+
+function generatePassword() {
+  let chars = "";
+  if (lowercaseCb.checked) chars += lowercase;
+  if (uppercaseCb.checked) chars += uppercase;
+  if (numbersCb.checked) chars += numbers;
+  if (symbolsCb.checked) chars += symbols;
+
+  const length = parseInt(lengthInput.value);
+  if (!chars) {
+    resultField.value = "Select at least one option!";
+    return;
+  }
+
+  let password = "";
+  for (let i = 0; i < length; i++) {
+    const rand = Math.floor(Math.random() * chars.length);
+    password += chars[rand];
+  }
+  resultField.value = password;
+}
+
+generateBtn.addEventListener("click", generatePassword);
+
+copyBtn.addEventListener("click", () => {
+  if (resultField.value) {
+    navigator.clipboard.writeText(resultField.value);
+    alert("Password copied!");
+  }
+});
