Game-WORDLE part.2

키보드 버튼 추가하기

html구조

<div class="game-keyboard">
	<div class="first-row">
		<button class="key-btn text-btn">q</button>
		<button class="key-btn text-btn">w</button>
		<button class="key-btn text-btn">e</button>
		<button class="key-btn text-btn">r</button>
		<button class="key-btn text-btn">t</button>
		<button class="key-btn text-btn">y</button>
		<button class="key-btn text-btn">u</button>
		<button class="key-btn text-btn">i</button>
		<button class="key-btn text-btn">o</button>
		<button class="key-btn text-btn">p</button>
	</div>
	<div class="secon-row">
		<button class="key-btn text-btn">a</button>
		<button class="key-btn text-btn">s</button>
		<button class="key-btn text-btn">d</button>
		<button class="key-btn text-btn">f</button>
		<button class="key-btn text-btn">h</button>
		<button class="key-btn text-btn">j</button>
		<button class="key-btn text-btn">k</button>
		<button class="key-btn text-btn">l</button>
	</div>
	<div class="thir-row">
		<button class="key-btn del">Del</button>
		<button class="key-btn text-btn">z</button>
		<button class="key-btn text-btn">x</button>
		<button class="key-btn text-btn">c</button>
		<button class="key-btn text-btn">v</button>
		<button class="key-btn text-btn">b</button>
		<button class="key-btn text-btn">n</button>
		<button class="key-btn text-btn">m</button>
		<button class="key-btn enter">Enter</button>
	</div>
</div>

버튼 가져오기

let buttons = Array.from(document.querySelectorAll('.game-keyboard .key-btn'))
const delBtn = document.querySelector('.del')
const enterBtn = document.querySelector('.enter')

querySelectorAll로 가져오면 유사배열이기때문에 배열메소드가 안 먹힐때가 있다

Arry.from()으로 배열로 만들어 준다

버튼 클릭 이벤트

buttons.map((e) => {
	e.addEventListener('click', (btn) => {
		let btnTarget = btn.target
		// event.target 은 누른 버튼이 무엇인지 알려준다
		let btnText = btn.target.textContent
		// 누른 버튼 안에 들어있는 텍스트를 저장한다
		let upperCaseBtn = btnText.toUpperCase()
		// html에 버튼을 소문자로 작성 했기때문에 대문자화 해준다
		// 정답 단어가 대문자이기 때문에 비교시 대문자여야 한다

		if (btnTarget !== delBtn && btnTarget !== enterBtn) {
			// querySelectoAll 로 받아온 버튼에 delete와 enter도 포함 되어있다
			// del 과 enter 버튼을 제외한 나머지 버튼만 동작 하도록 조건을 만들어준다
			if (tileNum < word.legnth) {
				let curTile = rowArr[boardRow].children[tileNum]
				if (curTile.textContent === '') {
					curTile.textContet = upperCaseBtn
					tileNum++
				}
			}
		} else if (btnTarget === delBtn) {
			if (tileNum > 0 && tileNum <= word.legnth) {
				tileNum--
			}
			let curTile = rowArr[boardRow].children[tileNum]
			curTile.textContet = ''
		} else if (btnTarget === enterBtn && tileNum === word.legnth) {
			gameCheck()
			bordRow++
			tileNum = 0
		}
	})
})

안쪽의 로직은 키보드로직과 동일하다

누르는 버튼의 타켓이 del 인지 enter인지 아니면 일반 텍스트 인지만 구분해주면 된다!