<JS>
// <div class="pass-field"> 안에 있는 <input>가져오기
const passwordInput = document.querySelector(".pass-field input");
// <div class="pass-field"> 안에 있는 <i>가져오기
const eyeIcon = document.querySelector(".pass-field i");
// <ul class="requirement-list"> 안에 있는 <li> 전체 가져오기
const requirementList = document.querySelectorAll(".requirement-list li");
// 요구 사항 목록을 정규식(regex)에 저장
const requirements = [
{ regex: /.{8,}/, index: 0 }, // 최소 8글자
{ regex: /[0-9]/, index: 1 }, // 숫자 최소 1개 이상 포함
{ regex: /[a-z]/, index: 2 }, // 영어 소문자 최소 1개 이상 포함
{ regex: /[^A-Za-z0-9]/, index: 3 }, // 특수문자 최소 1개 이상 포함 (@,#,$...)
{ regex: /[A-Z]/, index: 4 }, // 영어 대문자 최소 1개 이상 포함
]
// addEventListener: 특정요소의 이벤트를 등록할때 사용
// keyup: 키를 눌렀다가 떼는 순간 발생한다.
passwordInput.addEventListener("keyup", (e) => {
requirements.forEach(item => {
// 암호가 요구 사항 정규식과 일치하는지 저장
// 일치할시 isValid에 true가 저장
const isValid = item.regex.test(e.target.value);
// HTML에서 요구사항(li)을 requirementItem에 저장
const requirementItem = requirementList[item.index];
if (isValid) {
requirementItem.classList.add("valid");
requirementItem.firstElementChild.className = "fa-solid fa-check";
} else {
requirementItem.classList.remove("valid");
requirementItem.firstElementChild.className = "fa-solid fa-circle";
}
});
});
// 눈 아이콘 클릭 시
eyeIcon.addEventListener("click", () => {
// passwordInput의 type이 password면 text로 type을 변환한다. (text일때는 반대로)
passwordInput.type = passwordInput.type === "password" ? "text" : "password";
// 비밀번호 입력 유형에 따라 눈 아이콘 업데이트 -> -slash가 붙도록
eyeIcon.className = `fa-solid fa-eye${passwordInput.type === "password" ? "" : "-slash"}`;
});
<html>
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<!-- 타이틀 설정 -->
<title>비밀번호 조건 만들기</title>
<!-- CSS 연결 -->
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 구글 웹 폰트 연결 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
</head>
<body>
<div class="wrapper">
<!-- 비밀번호 입력 칸 -->
<div class="pass-field">
<input type="password" placeholder="비밀번호를 입력하세요">
<!-- 눈 이미지 -->
<i class="fa-solid fa-eye"></i>
</div>
<!-- 비밀번호 조건 -->
<div class="content">
<p>비밀번호는 다음을 만족해야합니다</p>
<ul class="requirement-list">
<!-- 1. 최소 8글자 -->
<li>
<i class="fa-solid fa-circle"></i>
<span>최소 8글자</span>
</li>
<!-- 2. 숫자 최소 1개 이상 포함 -->
<li>
<i class="fa-solid fa-circle"></i>
<span>숫자 최소 1개 이상 포함</span>
</li>
<!-- 3. 영어 소문자 최소 1개 이상 포함 -->
<li>
<i class="fa-solid fa-circle"></i>
<span>영어 소문자 최소 1개 이상 포함</span>
</li>
<!-- 4. 특수문자 최소 1개 이상 포함 (@,#,$...) -->
<li>
<i class="fa-solid fa-circle"></i>
<span>특수문자 최소 1개 이상 포함 (@,#,$...)</span>
</li>
<!-- 5. 영어 대문자 최소 1개 이상 포함 -->
<li>
<i class="fa-solid fa-circle"></i>
<span>영어 대문자 최소 1개 이상 포함</span>
</li>
</ul>
</div>
</div>
<!-- 자바스크립트 연결 -->
<script src="script.js"></script>
</body>
</html>
<과제_html틀>
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>Password Strength Checker JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>Password Strength Indicator</header>
<form action="#">
<div class="field">
<!--키를 누르고 뗄 때 이벤트를 감지하는 Password input 생성하기 / js function trigger 사용-->
<span class="showBtn">SHOW</span>
</div>
<div class="indicator">
<span class="weak"></span>
<span class="medium"></span>
<span class="strong"></span>
</div>
<div class="text"></div>
</form>
</div>
<script>
const indicator = document.querySelector(".indicator");
const input = //input 가져오기
const weak =
const medium =
const strong =
// indicator > span 요소들 가져오기
const text = //text class 가져오기
const showBtn = // showBtn 클래스 가져오기
let regExpWeak = //변수 1 설정
let regExpMedium = //변수 2 설정
let regExpStrong = //변수 3 설정
function trigger(){
if(input.value != ""){
indicator.style.display = "block";
indicator.style.display = "flex";
/* weak,medium,strong 조건 추가하기
if()no=1;
if()no=2;
if()no=3;
*/
if(no==1){
weak.classList.add("active");
text.style.display = "block";
// 안내문구 출력
// 박스 출력
}
if(no==2){
//medium 조건 충족할 시
}else{
/*
.add된 이벤트 지워주기
*/
}
if(no==3){
//strong 조건 충족할 시
}else{
/*
.add된 이벤트 지워주기
*/
}
showBtn.style.display = "block";
showBtn.onclick = function(){
if(input.type == "password"){
//password type text로 설정
//showBtn => HIDE로 설정
// 색상 설정
}else{
//password type password로 설정
//showBtn => HIDE로 설정
// 색상 설정
}
}
}else{
indicator.style.display = "none";
text.style.display = "none";
showBtn.style.display = "none";
}
}
</script>
</body>
</html>'School > 멋쟁이사자처럼' 카테고리의 다른 글
| 테킷_프론트엔드트랙 (0) | 2023.07.03 |
|---|---|
| 아이디어톤-2차회의준비 (0) | 2023.06.16 |
| 테킷-JavaScript Next Level (0) | 2023.05.12 |
| 테킷-온보딩 자바스크립트 (0) | 2023.05.12 |
| 테킷-프론트엔드 온보딩 트랙 (0) | 2023.05.10 |
