- 구현사항
id, pw 에 각각 한 글자 이상 써야 버튼이 활성화 되도록 해주세요. 원래 연한 파란색이었다가 -> 활성화 되면 파란색으로!
지난 주까지만 해도 화면 weegle 화면 구성도 어떻게 해야할지 몰라서 쩔쩔매었으나, 28기 동기 분들의 도움과 멘토님들의 가르침으로 일단 위스타그램 화면 구성을 몇시간 안에 구성할 수 있게 되었다. 아직 다른 동기들에 비해서 많이 부족한 실력이지만 어제의 나보다는 분명히 일취월장을 하였다.
그것을 기념하여 코드를 남긴다.
- index.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>westagram login</title>
<link rel="stylesheet" href="style/login.css"/>
<link rel="stylesheet" href="style/common.css"/>
<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=Lobster&display=swap" rel="stylesheet">
</head>
<body>
<main>
<div class="login_wrapper">
<div class="login_logo">
<h1>Westagram</h1>
</div>
<div class="login_container">
<input class="login_email" placeholder="전화번호, 사용자 이름 또는 이메일">
</input>
<input type="password" class="login_pw" placeholder="비밀번호">
</input>
<button class="login_btn">
로그인
</button>
</div>
<footer class="passwordfind_link">
<a href="#">비밀번호를 잊으셨나요?</a>
</footer>
</div>
<script src="js/login.js"></script>
</main>
</body>
</html>
- login.css 파일
main {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.login_wrapper {
display: flex;
flex-direction: column;
width: 700px;
height: 750px;
padding: 80px;
border: 1px solid #bbb;
}
.login_logo {
font-family: "Lobster", cursive;
font-size: 50px;
text-align: center;
}
.login_container {
display: flex;
flex-direction: column;
width: 537px;
}
.login_email,
.login_pw {
background-color: #fafafa;
padding: 10px;
font-size: 20px;
height: 72px;
width: 533px;
border-radius: 5px;
margin-bottom: 10px;
border: 1px solid #bbb;
}
.login_btn {
margin-top: 10px;
font-size: 22px;
padding: 10px;
border-radius: 5px;
background-color: #c0dffd;
border: 1px solid #bbb;
margin-bottom: 120px;
color: white;
height: 56px;
}
.passwordfind_link {
text-align: center;
font-size: 20px;
}
.login_btn:hover {
cursor: pointer;
}
- common.css 파일
* {
box-sizing: border-box;
}
- login.js 파일
'use strict';
const thisIsId_activity = document.getElementsByClassName('login_email')[0];
const thisIsPw_activity = document.getElementsByClassName('login_pw')[0];
thisIsPw_activity.addEventListener('keyup', function(e){
const id = document.querySelector('.login_email').value;
const password = document.querySelector('.login_pw').value;
if((id.length > 0)&&(password.length > 0) ){
let blueButton = document.querySelector('.login_btn');
blueButton.style.backgroundColor = '#0095F6';
}
});
IT 엔지니어를 향해 살아가는, 공부하는 기록들을 모아두고 있습니다.