dhairyagothi · dhairyagothi · Jun 17, 2024 · Jun 17, 2024
diff --git a/public/index.html b/public/index.html
@@ -42,6 +42,7 @@
         <div class="table">DAY-27.] MemoryGame <a href="./MemoryGame/index.html">DEMO</a></div>
         <div class="table">DAY-28.] WORDLE <a href="./WORDLE/index.html">DEMO</a></div>
         <div class="table">DAY-29.] SNAKE GAME <a href="./snake_game/index.html">DEMO</a></div>
+        <div class="table">DAY-31] Password Manager <a href="password manager/index.html">DEMO</a></div>
     </div>
 
     <script>

diff --git a/public/password manager/copy.svg b/public/password manager/copy.svg
diff --git a/public/password manager/index.html b/public/password manager/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PassX-Personal Password Manager</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <nav>
+        <div class="logo">PassX</div>
+        <ul>
+            <li>Home</li>
+            <li>About</li>
+            <li>Contact</li>
+
+
+        </ul>
+    </nav>
+    <div class="container">
+        <h1>Password Manager</h1>
+        <p>We're thrilled to have you here, and we're committed to making your online security a top priority. Your
+            digital world is full of passwords and sensitive information, and we're here to help you keep it safe and
+            organized.</p>
+        <h2>Your Password <span id="alert">(Copied)</span></h2>
+        <p>Your password has been copied</p>
+        <table>
+            <tr>
+                <th>Website</th>
+                <th>Username</th>
+                <th>Password</th>
+                <th>Delete</th>
+            </tr>
+
+
+        </table>
+
+        <h2>Add a password</h2>
+        <form action="/submit" method="post">
+            <!-- Text input for Website -->
+            <label for="Website">Website:</label>
+            <input type="text" id="Website" name="Website" required>
+            <br><br>
+            <!-- Text input for username -->
+            <label for="username">Username:</label>
+            <input type="text" id="username" name="username" required>
+            <br><br>
+
+            <!-- Password input -->
+            <label for="password">Password:</label>
+            <input type="password" id="password" name="password" required>
+            <br>
+
+
+            <!-- Submit button -->
+            <button class="btn" type="submit">Submit</button>
+
+
+        </form>
+    </div>
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/public/password manager/script.js b/public/password manager/script.js
@@ -0,0 +1,97 @@
+
+function maskPassword(pass){
+    let str=""
+    for (let index =0; index<Array.length; index++){
+        str +="*"
+
+    }
+    return str
+}
+function copyText(txt) {
+    navigator.clipboard.writeText(txt).then(
+        () => {
+            //clipboard successfully set
+            //alert("copied the text:" + txt);
+            document.getElementById("alert").style.display = "inline"
+            setTimeout(() => {
+                document.getElementById("alert").style.display = "none"
+
+            }, 2000);
+        },
+        () => {
+            //clipboard write failed
+            alert("failed")
+        },
+    );
+}
+const deletePassword = (Website) => {
+    let data = localStorage.getItem("passwords")
+    let arr = JSON.parse(data);
+    arrUpdated = arr.filter((e) => {
+        return e.Website != Website
+    })
+    localStorage.setItem("passwords", JSON.stringify(arrUpdated))
+    alert(`Successfully deleted ${Website}'s password`)
+    showPasswords()
+}
+
+//logic to fill the table
+
+const showPasswords = () => {
+    let tb = document.querySelector("table")
+    let data = localStorage.getItem("passwords")
+    if (data == null || JSON.parse(data).length == 0) {
+        tb.innerHTML = "No Data To Show"
+    }
+    else {
+        tb.innerHTML = `<tr>
+        <th>Website</th>
+        <th>Username</th>
+        <th>Password</th>
+        <th>Delete</th>
+    </tr>`
+        let arr = JSON.parse(data);
+        let str = ""
+        for (let index = 0; index < arr.length; index++) {
+            const element = arr[index];
+
+
+            str += `<tr>
+    <td>${element.Website}<img onclick="copyText('${element.Website}')" src="copy.svg" alt="Copy Button" width="10" height="10"></td>
+    <td>${element.username}<img onclick="copyText('${element.username}')" src="copy.svg" alt="Copy Button" width="10" height="10"></td>
+    <td>${maskPassword(element.password)}<img onclick="copyText('${element.password}')" src="copy.svg" alt="Copy Button" width="10" height="10"></td>
+    <td><button class="btnsm" onclick="deletePassword('${element.Website}')">Delete</button></td>
+        </tr>`
+        }
+        tb.innerHTML = tb.innerHTML + str
+    }
+    Website.value = ""
+    username.value = ""
+    password.value = ""
+}
+
+
+console.log("Working");
+showPasswords()
+document.querySelector(".btn").addEventListener("click", (e) => {
+    e.preventDefault()
+    console.log("Clicked.......")
+    console.log(username.value, password.value)
+    let passwords = localStorage.getItem("passwords")
+    console.log(passwords)
+    if (passwords == null) {
+        let json = []
+        json.push({ Website: Website.value, username: username.value, password: password.value })
+        alert("password saved");
+        localStorage.setItem("passwords", JSON.stringify(json))
+    }
+    else {
+        let json = JSON.parse(localStorage.getItem("passwords"))
+        json.push({ Website: Website.value, username: username.value, password: password.value })
+        alert("password saved");
+        localStorage.setItem("passwords", JSON.stringify(json))
+    }
+    showPasswords()
+
+})
+
diff --git a/public/password manager/style.css b/public/password manager/style.css
@@ -0,0 +1,93 @@
+<style>@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;1,400&display=swap');
+
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    font-family: 'Poppins', sans-serif;
+}
+
+nav {
+    background-color: black;
+    color: white;
+    padding: 2px 3px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.logo {
+    margin: 0 23px;
+    font-weight: 800;
+    font-size: 25px;
+    cursor: pointer;
+}
+
+ul {
+    display: flex;
+    margin: 0 23px;
+    align-items: center;
+
+}
+
+ul>li {
+    list-style: none;
+    margin: 0 13px;
+    cursor: pointer;
+
+}
+
+ul>li:hover {
+    color: white;
+
+}
+
+table,
+td,
+tr {
+    border: 2px solid black;
+    border-collapse: collapse;
+    padding: 3px 13px;
+}
+
+
+
+  button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    margin-left: 10px;
+  }
+
+.container {
+    max-width: 80vw;
+    margin: 23px auto;
+}
+
+h1,h2,h3 {
+    margin: 23px 0;
+}
+
+.btn{
+    padding: 8px 17px;
+    background: black;
+    color: white;
+    font-weight: 900;
+    border: 2px solid grey;
+    border-radius: 8px;
+    margin: 25px 0;
+    cursor: pointer;
+}
+.btnsm{
+    padding: 8px 17px;
+    background: black;
+    color: white;
+    font-weight: 900;
+    border: 2px solid grey;
+    border-radius: 8px;
+    cursor: pointer;
+}
+img{
+    cursor: pointer;
+}