<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><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();
}
};
const onInput = () => {
newWord = event.target.value;
};
$button.addEventListener('click', onClickEvent);
$input.addEventListener('input', onInput);
</script>
</body>
</html>ㅠㅠㅠㅠㅠ인프런강의 중 셀프 체크라해서 셀프니까 내 힘으로 쉽게 할수있으려나 하고 호기롭게 시작하였으나
결국 구글링의 힘을 빌렸다.
이렇게 하면 작동할것인가 여러번 시도하면서 코드 한줄 한줄의 중요성을 뼈저리게 느낀 경험이였다.
'하찮은 개발일지' 카테고리의 다른 글
| css 배경이미지 설정 (0) | 2022.09.25 |
|---|---|
| 22.07.18 날씨 api 사용 (0) | 2022.07.18 |
| 2022.07.18 버튼을 눌러 삭제하는 기능 (0) | 2022.07.18 |
| 22.07.15 백그라운드 외.. (0) | 2022.07.15 |
| 2022.07.14 clock. (0) | 2022.07.14 |