컴퓨터 프로그래밍/JQuery

로그인창 활성화

깝돌이 2020. 5. 27. 23:08

ID와 Password를 모두 기입해야 로그인창이 활성화 됩니다. 

코드잇 강의의 실습을 구현해 보았습니다.

로그인 html과 css는 그 이전의 강의에서 직접 작성하였습니다. 

JQuery입문자라서... 이게 잘 한건지는 모르겠지만, 잘 실행이 됩니다. 

 

로그인창 활성화
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
<link rel="stylesheet" href="loginp.css">
 <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script type="text/javascript">
 var id ="";
 var pass="";

 $(function(){

	 $('input[name="email"]').on('keydown', function(){
		id = $('input[name="email"]').val();
		checkUp();
	 });
	 
	 $('input[name="password"]').on('keydown', function(){
		pass = $('input[name="password"]').val();
		checkUp();
	 });
  });
 function checkUp(){	
	 if(id!=""&&pass!=""){
			 $('.login-form').attr('onsubmit', 'return true');
			 $('.submit-btn').addClass('button_color').hover(function(){
				 $(this).addClass('hover');
			 }, function(){
				 $(this).removeClass('hover');
			 });
		 }
 }
</script>
</head>
<body>
 <div action="#" class="login-form" onsubmit="return false">
    <form>
      <input type="text" name="email" class="text-field" placeholder="아이디">
      <input type="password" name="password" class="text-field" placeholder="비밀번호">
      <input type="submit" value="로그인" class="submit-btn">
    </form>

    <div class="links">
      <a href="#">비밀번호를 잊어버리셨나요?</a>
    </div>
  </div>
</body>
</html>

 

 

@charset "UTF-8";
* {
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
  margin: 0;
  padding:0;
}

body {
  margin: 0;
  background-color: #1BBC9B;
}

.login-form {
	
	width: 300px;
	margin: 50px auto 0 auto;
	text-align: center;
	background-color:  #EEEFF1;
	border-radius: 5px;
	padding: 20px;

}

.text-field {
	
  font-size: 14px;
  border-radius: 5px;
  border:none;
  padding: 10px;
  margin-bottom: 10px;
  width: 100%;
}

.submit-btn{
  display: block;
  font-size: 14px;
  border-radius: 5px;
  border:none;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  color: white;
  width: 100%;
  padding:10px;
  background-color:#9B9B9B;
}

.button_color{
	background-color:  #1BBC9B;
}
.hover{
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);
}


.login-form>form{
	padding:0;
}

.links {
	  padding:0;
}

.links a {
  font-size: 12px;
  color:  #9B9B9B;

}