[JS] 02. 숫자 기억 게임 만들기

<1> 요구사항

숫자 기억 게임 만들기 🔢

1. 숫자를 기억하고 맞추는 숫자 기억 게임을 만듭니다.
2. 시작 버튼 클릭 시 1000 ~ 9999의 숫자가 무작위로 나타납니다. 이때, 3초 뒤에 숫자가 다시 사라집니다.
3. 사용자가 숫자를 입력하고, 제출 버튼을 통해 정답 유무를 확인합니다.
   a. 정답 시 “정답입니다!”를 노출합니다.
   b. 오답 시 “오답입니다. 정답은 [정답숫자]입니다.”를 노출합니다.
4. (선택 사항) CSS로 간단한 스타일을 적용합니다.
5. (선택 사항) 사용자 경험을 향상시키기 위한 기능을 추가합니다. (e.g. 남은 시간초 노출, 텍스트 입력 시 안내 문구 노출, 점수 표시 등)

<2> 사전 설계

프론트엔드 단에 필요한 ui?

필수요소

• 숫자 기억 게임 타이틀 및 지시문 텍스트
• 시작 버튼 + 시작 버튼 누를 시 팝업되었다 사라질 숫자 텍스트
• 정답 입력 창 + 제출 버튼
• 제출 결과에 대한 피드백 보여줄 텍스트

<3> 중간 단계

원래 작업 흐름은 필수 요구사항부터 JS 코드로 구현부터 끝내고 CSS나 기타 옵셔널한 요구사항을 구현했어야 하는데 익숙하지 않은 프론트 엔드를 꾸미느라 생각보다 시간을 많이 지체했다. 다음 시간에 이어서 진행해야 겠다.

오후에 다시 작업 (개인 용무로 다음날 불참하게 되어 미리 작업)

<4> 결과물

<5> 막혔던 점

특정 UI에 대해서 디스플레이를 보여주기/숨기기를 할 때에 처음에

XXX_container.style.display = 'block';
XXX_container.style.display = 'none';

을 이용했을 때에는,

나는 flexbox를 이용했기 때문에 요소를 보이기/숨기기를 할 때 해당 영역의 css의 display 속성이 변경되면서 flexbox의 정렬이 깨지는 문제가 나타났다.

따라서 display가 아닌 visibility 속성을 이용하는 것으로 핸들링 가능했다.