JavaScript - 미니 챗봇 🤖

 

Chat-Bot

 

단방향 소통만 가능한 미니 챗봇 페이지를 만들었다. 앞으로 멋진 쌍방향 챗봇이 될 것이다.

 

사용언어

HTML, CSS, JavaScript

 

화면 구성

 

1. 질문

Change Character 버튼을 누르면 이모지의 캐릭터를 랜덤으로 변경할 수 있다.

 

2. 입력창

텍스트를 입력하고 Send 버튼을 누르면 입력창이 리셋되고 새로운 질문을 가져온다.

 

리뷰

1. 이제 버튼을 누르면 랜덤으로 리스트에서 값을 가져오는 방법에 너무 익숙해졌기 때문에 다음 단계를 생각해봐야 한다. Send 버튼을 누르면 input 값을 저장해서 화면에 띄워주도록 만들어봐야겠다. 새로운 페이지에 대화창을 만들어서 채팅처럼 핑퐁대화가 될 수 있는 화면을 만들어볼 것이다.

2. 화면 로딩 후 질문텍스트 트랜지션처럼 인풋 border-bottom에 멋진 애니메이션을 추가하고싶다. 그라디언트 색상이 계속 움직이거나 왼쪽에서 오른쪽으로 슬라이드 하면서 나타나는 효과가 좋을 것 같다.

3. 캐릭터를 랜덤으로 받아오지 않고 눈으로 보고 선택하는 게 더 좋겠다. 캐릭터 버튼을 없애고 대화박스를 좀 더 위로 올리자.

4. Send 버튼 대신 엔터를 사용할 수 있게 수정하기.