[Project] Webucks Clone Coding #5 [커피 상세 페이지 기능 구현]

Wook·2021년 11월 28일
0

📍 What About?


💡 그동안 배운 `HTML`과 `CSS`, 그리고 `JavaScript`를 활용한 위코드 첫 프로젝트가 주어졌다. 프론트엔드 역량을 다지기 위해 스타벅스 페이지를 클론하면서 `HTML`과 `CSS`의 개념을 웹 페이지 개발에 적용하고, JavaScript` 기능을 구현하는 것을 목표로 하며, 별개의 학습 목표도 주어졌다.

⚡️ 학습 목표


  1. HTML 태그를 적절하게 사용하여 페이지 레이아웃을 스스로 구현할 수 있다.
  2. CSS 기초 개념을 활용하여 원하는 디자인을 요소에 적용할 수 있다.
  3. 개발자 도구를 활용하여 실제 페이지 레이아웃의 구성과 적용된 스타일을 확인할 수 있고 필요한 정보를 얻을 수있다.
  4. 로그인 기능을 구현하며 input 태그 활용법에 대해 익힌다.
  5. 과제에서 JavaScript로 여러 기능을 구현하여 DOM의 요소를 조작할 수 있다.
  6. 기본적인 git flow를 이해하고 PR을 작성하여 github을 통한 코드 리뷰 방식을 이해한다.

🌈 My Thoughts

그 동안 배운 HTML, CSS 의 학습내용을 모두 이용해서 Starbucks 홈페이지와 유사한 웹페이지를 만들고, JavaScript을 구현하여 기능들을 구현하는 프로젝트였으며, 드디어 공부한 내용을 활용하여 프로젝트를 할 수 있다는 생각에 신나기까지 했다. 프론트엔드에서 HTML,CSS,JavaScript는 초반부이며 전반적인 내용이지만, 프로젝트를 진행하면서 내가 부족한 부분이나 미숙한 부분을 점검하면서 더 성장할 기회를 준 시간이었던 것 같다. 이 글을 작성하는 시점은 모든 프로젝트의 내용 구현을 마친 후에 내 자신을 돌아보기 위한 회고록이자 프로젝트에 모든 내용과 나 자신을 되돌아 보기 위한 피드백이기도 하다.


📲 로그인 페이지 기능 구현

이전에 구현한 로그인 페이지 레이아웃에 JavaScript를 활용하여 위와 같은 기능을 구현하는 단계이다. input의 border 관련 이벤트를 추가해주고, 로그인과 비밀번호 입력 단계에서 조건이 맞춰줬을 때 로그인 버튼을 활성화 시키는 작업을 진행하였다. 이메일과 패스워드의 조건은 정규 표현식을 사용하여 조건이 부합할 때에만 로그인 버튼이 활성화되게 해주었다.

🐳 My Code


<HTML>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>webucks</title>
  <link href="styles/login.css" rel="stylesheet" type="text/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=Dancing+Script&display=swap" rel="stylesheet">
</head>

<body>
  <section>

    <h1>WeBucks</h1>
    <div class="input">
      <input type="text" placeholder="전화번호, 사용자 이름 또는 이메일" class="userid">
    </div>

    <div class="input">
      <input type="password" placeholder="비밀번호" class="pw">
      <button class="show">show</button>
      <button class="hide">show&hide</button>
    </div>

    <div class="btn">
      <button class="but" disabled>로그인</button>
    </div>

    <div class="forget">
      <a href="">비밀번호를 잊으셨나요?</a>
    </div>

  </section>
</body>

<script src="js/login.js">
</script>

</html>

<CSS>

*{
  box-sizing: border-box;
}

h1{
  display:flex;
  justify-content:center;
  margin-top :10%;
  font-style: Regular 400;
  font-family: 'Dancing Script', cursive;
  font-size : 100px;
  font-weight :bold;
  margin-bottom:20px;
}

.input{
  display :flex;
  justify-content: center;
  position : relative;
}

input{
  margin-top:15px;
  padding: 12px 10px;
  border-radius :5px ;
  border : 1px solid lightgray;
  width:32%;
  background-color:#F7F7F7;
  color:gray;
}

.btn{
  display : flex;
  justify-content: center;
  margin-top:20px;
}

.but{
  height:45px;
  width:32%;
  border-radius:10px;
  border:none;
  color:white;
  background-color:#ADD3EB;
  font-size :17px;
}

.but:enabled{
  background-color: blue;
  cursor : pointer;
}


.forget {
  display : flex;
  justify-content: center;
  margin-top:170px;
  color : #62b6ea;
  font-weight:bold;
}

a{
  color: blue;
  text-decoration: none;
}



input:focus{
  outline : none;
} /* 포커스 시 아웃라인 없애줌 */

.show{
  position : absolute;
  right : 37%;
  top : 25px;
  font-size : 11px;
  margin-right : 1px;
  padding : 1;
}

.hide {
  position : absolute;
  right : 34%;
  top : 25px;
  font-size : 11px;
  padding : 1;
  margin-right : 5px;
}

<JavaScript>

const emailForm = document.querySelector('.userid'); // 이메일 입력창
const passwordForm = document.querySelector('.pw'); // 패스워드 입력창
const loginButton = document.querySelector('button'); // 로그인 버튼
var reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/; // 이메일 조건식
var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; //패스워드 조건식



emailForm.addEventListener('keyup', () => { // 이메일 입력창에 'keyup' 이벤트가 작동할 때
  if (emailForm.value.match(regExp) != null) {
    emailForm.style.border = "2px solid green";
  }
  else {
    emailForm.style.border = "1px solid lightgray";
  }
  if (true === reg.test(passwordForm.value)) {
    passwordForm.style.border = "2px solid green";
  }
  else {
    passwordForm.style.border = "1px solid lightgray";
  }
  if (emailForm.style.border === "2px solid green" && passwordForm.style.border === "2px solid green") {
    loginButton.disabled = false;
  }
  else { loginButton.disabled = true; }
});



passwordForm.addEventListener('keyup', () => { //패스워드 입력창에 'keyup' 이벤트가 작동할 때
  if (emailForm.value.match(regExp) != null) {
    emailForm.style.border = "2px solid green";
  }
  else {
    emailForm.style.border = "1px solid lightgray";
  }

  if (true === reg.test(passwordForm.value)) {
    passwordForm.style.border = "2px solid green";
  }
  else {
    passwordForm.style.border = "1px solid lightgray";
  }
  if (emailForm.style.border === "2px solid green" && passwordForm.style.border === "2px solid green") {
    loginButton.disabled = false;
  }
  else { loginButton.disabled = true; }

});



let showandhide = document.getElementsByClassName("hide")[0]; // show&hide button


showandhide.disabled = false; //버튼 항상 활성화


showandhide.addEventListener("click", () => {

  if (passwordForm.type === "text") {
    passwordForm.type = "password";
    return;
  }
  else if (passwordForm.type === "password") {
    passwordForm.type = "text";
    return;
  }
});
/* 버튼이 입력될 때 password type이면 text, text type이면 password type으로 속성을 변경해주고,
visualiity를 조건마다 변경시켜준다. */

📲 구현 화면

"초기 화면"

"입력 화면"

"show&hide 구현 화면"


⛳️ 회고

JavaScript를 활용하여 만들어둔 로그인 페이지에 생동감을 불어주는 작업을 수행하였다. 우선, 로그인 버튼은 초기부터 비활성화로 설정해준 후, 이메일과 패스워드가 조건에 부합할 경우에만, 로그인 버튼이 활성화되도록 설정해주었다. 이메일은 이메일 형식, 패스워드는 "영소문자, 영대문자, 숫자, 특수문자 포함 8자리 이상" 일 경우에 각각 입력창의 테두리를 초록색으로 변경해주고, 입력창이 모두 초록색이 되었을 때, 버튼이 활성화되도록 JavaScript코드를 설정해주었다. 생소했던 정규표현식을 학습하여 이메일과 패스워드의 조건과 이벤트핸들러를 구현할 수 있었고, 로그인 버튼의 활성화는 원래 학습했던 JavaScript를 통해 쉽게 구현할 수 있었다.

profile
지속적으로 성장하고 발전하는 진취적인 태도를 가진 개발자의 삶을 추구합니다.

0개의 댓글