1. 계획
- 처음에 참여 인원을 결정한다.
- 참여 인원 설정 안 하면 코드 동작 X
- 3글자만 입력 가능하게 설정
- 이전 단어의 끝과 다음 단어의 시작 글자가 일치해야 한다.
2. 순서도
3. 코드 작성
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>공포의 쿵쿵따</title>
</head>
<body>
<div id = "title">쿵쿵따 게임</div>
<div><span id = "order">1</span>번 참가자</div>
<div>제시어 : <span id = "word"></span></div>
<input type="text">
<button>제출</button>
<script>
const number = Number(prompt('참가 인원을 입력해 주세요.'));
const $order = document.querySelector('#order');
const $input = document.querySelector('input');
const $button = document.querySelector('button');
const $word = document.querySelector('#word');
//기존 제시어
let word; //제시어
let newWord; //새로운 제시어
const onClickEvent = () => {
if(number) {
if(!word || word[2]===newWord[0]){
if(newWord.length===3){
word = newWord;
$word.textContent = word;
const order = Number($order.textContent);
if(order+1 > number){
$order.textContent = 1;
} else {
$order.textContent = order +1;
}
} else {
alert('세 글자 단어를 입력하세요.');
}
} else {
alert('틀렸습니다.');
}
$input.value = '';
$input.focus();
} else {
alert('참가 인원을 정해주세요.')
}
};
const onInput = () => {
newWord = event.target.value;
};
$button.addEventListener('click', onClickEvent);
$input.addEventListener('input', onInput);
</script>
</body>
</html>순서도나 코드 작성은 강의 내용과 거의 똑같이 따라 했다.
<div> 태그와 <span> 태그를 어떻게 사용할지 미리 구상하는 작업과
변수를 선언하고, ID를 부여하여 자유자재로 프로그램을 제어하는 게 아직은 어렵기만 하다.
* 출처 : https://youtu.be/LXt1MoxQqSs