인스타그램 클론코딩의 가장 첫번째 관문인 로그인 페이지를 만들었다.
html/css로 형태를 구현하는 것에는 크게 문제되는 것이 없었지만 Javascript의 dom형태로 기능을 구현하는 것이 처음이라 많이 막혔지만 해결방식을 잘 정립해두고 배운 개념, 모르는 개념을 검색하면서 찾아내어 첫 로그인 페이지를 완성했다.
구현 기능
| DOM으로 html에 접근하고 1. id에 @가 포함된 이메일 형식의 문자를 입력했을 때 2. 비밀번호를 5자 이상 입력했을 때를 동시에 충족했을 때 로그인 버튼이 활성화되면서 버튼을 클릭하면 main페이지로 이동하게 된다. |
⭐Key Point
- 문자열의 길이 파악
- "@"를 찾아내는 메소드
- 로그인 버튼 활성화 비활성화 기능 + 스타일 속성 변경
- 다른 링크로 이동
Output
Code
🥕 HTML
<!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">
<title>YestagraM</title>
<link rel="stylesheet" type="text/css" href="./style/login.css">
<link rel="stylesheet" type="text/css" href="./style/common.css">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>
<body>
<article>
<div class = "login_wrapper">
<div class="login_logo">Yestagram</div>
<form class="login_form">
<input id="LOGIN_ID" class = "login_text" type="text" name="id" placeholder="전화번호, 사용자 이름 또는 이메일">
<input id="LOGIN_PW" class = "login_text" type="password" name="id" placeholder="비밀번호">
<button id="LOGIN_BTN" class = "login_btn" type="button" disabled>로그인</button>
</form>
<a class = "login_bottom" href="" >비밀번호를 잊으셨나요?</a>
</div>
</article>
<script src="./js/login.js" defer=""></script>
</body>
</html>🥕 CSS
body{
background-color:#FAFAFA;
margin: 0px;
color: #262626;
box-sizing: border-box;
}
a{
text-decoration: none;
color:#262626;
}
.login_wrapper{
position:absolute;
display: flex;
flex-direction: column;
align-items: center;
width:350px;
height:380px;
top:50%;
left:50%;
margin: -175px 0px 0px -190px;
background-color:white;
border: 1px solid #DBDBDB;
}
.login_logo{
margin :30px 0 30px 0;
color:#262626;
font-family: 'Lobster', cursive;
font-size: 40px;
font-weight: 100px;
}
.login_form{
display:flex;
flex-direction: column;
width:280px;
margin-top:10px;
}
.login_text{
width:100%;
height:40px;
margin: 3px 0 3px 0 ;
padding: 0 10px 0 10px;
background-color:#FAFAFA;
border: 1px solid #DBDBDB;
border-radius: 3px;
}
.login_text:focus{
outline: 1px solid #a8a8a8;
}
.login_text::placeholder{
color:#8E8E8E;
}
.login_text::value{
color:#262626;
}
.login_btn{
width:100%;
height:33px;
margin: 10px 0 5px 0;
color:white;
background-color: #C0DFFD;
border-radius: 5px;
border-style: none;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
.login_bottom{
margin-top: 65px;
color:#01376A;
font-size: 13px;
}
🥕 JavaScript
"use strict";
const loginId = document.getElementById('LOGIN_ID');
const loginPw = document.getElementById('LOGIN_PW');
const loginBtn = document.getElementById('LOGIN_BTN');
function color() {
if((loginId.value.length>0 && loginId.value.indexOf("@")!==-1)
&& loginPw.value.length>=5){
loginBtn.style.backgroundColor = "#0095F6";
loginBtn.disabled = false;
}else{
loginBtn.style.backgroundColor = "#C0DFFD";
loginBtn.disabled = true;
}
}
function moveToMain(){
location.replace("./main.html");
}
loginId.addEventListener('keyup', color);
loginPw.addEventListener('keyup', color);
loginBtn.addEventListener('click',moveToMain);
- "use strict";
안전한 코딩을 위해 js 파일 상단에 항상 써주기! - document.getElementById("LOGIN_ID")
태그에 있는 id 속성을 사용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 함수 - function color()
유효성 검사 후 로그인 버튼의 색상 변경 + 버튼 비활성화 활성화 설정 - function moveToMain()
다른 링크로 이동 - .addEventListener(event,함수명)
document의 특정요소(Id,class,tag 등등..) event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용
반응형
'Web > JavaScript' 카테고리의 다른 글
| jQuery | 주요 기능 정리 (css, 태그, 이벤트, 모달) (0) | 2022.07.18 |
|---|---|
| Javascript | 문자열, 글자 마스킹하는 함수 (0) | 2022.02.20 |
| JavaSctipt | DOM 이란? (1) | 2021.10.24 |
| JavaScript | 객체 속성에 접근하는 방법 (점 표기법 / 대괄호 표기법) (0) | 2021.09.06 |
| JavaScript | 배열 선언 / 추가,삭제/ 검색 (0) | 2021.09.03 |