비전공자 개발일기

Chatbot 본문

Javascript

Chatbot

HiroDaegu 2022. 7. 8. 22:10
728x90
SMALL

 

<!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>CHATBOT</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <div class="glass">  
    <h1>Ask Your Question??</h1>  
    <h2>Yeah,ask Some Question</h2>  
    <div class="input">  
     <input  
      type="text"  
      id="userBox"  
      onkeydown="if(event.keyCode == 13){ talk()}"  
      placeholder="Type your Question"  
     />  
    </div>  
    <p id="chatLog">Answer Appering Hear</p>  
   </div>  
</body>
</html>
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
 }  

 body {  
  width: 100vw;  
  height: 100vh;  
  font-family: sans-serif;  
  padding: 10em 10em;  
  background: url(./bg.jpg);  
  opacity: 0.5;  
  background-position: center;  
  background-repeat: no-repeat;  
  background-position: 100% 20%;  
  background-size: cover;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
 }  

 .glass {  
  width: 500px;  
  height: 400px;  
  background-color: #667ABA;  
  padding: 50px;  
  color: #FFF;  
  border-radius: 9px;  
  backdrop-filter: blur(50px);  
  border: 2px solid transparent;  
  background-clip: padding-box;  
  box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.3);  
  line-height: 1.5;  
  transform: translatey(-5%);  
  transition: transform 0.5s;  
 }  

 .glass-1 {  
  width: 500px;  
  height: 400px;  
  background-color: #667ABA;  
  padding: 50px;  
  color: rgb(122, 82, 82);  
  border-radius: 9px;  
  backdrop-filter: blur(50px);  
  border: 2px solid transparent;  
  background-clip: padding-box;  
  box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.3);  
  line-height: 1.5;  
  transform: translatey(-5%);  
  transition: transform 0.5s;  
  font-size: 1.7rem;  
 }  

 .glass h1 {  
  font-size: 1.5rem;  
  text-align: center;  
 }  
 .glass h2 {  
  font-size: 1rem;  
  margin-top: 20px;  
 }  

 .input {  
  width: 100%;  
  height: 70px;  
  overflow: hidden;  
  margin-top: 40px;  
 }  

 .input input {  
  width: 100%;  
  height: 70px;  
  border: none;  
  padding-left: 30px;  
  padding-top: 0;  
  outline: none;  
  font-size: 1.5rem;  
  border-radius: 20px;  
 }  

 .glass p {  
  font-size: 1.6rem;  
  margin-top: 30px;  
 }
function talk(){  
  var know = {  
   "누구" : "Hello, TonyStark here 💙",  
   "어떄" : "Good :)",  
   "뭐할까" : "Please Give us A Follow & Like.",  
   "팔로워" : "I have my family of 5000 members, i don't have follower ,have supportive Famiy👪 ",  
   "응" : "Thank You So Much ",  
   "안녕" : "Okay! Will meet soon.."  
  };  
  var user = document.getElementById('userBox').value;  
   document.getElementById('chatLog').innerHTML = user + "<br>";  
  if (user in know) {  
   document.getElementById('chatLog').innerHTML = know[user] + "<br>";  
  }else{  
   document.getElementById('chatLog').innerHTML = "Sorry,I didn't understand <br>";  
  }  
 }
728x90
LIST

'Javascript' 카테고리의 다른 글

Notification Bell  (0) 2022.07.27
Tic Tae Toc  (0) 2022.07.09
QR code Generator  (0) 2022.07.07
Heart Animation Effects  (0) 2022.07.06
Javascript Particles  (0) 2022.07.05
'Javascript' Related Articles more