말을 배우는 기능을 얻고 다른 기능을 잃었다
이전 기능을 살리는 작업도 필요할 듯
html
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="chatbot.css"/>
<script src="https://www.cssscript.com/demo/simple-typewriter-effect-pure-javascript-typewriterjs/typewriter.js"></script>
</head>
<body>
<div class="layout">
<img class="cat" src="지냥이.jpg">
<div class="type"></div>
<div id="cat_console" class="cat_says">
야옹! 말을 걸어달라냥!
</div>
<br>
<div class="input_layout">
<input type="text" id="console" class="input_style">
</div>
<div class="button" onclick=text_check()>
</div>
<script src="./chatbot.js"></script>
</div>
</body>
</html>JS
var app = document.getElementsByClassName('type')[0];
var typewriter = new Typewriter(app, {
loop: true,
});
typewriter
.typeString("지냥이에게 말을 걸어보자")
.pauseFor(1300)
.deleteAll()
.typeString("지냥이는 당신을 기다리고 있다")
.pauseFor(2500)
.start();
var json =
[
{
"question" : "지냥아",
"answer" : "지냥이 왜 불러~?"
},
{
"question" : "지냥이 손!",
"answer" : "손 말고 츄르 달라옹!"
}
]
var question = ""; //사용자의 질문을 임시 저장할 변수
var answer = ""; //사용자의 대답을 임시 저장할 변수
var key = 0; // 키 값을 이용하여 말을 배우는 상황인지 아닌지 판별합니다.
function text_check(){
var value = document.getElementById("console").value;
var reply = document.getElementById("cat_console");
if(key == 1){
if(value == "네"){
reply.innerHTML = "대답을 입력해주세요!";
key = 2;
}
else{
reply.innerHTML = "말을 배웠다 냥~!";
key = 0;
}
return;
}
if(key == 2){
answer = value; //전역변수 answer값에 사용자의 입력을 저장
push_json(); //json 데이터에 값을 추가하는 함수 (추후 생성)
}
for(let i = 0; i < json.length; i++){
if(value == json[i].question){
reply.innerHTML = json[i].answer;
return;
}
}
reply.innerHTML = "말을 가르쳐 주실래요?(네 or 아니요)";
question = value;
key = 1;
}
function push_json(){
json.push({question: `${question}`, answer: `${answer}`}); //json이라는 데이터에 값을 추가하는 push함수
document.getElementsByClassName("cat_console").innerHTML = "말을 배웠다 냥!";
key = 0; //키 값 0으로 초기화
}result
'교육 > 2022 모각코 코뮤니티 2월과정 - js' 카테고리의 다른 글
| 모각코2월-JS-후기 (1) | 2022.03.01 |
|---|---|
| 모각코2월-JS-14일차-챗봇4 (1) | 2022.03.01 |
| 모각코2월-JS-13일차-챗봇3 (1) | 2022.03.01 |
| 모각코2월-JS-12일차-챗봇2:배경색 (0) | 2022.02.22 |
| 모각코2월-JS-11일차-챗봇1 (0) | 2022.02.21 |
