Add files via upload
This commit is contained in:
Sam
GitHub
parent
257d74bd76
commit
1fd8fbec58
90
100_projects/57-password-validation-check-in/css/style.css
Normal file
90
100_projects/57-password-validation-check-in/css/style.css
Normal file
@ -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;
|
||||
}
|
||||
34
100_projects/57-password-validation-check-in/index.html
Normal file
34
100_projects/57-password-validation-check-in/index.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="inputB">
|
||||
<input type="username" id="user" placeholder="Username">
|
||||
<input type="password" id="pass" placeholder="Password" onkeyup="checkPassword(this.value)">
|
||||
<span id="toggleBtn"></span>
|
||||
</div>
|
||||
<div class="validation">
|
||||
<ul>
|
||||
<li id="lower">At least one lowercase character</li>
|
||||
<li id="upper">At least one uppercase character</li>
|
||||
<li id="number">At least one number</li>
|
||||
<li id="special">At least one special character</li>
|
||||
<li id="length">At least 8 character</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="js/main.js">
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
66
100_projects/57-password-validation-check-in/js/main.js
Normal file
66
100_projects/57-password-validation-check-in/js/main.js
Normal file
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user