이번 pair programing은 알고리즘 문제만 풀었던 1주차와는 다르게 이전까지 배운 내용을 토대로 계산기를 구현하는 과제였다. 어느정도 틀이 잡혀있는 계산기 코드를 제공받고, Bare Minimum → Advanced Challenges → Nightmare 단계로 점차 도전해 나가는 과정이다.

초기 제공받은 계산기는 어느정도 틀은 잡혀있는 콘솔로그만찍히는 계산기였다.
이걸 CSS, javascript를 이용하여 계산기를 구현하는 과정이였다.
나는 깔끔한 맥북 계산기를 구현해보고싶었다.

우선 내가 구현한 계산기이다.
계산기의 자세한 코드 관련 자료는 코드스테이츠의 소중한 저작권이기 포함되어 있기 때문에 풀이과정 정도만 공유해보겠다.

1. Bare Minimum(필수 과제)

숫자 버튼, 연산자 버튼, 숫자 버튼, 엔터 버튼을 순서대로 클릭했을 때, 화면에 숫자, 연산자, 숫자, =, 연산 결과가 순서대로 나타나야 한다.
우선 계산 기능을 가지고 있는 calculate 함수를 하나 만들어주고, 아직 배우지 않았지만 DOM기능을 이용하여 html element에 접근하여 문제를 푸는과정이였다.
Bare Minimum은 꽤나 쉽게 풀어졌다!!

//calculate 함수
//연산자가 + 일때 예시만 보여주겠다.
function calculate(n1, operator, n2) {
  let result = 0;
  n1 = Number(n1) //
  n2 = Number(n2)
  if(opreator === '+') {
    result = n1 + n2 }
  return string(result);
  
}

2. Advanced Challenges(도전 과제)

Advanced Challenges는 실제 계산기처럼 display(화면)가 있고, 버튼을 클릭할 때마다 화면의 숫자가 변경되면서 동작한다.

이계산기를 만들기 위해서는 여러가지 고려해야할점을 생각해봤는데 밑에와 같은 결과가나왔다.

// 1. 숫자 버튼을 눌렀을 때, 계산기의 화면에 숫자가 보여야 한다.
if(숫자를 클릭했을때) {
  if(디스플레이 === 0일경우) {
  }else if(저장된값이 === 연산자일 경우){ // 3. 연산자 버튼 이후 숫자를 클릭시 화면은 새로클릭되는 숫자로 디스플레이가 변경되어야 한다.
  }else if(디스플레이 !== 0일경우){
  }
}
// 2. 연산자 버튼을 눌렀을때 이미 디스플레이에 있는 숫자와 연산자를 저장해줄값이 필요하다.
if(연산자를 클릭했을때){
  연산자를 저장해줄 값 = '연산자';
  디스플레에있는 숫자를 저장해 줄 값 = 디스플레이에 있는 숫자;
}
// 4. enter클릭시 저장된 숫자와 현재 디스플레이에 보이는 숫자를 연산해줄 함수하나가 필요하며  디스플레이에는 연산된 결과값이 보여야 한다.
if(enter 클릭했을때) {
  Bare Minimum에서 사용했던 calculate함수 호출
  
}
// 5. AC 버튼을 누르면 모든 값이 초기화가 되어야 할것이고 display는 0만 보여야 할 것이다.
if(AC를 클릭했을때) {
  디스플레이는 = '0'
  모든값 = undefined;
}

Advanced Challenges는 꽤나 어려웠지만 하나씩 차근차근 결과를 콘솔창으로 확인하면서하면서 풀다보니 풀렸다!

3. Nightmare(도전 과제)

나이트 메어 과제는 엣지 케이스들이 더붙었는데 나는 소수점 구현까지밖에 해내지 못했다 ㅠㅠ..

if(소수점 클릭했을때) {
  if(만약 디스플레이 안에 .이 포함되어있지않다면) {
  }

⭐️사용한 CSS기능

Goolge Fonts (구글 폰트) 사용

1. 사이트 들어가기 (https://fonts.google.com/)
2. 구글 폰트 사이트에 들어갔다면, 원하는 폰트를 선택
   
3. 위 사진 1번 클릭웹사이트에 사용할 글꼴의 + Select this style을 클릭합니다.
4. 위 사진 2번 코드를 복사 후 사용할 프로젝트 HTML파일 Header 란에 붙여준다.
5. 위 사진 3번 복사 후 사용할 프로젝트 HTML과 연결되어있는 CSS파일에 적용할 부분에 복사한 코드를 붙여준다.

box shadow

CSS / box-shadow / 박스에 그림자 효과 만드는 속성
*위의 구현한 계산기 그림자 부분에서 확인가능

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

border-radius

요소 테두리 경계의 꼭짓점을 둥글게 만드는 속성
*위의 구현한 계산기 테두리 부분에서 확인 가능

border-radius: 1em/5em;
/* 아래와 같음 */
border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;
/* 아래와 같음 */
border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

가상셀렉터: active, :hover, :focus

:active를 이용하면 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경할 수 있습니다.
*위의 구현한 계산기 숫자 버튼 누르는 부분에서 확인 가능

.clear__and__enter > button:active {
  background-color: #645e5d; 
}

:focus마우스가 해당 요소를 클릭하면 다른 요소 클릭전까지 요소의 스타일 변경할 수 있습니다.
*위의 구현한 계산기 연산자 버튼 누르는 부분에서 확인 가능

.button__row > .operator:focus{
  outline: 2.3px solid black; 
}

:hover마우스가 해당 요소 위에 있을 때 요소의 스타일 변경할 수 있습니다.
*이부분은 구현 안했음.

.clear__and__enter > button:hover {
  background-color: #645e5d; 
}

nigthmare과제만 계속 보고있다가 앨리스의 토끼굴에 빠질듯하여.. 주말에 다시한번 봐야겠다!
아직 돔도 배우지않았으니 아직 학습하지 않은 개념에 대해서는 기술 부채로 쌓아두고 진행해야겠다!!
nightmare는 미래의 나에게 맡긴다..!