diff --git a/PasswordStrengthChecker/Shuklaaa/README.md b/PasswordStrengthChecker/Shuklaaa/README.md new file mode 100644 index 000000000..589f794e5 --- /dev/null +++ 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 new file mode 100644 index 000000000..7961af6ad Binary files /dev/null and b/PasswordStrengthChecker/Shuklaaa/image-1.png differ diff --git a/PasswordStrengthChecker/Shuklaaa/image-2.png b/PasswordStrengthChecker/Shuklaaa/image-2.png new file mode 100644 index 000000000..1151ddc05 Binary files /dev/null and b/PasswordStrengthChecker/Shuklaaa/image-2.png differ diff --git a/PasswordStrengthChecker/Shuklaaa/image.png b/PasswordStrengthChecker/Shuklaaa/image.png new file mode 100644 index 000000000..991f4b128 Binary files /dev/null and b/PasswordStrengthChecker/Shuklaaa/image.png differ diff --git a/PasswordStrengthChecker/Shuklaaa/index.html b/PasswordStrengthChecker/Shuklaaa/index.html new file mode 100644 index 000000000..897ac5177 --- /dev/null +++ b/PasswordStrengthChecker/Shuklaaa/index.html @@ -0,0 +1,21 @@ + + + + + + + Password Strength Checker + + + +
+

Password Strength Checker

+
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/PasswordStrengthChecker/Shuklaaa/script.js b/PasswordStrengthChecker/Shuklaaa/script.js new file mode 100644 index 000000000..cfac4a86a --- /dev/null +++ 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'); + } +} \ No newline at end of file diff --git a/PasswordStrengthChecker/Shuklaaa/style.css b/PasswordStrengthChecker/Shuklaaa/style.css new file mode 100644 index 000000000..e60f3c905 --- /dev/null +++ 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'; +} \ No newline at end of file