비전공자 개발일기

Password Strength Checker with color 본문

Javascript

Password Strength Checker with color

HiroDaegu 2022. 12. 7. 08:33
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<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>PW STRENGTH CHECKER2</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
</head>
<body>
    <div class="container">
        <h2>Password Strength Check</h2>
        <div class="inputBox">
            <input type="password" id="myPassword" placeholder="PASSWORD">
            <div class="show"></div>
        </div>
        <div class="strengthMeter"></div>
    </div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #222;
}

.container {
    width: 400px;
    padding: 30px 30px 70px 30px;
    background-color: #333;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #111;
    gap: 10px;
    -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0005);
}

.container h2 {
    color: #666;
    font-weight: 500;
}

.container .inputBox {
    width: 100%;
}

.container .inputBox input {
    width: 100%;
    background-color: #222;
    border: none;
    outline: none;
    padding: 10px;
    color: #FFF;
    font-size: 1.1em;
}

.container .inputBox .show {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background-color: #333;
    border: 6px solid #222;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .inputBox .show::before {
    content: 'show';
    font-size: .6em;
    color: #FFF;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.container .inputBox .show.hide::before {
    content: 'hide';
}

.container .strengthMeter {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: #222;
}

.container .strengthMeter::before {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    transition: .5s;
    background-color: #F00;
}

.container.weak .strengthMeter::before {
    width: 10%;
    background-color: #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-color: #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-color: #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;
    transition: .5s;
    color: #FFF;
}

.container.weak .strengthMeter::after { 
    content: 'Ur Password is WEAK';
    color: #F00;
    filter: drop-shadow(0 0 5px #F00);
}

.container.medium .strengthMeter::after { 
    content: 'Ur Password is MEDIUM';
    color: #FFA500;
    filter: drop-shadow(0 0 5px #FFA500);
}

.container.strong .strengthMeter::after { 
    content: 'Ur Password is STRONG';
    color: #0F0;
    filter: drop-shadow(0 0 5px #0F0);
}
let pw = document.querySelector("#myPassword");
let show = document.querySelector(".show");
show.addEventListener("click", () => {
  if (pw.type === "password") {
    pw.setAttribute("type", "text");
    show.classList.add("hide");
  } else {
    pw.setAttribute("type", "password");
    show.classList.remove("hide");
  }
});

let container = document.querySelector(".container");
document.addEventListener("keyup", function (e) {
  let password = document.querySelector("#myPassword").value;
  let strength = pwStrength(password);
  console.log(strength);
  if (strength == 0) {
    container.classList.remove("weak");
    container.classList.remove("medium");
    container.classList.remove("strong");
  } else if (strength > 0 && 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");
  }
});

function pwStrength(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;
}
728x90
LIST

'Javascript' 카테고리의 다른 글

Calculator basic operator  (0) 2022.12.09
Create Email Validation  (0) 2022.12.08
Image Distribution Effect  (0) 2022.12.06
Product Filter  (0) 2022.12.04
New Year 2023 Countdown  (0) 2022.12.02
'Javascript' Related Articles more