깃허브에 올려야 하는데 귀찮아서 일단 블로그에 먼저 포스팅
1. 시작
2. 몇 명이 참가할 지 선택 prompt
3. 참가자 순서 number
4. 제시어 저장할 변수 word
5. 입력한 단어를 저장할 변수 newWord
input 이벤트로 단어 입력 -> 입력 버튼 클릭 -> 입력 단어 newWord에 저장
판단1_제시어가 비어 있는가?
판단2_입력한 단어가 올바른 단어인가? (앞 단어의 마지막 글자랑 일치하는가)
| 판단1 | 판단2 | 결과 |
| 제시어가 비어있음 | 입력한 단어가 제시어 | |
| 제시어가 비어있음 | 입력한 단어가 제시어 | |
| 제시어가 비어있지 않음 | 단어가 올바르다 | 입력한 단어가 제시어 |
| 제시어가 비어있지 않음 | 단어가 올바르지 않다 | 올바른 단어 입력하라고 알림창 띄우기 |
No -> alert('올바른 단어 입력')
Yes -> 입력된 단어가 제시어 -> 다음 사람에게 순서 넘기기 -> 입력창 비우고 커서 두기 -> 대기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>끝말잇기</title>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
<script>
const number = prompt('How many players?');
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
const $order = document.querySelector('#order');
let word; // 제시어
let newWord; // 현재 단어
const onClickButton = () => {
if (newWord.length != 3) { // 세글자가 아니다
alert('3글자만 입력행!');
return;
}
if (!word || word[word.length-1] === newWord[0]) {
// 제시어가 비어 있거나 입력한 단어가 올바른가?
word = newWord; // 입력한 단어가 제시어가 된다
$word.textContent = word; // 화면에 제시어 표시
const order = Number($order.textContent);
if (order + 1 > number) {
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
} else { // 올바르지 않다
alert('올바른 단어가 아니네~?!');
}
$input.value='';
$input.focus();
};
const onInput = (event) => {
newWord = event.target.value; // 입력한 단어를 현재 단어로
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
</script>
</body>
</html>'JavaScript' 카테고리의 다른 글
| [자바스크립트] html/css/js로 계산기 만들기 제2탄 🧙🏻♀️✨ (12) | 2024.11.08 |
|---|---|
| [자바스크립트] html/css/js로 계산기 만들기 제1탄 🧙🏻♀️✨ (5) | 2024.11.08 |
| [JavaScript] Windows10 자바스크립트 팝업창이 무한 로딩 / 무한 팝업 될 때 해결법 (12) | 2024.11.07 |
| [JavaScript] 자바스크립트 비동기 처리 promise then vs async await 차이점 (1) | 2024.05.23 |
| [Javascript] screen, location, history, navigator 객체와 속성 (+메서드) (0) | 2024.04.29 |
