thinkswell · PBJI · Oct 14, 2023 · Oct 14, 2023 · Oct 14, 2023
diff --git a/PasswordStrengthChecker/Shuklaaa/README.md b/PasswordStrengthChecker/Shuklaaa/README.md
@@ -0,0 +1,17 @@
+#PASSWORD STRENGTH CHECKER
+
+##Overview
+The Password Strength Checker is a web application built using HTML, CSS, and JavaScript. It provides a user-friendly interface for assessing the strength of passwords. Users can input a password, and the application will evaluate its strength based on various criteria.
+
+##Features
+- Password Input: Users can enter a password into the application.
+- Strength Evaluation: The application assesses the strength of the password based on criteria such as length, complexity, and character types.
+- Strength Indicator: A visual or textual indicator is provided to show the strength of the password (e.g., Weak, Medium, Strong).
+- User-Friendly: The interface is designed to be user-friendly and intuitive, making it easy for users to understand the strength of their passwords.
+- Styling and Presentation: The application is styled with CSS to ensure a pleasant and visually appealing user experience.
+
+##SCREENSHOTS
+![Alt text](image.png)
+![Alt text](image-1.png)
+![Alt text](image-2.png)
+
diff --git a/PasswordStrengthChecker/Shuklaaa/image-1.png b/PasswordStrengthChecker/Shuklaaa/image-1.png
diff --git a/PasswordStrengthChecker/Shuklaaa/image-2.png b/PasswordStrengthChecker/Shuklaaa/image-2.png
diff --git a/PasswordStrengthChecker/Shuklaaa/image.png b/PasswordStrengthChecker/Shuklaaa/image.png
diff --git a/PasswordStrengthChecker/Shuklaaa/index.html b/PasswordStrengthChecker/Shuklaaa/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<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>Password Strength Checker</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <div class="container">
+        <h2>Password Strength Checker</h2>
+        <div class="inputBox">
+            <input type="password" placeholder="Enter your password" id="myPassword">
+            <div class="show"></div>
+        </div>
+        <div class="strengthMeter"></div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/PasswordStrengthChecker/Shuklaaa/script.js b/PasswordStrengthChecker/Shuklaaa/script.js
@@ -0,0 +1,56 @@
+function Strength(password){
+    let i = 0;
+    if(password.length > 6){
+        i++;
+    }
+    if(password.length >= 10){
+        i++;
+    }
+    if(/[A-Z]/.test(password)){
+        i++;
+    }
+    if(/[0-9]/.test(password)){
+        i++;
+    }
+    if(/[A-Za-z0-8]/.test(password)){
+        i++;
+    }
+    return i;
+}
+
+let container = document.querySelector('.container');
+document.addEventListener("keyup", function(e){
+    let password = document.querySelector('#myPassword').value;
+
+    let strength = Strength(password);
+    if(strength <= 2){
+        container.classList.add('weak');
+        container.classList.remove('medium');
+        container.classList.remove('strong');
+    }
+    else if(strength >= 2 && strength <= 4){
+        container.classList.remove('weak');
+        container.classList.add('medium');
+        container.classList.remove('strong');
+    }
+    else{
+        container.classList.remove('weak');
+        container.classList.remove('medium');
+        container.classList.add('strong');
+    }
+})
+
+let pswrd = document.querySelector('#myPassword');
+let show = document.querySelector('.show');
+
+show.onclick = function(){
+    if(pswrd.type === 'password'){
+        pswrd.setAttribute('type', 'text');
+        show.classList.add('hide');
+    }
+
+    else{
+        pswrd.setAttribute('type', 'password');
+        show.classList.remove('hide');
+    }
+}
diff --git a/PasswordStrengthChecker/Shuklaaa/style.css b/PasswordStrengthChecker/Shuklaaa/style.css
@@ -0,0 +1,130 @@
+*
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #222;
+}
+
+.container{
+    position: relative;
+    width: 400px;
+    padding: 30px;
+    background: #333;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    border: 1px solid #111;
+    gap: 10px;
+    padding-bottom: 70px;
+    -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0005);
+}
+.container h2{
+    color: #666;
+    font-weight: 500;
+}
+
+.container .inputBox{
+    position: relative;
+    width: 100%;
+}
+.container .inputBox input{
+    position: relative;
+    width: 100%;
+    background: #222;
+    border: none;
+    outline: none;
+    padding: 10px;
+    color: #fff;
+    font-size: 1.1em;
+}
+
+.container .strengthMeter{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: #222;
+}
+.container .strengthMeter::before{
+    content: '';
+    position: absolute;
+    width: 0%;
+    height: 100%;
+    transition: 0.5s;
+    background: #f00;
+}
+
+
+.container.weak .strengthMeter::before{
+    width: 10%;
+    background: #f00;
+    filter: drop-shadow(0 0 5px #f00) drop-shadow(0 0 10px #f00) drop-shadow(0 0 20px #f00);
+}
+.container.medium .strengthMeter::before{
+    width: 66.66%;
+    background: #ffa500;
+    filter: drop-shadow(0 0 5px #ffa500) drop-shadow(0 0 10px #ffa500) drop-shadow(0 0 20px #ffa500);
+}
+.container.strong .strengthMeter::before{
+    width: 100%;
+    background: #0f0;
+    filter: drop-shadow(0 0 5px #0f0) drop-shadow(0 0 10px #0f0) drop-shadow(0 0 20px #0f0);
+}
+
+.container .strengthMeter::after{
+    position: absolute;
+    top: -45px;
+    left: 30px;
+    color: #fff;
+    transition: 0.5s;
+}
+.container.weak .strengthMeter::after{
+    content: 'Your password is weak';
+    color: #f00;
+    filter: drop-shadow(0 0 5px #f00);
+}
+.container.medium .strengthMeter::after{
+    content: 'Your password is medium';
+    color: #ffa500;
+    filter: drop-shadow(0 0 5px #ffa500);
+}
+.container.strong .strengthMeter::after{
+    content: 'Your password is strong';
+    color: #0f0;
+    filter: drop-shadow(0 0 5px #0f0);
+}
+
+.show{
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 60px;
+    height: 100%;
+    background: #333;
+    border: 5px solid #222;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.show::before{
+    content: 'Show';
+    font-size: 0.6em;
+    color: #fff;
+    letter-spacing: 0.10em;
+    text-transform: uppercase;
+}
+
+.show.hide::before{
+    content: 'Hide';
+}