🚀 시작하기
- 파일 설정
힌트가 필요한 경우: script.js 사용
힌트 없이 도전하려면:
// <script src="script.js"></script>
<script src="script-nohint.js"></script>- 브라우저에서 열기
- index.html 파일을 브라우저에서 열어 코드 베이스를 확인합니다.
CSS-1: 기본 버튼 호버 효과
모든 버튼에 마우스 오버 시 색상 변화와 크기 확대 효과를 추가해 보세요.
CSS-2: 연산자 버튼 호버 효과
연산자 버튼에 호버 시 더 진한 빨간색으로 변경하는 스타일을 작성해 보세요.
CSS-3: 등호(=) 버튼 호버 효과
등호 버튼에 마우스 오버 시 더 진한 녹색으로 변경되도록 구현해 보세요.
CSS-4: 클리어(C) 버튼 호버 효과
클리어 버튼에 CSS 선택자를 활용하여 호버 시 배경색을 노란색으로 변경해 보세요.
JS-1: 숫자 입력 함수 (appendNumber)
화면 리셋 상태를 확인하고 숫자를 입력하는 함수를 구현해 보세요.
JS-2: 연산자 입력 함수 (appendOperator)
연산자 버튼 클릭 시 연속 계산과 상태 관리를 처리하는 함수를 작성해 보세요.
JS-3: 계산 함수 (calculate)
사칙연산을 수행하고 결과를 화면에 출력하는 함수를 완성해 보세요. (0으로 나누기 예외 처리 포함)
JS-4: 소수점 추가 함수 (appendDecimal) - 도전 과제
소수점 중복 입력을 방지하면서 소수점을 추가하는 함수를 구현해 보세요.
CSS-5: 다크/라이트 테마 토글
CSS 변수와 JavaScript로 테마 전환 기능을 구현해 보세요.
로컬스토리지에 사용자의 선호 테마를 저장하고 복원하는 기능을 추가해 보세요.
JS-6: 계산 히스토리
이전 계산 내역을 배열로 저장하고 화면에 표시하는 기능을 만들어 보세요.
"2 + 3 = 5" 형태로 히스토리를 출력하도록 구현해 보세요.
JS-9: 괄호 연산
우선순위가 있는 복합 계산 (예: 2 + 3 * 4)을 처리할 수 있도록 확장해 보세요.
괄호 처리 및 올바른 계산 순서를 관리하는 로직을 구현해 보세요.
**JS-14: 계산기 설정 메뉴**
소수점 자릿수를 사용자가 설정할 수 있는 기능을 추가해 보세요.
천 단위 구분 쉼표 표시 옵션을 구현해 보세요.
🔧 주요 개념
전역 변수
javascriptlet currentInput = '0'; // 현재 화면에 표시된 값
let previousInput = ''; // 이전에 입력된 값
let operation = null; // 현재 선택된 연산자
let shouldResetScreen = false; // 화면 리셋 필요 여부
핵심 함수
updateDisplay(): 화면 업데이트
clearDisplay(): 모든 값 초기화
appendNumber(number): 숫자 입력 처리
appendOperator(op): 연산자 입력 처리
calculate(): 계산 실행
appendDecimal(): 소수점 입력 처리
💡 힌트 및 팁
클릭하여 힌트 보기/숨기기
CSS 힌트:hover 선택자를 사용해 마우스 오버 효과 구현
transition 속성으로 부드러운 애니메이션 효과
transform: scale() 로 크기 변화 효과
JavaScript 힌트
parseFloat(): 문자열을 숫자로 변환
toString(): 숫자를 문자열로 변환
includes(): 문자열 포함 여부 확인 switch문 또는if-else` 로 연산자별 분기 처리
심화 문제 힌트
테마 토글: document.documentElement.style.setProperty(), localStorage.setItem()
계산 히스토리: 배열 push(), innerHTML 또는 appendChild()
괄호 연산: eval() 함수 또는 수식 파싱 알고리즘
설정 메뉴: toFixed(), toLocaleString(), 이벤트 리스너
🎯 구현한 기능을 점검해 볼까요?
✅ 기본 사칙연산 (+, -, ×, ÷)
✅ 소수점 계산
✅ 연속 계산
✅ 클리어 기능
✅ 0으로 나누기 예외 처리
✅ 반응형 버튼 호버 효과