From 1fd8fbec58fed4cb0f42a3c706480c844ba9f449 Mon Sep 17 00:00:00 2001 From: Sam <74021826+x39OME@users.noreply.github.com> Date: Wed, 19 Apr 2023 17:30:52 +0300 Subject: [PATCH] Add files via upload --- .../css/style.css | 90 +++++++++++++++++++ .../index.html | 34 +++++++ .../js/main.js | 66 ++++++++++++++ 3 files changed, 190 insertions(+) create mode 100644 100_projects/57-password-validation-check-in/css/style.css create mode 100644 100_projects/57-password-validation-check-in/index.html create mode 100644 100_projects/57-password-validation-check-in/js/main.js diff --git a/100_projects/57-password-validation-check-in/css/style.css b/100_projects/57-password-validation-check-in/css/style.css new file mode 100644 index 0000000..e729986 --- /dev/null +++ b/100_projects/57-password-validation-check-in/css/style.css @@ -0,0 +1,90 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #008B8B; +} +.container{ + position: relative; + width: 300px; +} +.container .inputB{ + position: relative; + width: 100%; + background: #fff; + padding: 8px 5px; + border-radius: 5px; + box-shadow: 2px 10px 20px rgba(0, 0, 0, .1); +} +.container .inputB input{ + position: relative; + width: 100%; + border: none; + outline: none; + padding: 10px; +} +.container .inputB input[type="username"]{ + border-bottom: 1px solid rgba(0, 0, 0, .1); +} +.container .inputB #toggleBtn{ + position: absolute; + bottom: 5px; + right:10px ; + width: 34px; + height: 34px; + border-radius: 50%; + background: rgba(0, 0, 0, .1); + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; +} +.container .inputB #toggleBtn::before{ + content: '\f06e'; + font-family: fontAwesome; + color: #000; +} +.container .inputB #toggleBtn.hide::before{ + content: '\f070'; +} +.validation{ + background: rgba(0, 0, 0, .4); + color: #000; + padding: 10px; + margin-top: 20px; + border-radius: 5px; + box-shadow: 2px 10px 20px rgba(0, 0, 0, .1); +} +.validation ul{ + position: relative; + display: flex; + flex-direction: column; + gap: 5px; +} +.validation ul li{ + position: relative; + list-style: none; + color: #fff; + font-size: 14px; + transition: .3s; +} +.validation ul li.valid{ + color: rgba(255, 255, 255, .5); +} +.validation ul li::before{ + content: '\f192'; + width: 20px; + height: 10px; + font-family: fontAwesome; + display: inline-flex; +} +.validation ul li.valid::before{ + content: '\f00c'; + color: #0f0; +} \ No newline at end of file diff --git a/100_projects/57-password-validation-check-in/index.html b/100_projects/57-password-validation-check-in/index.html new file mode 100644 index 0000000..344a79f --- /dev/null +++ b/100_projects/57-password-validation-check-in/index.html @@ -0,0 +1,34 @@ + + + + + + + + + Document + + + +
+
+ + + +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/100_projects/57-password-validation-check-in/js/main.js b/100_projects/57-password-validation-check-in/js/main.js new file mode 100644 index 0000000..077f4ca --- /dev/null +++ b/100_projects/57-password-validation-check-in/js/main.js @@ -0,0 +1,66 @@ +let pass = document.getElementById('pass'); +let toggleBtn = document.getElementById('toggleBtn'); + + +let lowerCase = document.getElementById('lower'); +let upperCase = document.getElementById('upper'); +let digit = document.getElementById('number'); +let specialChar = document.getElementById('special'); +let minlength = document.getElementById('length'); + +function checkPassword(data){ + + const lower = new RegExp('(?=.*[a-z])'); + const upper = new RegExp('(?=.*[A-Z])'); + const number = new RegExp('(?=.*[0-9])'); + const special = new RegExp('(?=.*[!@#\$%\^&\*])'); + const length = new RegExp('(?=.{8,})'); + + // lower + if(lower.test(data)){ + lowerCase.classList.add('valid'); + } else { + lowerCase.classList.remove('valid'); + } + // upper + if(upper.test(data)){ + upperCase.classList.add('valid'); + } else { + upperCase.classList.remove('valid'); + } + // number + if(number.test(data)){ + digit.classList.add('valid'); + } else { + digit.classList.remove('valid'); + } + // special + if(special.test(data)){ + specialChar.classList.add('valid'); + } else { + specialChar.classList.remove('valid'); + } + // length + if(length.test(data)){ + minlength.classList.add('valid'); + } else { + minlength.classList.remove('valid'); + } +} + + +// Show\Hide +toggleBtn.onclick = function(){ + if(pass.type === 'password'){ + pass.setAttribute('type', 'text'); + toggleBtn.classList.add('hide'); + } else { + pass.setAttribute('type', 'password'); + toggleBtn.classList.remove('hide'); + } +} + + + + +