Merge pull request #116 from Gaurav0203Shetty/patch-3

Update script.js
shrey141102 · Dec 11, 2023 · 2e3a156 · 2e3a156
2 parents c3d443c + e428077
commit 2e3a156
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 0 deletions.
diff --git a/Hide-show-pass/.DS_Store b/Hide-show-pass/.DS_Store
diff --git a/Hide-show-pass/.vscode/settings.json b/Hide-show-pass/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}
diff --git a/Hide-show-pass/Images/.DS_Store b/Hide-show-pass/Images/.DS_Store
diff --git a/Hide-show-pass/Images/open.png b/Hide-show-pass/Images/open.png
diff --git a/Hide-show-pass/Images/shut.png b/Hide-show-pass/Images/shut.png
diff --git a/Hide-show-pass/README.md b/Hide-show-pass/README.md
@@ -0,0 +1,2 @@
+Hide/Show password
+A project made using HTML, CSS and JS which can be integrated easily to your website for better security when entering password in public spaces.}
diff --git a/Hide-show-pass/index.html b/Hide-show-pass/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hide/Show pass</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="input-box">
+        <input type="password" placeholder="Enter password" id="password">
+        <img src="./Images/shut.png" alt="error" id="eyeicon">
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Hide-show-pass/script.js b/Hide-show-pass/script.js
@@ -0,0 +1,13 @@
+let eyeicon = document.getElementById("eyeicon");
+let password = document.getElementById("password");
+
+eyeicon.onclick = function(){
+    if(password.type == "password"){
+        password.type = "text";
+        eyeicon.src = "./Images/open.png";
+    }
+    else{
+        password.type = "password";
+        eyeicon.src = "./Images/shut.png";
+    }
+}
diff --git a/Hide-show-pass/style.css b/Hide-show-pass/style.css
@@ -0,0 +1,40 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    box-sizing: border-box;
+}
+
+body{
+    background:  #00008B;
+}
+
+.input-box{
+    background: #fff;
+    width: 90%;
+    max-width: 500px;
+    border-radius: 5px;
+    padding: 10px 20px;
+    margin: 300px auto;
+    display: flex;
+    align-items: center;
+}
+
+.input-box input{
+    width: 100%;
+    padding: 10px 0;
+    border: 0;
+    outline: 0;
+    font-size: 24px;
+    color: #555;
+}
+
+.input-box img{
+    width: 35px;
+    cursor: pointer;
+}
+
+img{
+    width: 35px;
+    cursor: pointer;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Hide/Show password
		A project made using HTML, CSS and JS which can be integrated easily to your website for better security when entering password in public spaces.}