html
<!DOCTYPE html>
<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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- commnad + shift + p 로 들여쓰기 공백 설정 가능 -->
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
<script src="script.js"></script>
</body>
</html>script.js
const number = parseInt(prompt('몇명이 참가하나요?'),10); // number 변수에 참가자를 10진수 정수로 입력받는다.
const $button = document.querySelector('button'); //$button 변수에 버튼을 선택해 저장한다.
const $input = document.querySelector('input'); // $input 변수에 인풋상자를 선택해 저장한다.
const $word = document.querySelector('#word') // $word 변수에 span id:word 를 선택해 저장한다.
const $order = document.querySelector('#order') // $order 변수에 span id:order 를 선택해 저장한다.
let word; // 제시어
let newWord; // 새로 입력한 단어
const onClickButton = () => {
if(!word){ // 제시어가 비어있다면
word = newWord; // 입력한 단어가 제시어가 된다
$word.textContent = word; // span 같은 태그는 textContent 로
$input.value = ''; // input 같은 태그는 value 로 설정해줄 수 있다.
$input.focus();
let order = parseInt($order.textContent); // 현재순서
if (order + 1 > number) { // 현재순서에 1을 더한 값이 number 보다 큰가 ?
$order.textContent = 1;
}
else {
$order.textContent = order + 1;
}
} else {
if(word[word.length - 1] === newWord[0]){ // 제시어의 마지막 글자가 새로 입력한 단어의 첫 글자와 같은 경우
word = newWord;
$word.textContent = word; // 같은 작업
$input.value = '';
$input.focus();
let order = parseInt($order.textContent); // 현재순서
if (order + 1 > number) {
$order.textContent = 1;
}
else {
$order.textContent = order + 1;
}
} else {
alert('올바르지 않은 단어입니다.')
$input.value = ''; // input 같은 태그는 value 로 설정해줄 수 있다.
$input.focus();
}
}
}
const onInput = (event) => {
newWord = event.target.value;
}
$button.addEventListener('click', onClickButton); // const 선언 이후에 이벤트 리스너를 적용시켜야 되더라? 변수 초기화 안했다고 에러났음
$input.addEventListener('input', onInput);결과물
전혀 마음에 들지 않는다.
어찌저찌 완성을 하긴 했지만 거의 그냥 따라 친 느낌이다.
더 잘 만들 수 있을 것 같은데..
더 깔끔하고 정교하게 코딩할 수 있을 것 같은데..
이게 어떤 느낌이냐면
한국어로는 정말 유창하게 자기소개 10분이고 한시간이고 할 수 있을 것 같은데
무슨 듣도보도 못한 나라의 언어로 자기소개를 하라고 시키는 느낌이다.
코딩에 조금 더 익숙해진 후에 다시 고쳐보려고 한다.
미래의 나를 위해 개선사항을 좀 적어놓자면
-
'한글'만 입력을 받고싶다.
- 숫자, 영어, 심지어는 섞어서 써도 입력을 받는게 마음에 들지않는다.
조금 구글링 해봤는데 조금 어려워서 잘 이해가 가지 않았다.
- 숫자, 영어, 심지어는 섞어서 써도 입력을 받는게 마음에 들지않는다.
-
2글자 이상 8글자 미만일 경우에만 입력을 받고싶다.
- 이건 지금도 할 수 있는데 왜 하지 못했냐면...
'한글' 2글자 이상 8글자 미만 ! 이라는 조건을 어떻게 표현해야 할 지 갈피가 잡히지 않았다.
- 이건 지금도 할 수 있는데 왜 하지 못했냐면...
-
같은 함수의 반복은 하나로 묶어줄 수 있을 것 같은데
- 제시어를 입력받고 교체하는 일련의 과정을 하나의 함수로 만들어 놓고 추가해서
쓸 수 있을 것 같은데 막상 해보니까 잘 안됐다. - 분명 할 수 있는 방법이 있을 것 같은데 아직 배우지 못했나? 아니면 기억을 못하나?
- 제시어를 입력받고 교체하는 일련의 과정을 하나의 함수로 만들어 놓고 추가해서
-
올바른 단어를 입력하지 못했을때 게임오버가 됐다는 것을 좀 더 직관적으로 표현 해보고싶다.
- alert 함수가 아니라 게임오버 되면 화면을 빨간 화면으로 바꾼다던가,
- alert 이후에 다시 참가자를 입력받는 쪽으로 분기를 돌려보기도 했는데 밋밋했다.
-
버튼을 클릭이 아닌 엔터를 입력했을 경우에도 다음 단계로 진행됐으면 좋겠다.
- 반드시 클릭해야만 다음 단계로 진행되야 되는거 너무 불편하다.
- keypress 이벤트를 적용시키면 됐으려나 ?
-
순서도도 좀 더 정교하고 직관적으로 그릴 수 있었을텐데
- 순서도를 그려보는건 처음이었지만 순서도 그리는 것도 생각보다 굉장히 어려웠다.
- 생길 변수를 고려하는 것 보다 그 변수를 순서도로 연결하는 쪽이 훨씬 어려웠다.
그건 아직 프로그래밍 사고력이 모자라서 그런듯
-
실력이 모자르면 구글링을 해도 한계가 있더라
- 분명 구글에는 정답이 있는데 내가 그 정답이 왜 나오는지 이해를 못하면 아무 소용이 없다.
- 코드를 보고도 이게 어떻게 작동하는지, 왜 이렇게 사용해야 하는지를 이해해야 할 필요가 있다.
조금 답답해서 문제점을 적어봤는데
당연히 뉴비가 첫날부터 고인물 따라잡을 수 없고,
첫술에 배부를 수 없다는 것을 알지만..
욕심이 너무 많은가보다
힝
Always, we are friend 🧡