๊นํ๋ธ์ ์ฌ๋ ค์ผ ํ๋๋ฐ ๊ท์ฐฎ์์ ์ผ๋จ ๋ธ๋ก๊ทธ์ ๋จผ์ ํฌ์คํ
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>