๐ ์ฟต์ฟต๋ฐ ๊ฒ์
๐ค ์์๋
๐ค ์ฝ๋
<!DOCTYPE html>
<html lang="en">
<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><span id="order">1</span>๋ฒ์งธ ์ฐธ๊ฐ์</div>
<div>์ ์์ด:<span id="word"></span></div>
<input type="text">
<button>์
๋ ฅ</button>
<script>
//์ ์์ด
let word;
//์
๋ ฅํ๋ ๋จ์ด
let newWord;
//๋ฒํผ ํด๋ฆญ ์ด๋ฒคํธ
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
const $order = document.querySelector('#order');
//์์ํ๋ ์ธ์์ ๋ฌป๋ ๋ํ์ฐฝ
const number = Number(prompt('๋ช ๋ช
์ด ์ฐธ๊ฐํ๋?'));
if (number > 1){
alert(number+'๋ช
์
๋๋ค.');
} else if ( number == 0 || number == 1){
alert('์ทจ์๋์์ต๋๋ค. ์ธ์ ์๋ฅผ ๋ค์ ์
๋ ฅํด์ฃผ์ธ์');
};
const onClickButton = () => {
if ( newWord.length != 3 ) {
alert('3๊ธ์๋ก ์
๋ ฅํด์ฃผ์ธ์.');
}
else 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();
};
//์
๋ ฅํ ๋จ์ด๋ฅผ input ์ด๋ฒคํธ ์์์ newWord ๋ณ์์ ์ ์ฅ
const onInput = (event) => {
newWord = event.target.value;
};
$button.addEventListener('click',onClickButton);
$input.addEventListener('input',onInput);
</script>
</body>
</html>
๋๋ณด๊ธฐ
-(๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋๋ถ(TheBook): (์ฃผ)๋์์ถํ ๊ธธ๋ฒ์์ ์ ๊ณตํ๋ IT ๋์ ์ด๋ ์๋น์ค์ ๋๋ค.
thebook.io
-(๊ฐ์ข) ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ
[๋ฌด๋ฃ] [๋ฆฌ๋ด์ผ] ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ - ์ธํ๋ฐ | ๊ฐ์
๋ณธ ๊ฐ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ํ๋ก๊ทธ๋๋ฐ ์ฌ๊ณ ๋ ฅ์ ๊ธฐ๋ฅด๋ ์ฐ์ต์ ํฉ๋๋ค. ์น ๊ฒ์์ธ ๊ตฌ๊ตฌ๋จ์ ์์์ผ๋ก ๋๋ง์๊ธฐ, ์ซ์ ์ผ๊ตฌ, ๋ฐ์ ์๋ ํ ์คํธ, ํฑํํ , ๋ก๋ ์ถ์ฒจ๊ธฐ, ๊ฐ์๋ฐ์๋ณด, ์นด
www.inflearn.com
