HTML
SCSS
Javascript
[웹 게임 Wordle!]
주요 기능
- 페이지가 로드될 때, 정답 랜덤 생성
- 정답에 포함된 철자일 경우, 노란색 표시
- 정답에 포함되고, 정확한 위치일 경우 초록색 표시
- 5번의 기회가 끝나거나, 정답을 맞추면 모달 결과창 생성
스마트폰에서의 플레이 고려
스마트폰의 경우, 영어 첫 글자를 대문자로 자동입력하는 경우가 많았습니다. toLowerCase() 메서드를 사용하여 자동으로 소문자로 바꾸어 주어 해결했습니다.
input의 한글 입력을 막기 위한 style 속성으로 ime-mode:disabled 가 있다는 것을 알았습니다.
하지만 더 검색해보니 이는 웹 표준에 어긋나기 때문에 사용하지 않는 것을 권장한다는 사실을 알았습니다.
이를 replace메서드와 정규식을 사용하여 알파벳이 아닐 경우 빈 문자열로 대체되도록 하였습니다.
이후 input.value 값이 빈 문자열이고, input의 index가 마지막이 아니면 다음 형제 요소의 input에 focus되도록 하여 해결했습니다.
input의 한글 입력을 막기 위한 style 속성으로 ime-mode:disabled 가 있다는 것을 알았습니다.
하지만 더 검색해보니 이는 웹 표준에 어긋나기 때문에 사용하지 않는 것을 권장한다는 사실을 알았습니다.
이를 replace메서드와 정규식을 사용하여 알파벳이 아닐 경우 빈 문자열로 대체되도록 하였습니다.
이후 input.value 값이 빈 문자열이고, input의 index가 마지막이 아니면 다음 형제 요소의 input에 focus되도록 하여 해결했습니다.
알게 된 점
innerHTML으로 새로운 노드를 추가했을 때, 기존 input 값이 보존되지 않고 초기화되는 문제가 있었습니다.
insertAdjacentHTML('beforeend', )를 사용하여 해결했습니다.
insertAdjacentHTML('beforeend', )를 사용하여 해결했습니다.