모각코+/Javascript
[모각코+] 자바스크립트 12월과정 12일차
Jshrewd
2022. 1. 4. 18:50
728x90
https://cafe.naver.com/codeuniv/57127
[모각코+ 출석 인증] 12일차 - 웹 자바스크립트 12월 과정 A조
대한민국 모임의 시작, 네이버 카페
cafe.naver.com
11~15일은 챗봇 만들기 프로젝트로 진행됩니다!
오늘은 window.open을 이용해 특정 단어 입력 시 새 창으로 연결등의 기능과 다양한 대화를 조금 더 추가했어요 !
다음 일차에서는 특정 키워드만 인식 시에 대화할 수 있도록 해보겠습니다 :D 너무 길어서 CSS 파일은 제외할게요 !
HTML 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chat Bot</title>
<link rel="stylesheet" href="./day11-15.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Single+Day&display=swap');
</style>
</head>
<body id = "context">
<div class="layout">
<div id="cat_says">
쿨쿨쿨...
</div>
<div id="apeach">
</div>
<div class="input_layout">
<input type="text" id="text_input" class="input_style" placeholder="어피치에게 메세지를 보내주세요!">
</div>
<div class="w-btn-outline w-btn-pink-outline" onclick=check_text()>
시키기
</div>
</div>
</body>
<script src="./day11-15.js"></script>
</html>JS 파일
let apeachUrl = "./getupapeach.jpg";
let apeachSleepUrl = "./sleepapeach.JPG";
let apeachEatUrl = "./eatapeach.jfif";
let apeachIntroUrl = "./introapeach.jfif";
let apeachCodingUrl = "./codingapeach.png";
let apeachState = document.getElementById("apeach");
let apeachsays = document.getElementById("cat_says");
let body = document.getElementById("context");
let loginmsg = "큐셀님, 안녕하세요!";
let negamsg = "우...웅..? 무슨말이야..?";
function check_text(){
let value = document.getElementById("text_input").value;
if(value=="일어나!"){
body.style.backgroundColor = "white"
apeachState.style.backgroundImage = "url('" + apeachUrl + "')";
change_text();
console.log(loginmsg);
}
else if(value=="불꺼줘!"){
body.style.backgroundColor = "#fcecf2"
apeachState.style.backgroundImage = "url('" + apeachSleepUrl + "')";
apeachsays.innerHTML = "나는 자러갈게..!";
}
else if(value=="뭐 먹어?"){
apeachState.style.backgroundImage = "url('" + apeachEatUrl + "')";
apeachsays.innerHTML = "복숭아를 먹지요~";
}
else if(value=="이름이 뭐야?"){
apeachState.style.backgroundImage = "url('" + apeachIntroUrl + "')";
apeachsays.innerHTML = "내 이름은 어피치야!";
}
else if(value=="모각코 켜줘!"){
apeachState.style.backgroundImage = "url('" + apeachCodingUrl + "')";
apeachsays.innerHTML = "너 코딩하려는구나 ~? 잠시만 기다려 !";
setTimeout(function(){
window.open("https://cafe.naver.com/codeuniv", "코뮤니티 모각코", "width=800, height=700, toolbar=no, menubar=no, scrollbars=no, resizable=yes");
},2000);
}
else {
apeachsays.innerHTML = negamsg;
console.log(negamsg);
}
}
function change_text(){
apeachsays.innerHTML = loginmsg;
}
728x90