11~14 QUIZ 챗봇 만들기

✅ 오늘의 문제 : 나만의 챗봇을 만들기

나만의 챗봇을 완성해보세요!

불끄고 켜기, 말 따라하기 기능

HTML

<body id="body">
    <div class="container">
        <div class="box-1">
            뀨ㅋ
        </div>
        <div class="box-2">
            <p>🦧</p>
        </div>
        <div class="box-3">
            <input type="text" class="chat_input"><br/>
            <button class="chat_btn">시키기</button>
        </div>
        <p>ex. 불꺼줘,불켜줘,따라해봐,그만해 뀨ㅋ</p>
    </div>
<body/>

JS

//챗봇만들기
const body = document.getElementById('body');
const chat = document.querySelector('.box-1');
const chatInput = document.querySelector('.chat_input');
const chatBtn = document.querySelector('.chat_btn');
let light =0;
let follow = 0;

chatBtn.addEventListener('click',()=>{
  chatInput.focus();
  let monkey = chatInput.value;
  if(monkey === '불꺼줘'){
    if(light==0){
      chat.innerText = '불꺼줘 뀨ㅋ?';
      light++;
      follow = 0;
    }else if(light >= 1){
      chat.innerText = 'ㅇㅋㅇㅋ꺼드림 뀨ㅋ';
      body.style.cssText  = 'color: white; background-color: black';
    }
  }else if(monkey === '불켜줘'){
    chat.innerText = '켜드림 뀨ㅋ'
    body.style = '';
  }

  if(monkey == '따라해봐'){
    follow = 0;
    if(follow == 0){
      follow++;
      console.log(follow)
      chat.innerText = '쌉가능 뀨ㅋ'
    }
    }else if(follow >= 1){
      console.log(follow)
      console.log(monkey)
      chat.innerText = monkey + '뀨ㅋ'; 
      if(monkey == '그만해 뀨ㅋ'){
        chat.innerText = '뀨ㅋ'
        follow = 0;
      }
  }
})
ManyToOne, OneToOne 연관관계 조회 최적화 V2(Better)(DTO)
vue3 swiper

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage