🚀 Application view

🏃 Calculator Sprint

• HTML
  • 계산기 형태 구조화
• Javascript
  • document.querySelector()
  • addEventListener()
    • event.target
    • target.classList
  • textContent 속성
  • 함수 호출
• CSS
  • UI / UX
    • flex box
    • background-image: linear-gradient()
    • box-shadow
  • BEM(Block Element Modifier)
    • container
    • calculator
    • calculator__display--bare
    • calculator__operend--left
    • calculator__operend--right
    • calculator__display--for-advanced
    • calculator__buttons
    • clear__and__enter
    • button__row

📌 Bare minimum requirements

• 처음 숫자 버튼을 클릭하면 첫 번째 화면에 클릭한 숫자가 출력
• 숫자 버튼, 연산자 버튼을 클릭한 순서대로 출력
• 숫자 버튼, 연산자 버튼, 숫자 버튼을 클릭한 순서대로 출력
• 숫자 버튼, 연산자 버튼, 숫자 버튼, Enter를 클릭하면 연산 결과 출력
• AC를 클릭하면 화면에 순서대로 0, +, 0, =, 0 출력

📌 Advanced challenges

• 숫자 버튼을 클릭하면 계산기 화면(display)에 숫자가 출력
• 숫자 버튼을 여러 번 클릭하면 순서대로 이어서(concatenation) 출력
• 연산자 버튼을 클릭하면 계산기 화면에 보이는 숫자를 따로 저장
• Enter를 클릭하면 따로 저장한 숫자와 화면에 보이는 숫자를 연산한 결과 출력
• AC를 클릭하면 초기화

📌 Nightmare

• calculate 함수 개선
  • parseInt()와 parseFloat()
  • 실수 계산
• Edge case
  • .(decimal) 버튼을 활용한 소수 입력
  • . 버튼은 처음 단 한 번만 입력
  • 정수없이 . 버튼과 숫자를 클릭하면 소수 출력 (.5 === 0.5)
  • Enter를 여러 번 클릭했을 때 previousNum을 활용해 재연산
  • 연산자 버튼을 연속적으로 눌러도 연산 값에 영향이 없어야 함
  • 연산자 버튼을 누르기 전 숫자 버튼을 누른 후 Enter를 눌러도 정상 작동
• CSS
  • flexbox를 활용한 버튼 정렬
  • 자바스크립트를 활용하여 요소에 클래스 추가하기
    • isPressed 클래스를 추가하여 연산자 버튼의 색 변경
  • CSS pseudo-class를 활용한 interactive한 버튼
    • :hover (마우스가 올라갔을 때)
    • :focus (마우스가 올라갔을 때)
    • :active (버튼이 눌러졌을 때)

❓ Discovered test case

• 연산 여러개를 한번에 하지 못함
• 소수점 단위로 값이 나왔을 때 두 줄로 줄바꿈 됨
• 모바일 터치 시에 hover 이벤트 최적화 안됨
• 모바일 터치 시에 연속된 숫자를 클릭할 때 화면 터치로 확대됨