<head>
<title>Chatbot</title>
</head>
<body>
<div id="container">
<a class="voice" href="#">Activate Voice</a>
</div>
</body>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #031321;
font-family: consolas;
color: black;;
}
a {
position: relative;
display: inline-block;
padding: 15px 30px;
color: #2196f3;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 24px;
overflow: hidden;
transition: 0.2s;
}
a:hover {
color: #255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
}
.chat-container {
border: 2px solid #dedede;
background-color: white;
border-radius: 10px;
padding: 10px;
margin: 10px auto;
width: 60%
}
.chat-container p {
background-color: white;
font-family: Helvetica;
}
/* Darker chat container */
.darker {
border-color: #ccc;
background-color: #c0ffee;
}
.darker p {
background-color: #c0ffee;
}
/* Clear floats */
.chat-container::after {
content: "";
clear: both;
display: table;
}
/* Style images */
.chat-container img {
float: left;
max-width: 60px;
max-height: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
/* Style the right image */
.chat-container img.right {
float: right;
margin-left: 20px;
margin-right:0;
}
/* Style time text */
.time-right {
float: right;
color: #aaa;
}
/* Style time text */
.time-left {
float: left;
color: #999;
}const voice = document.querySelector(".voice");
const voicetotext=document.querySelector(".voicetotext");
var city;
var ctemp;
var weatherType;
var h;
var windSpeed;
var con;
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition();;
const recorder = new SpeechRecognition();
function addHumanText(text){
const chatContainer=document.createElement("div");
chatContainer.classList.add("chat-container");
const chatBox=document.createElement("p");
chatBox.classList.add("voice2text");
const chatText=document.createTextNode(text);
chatBox.appendChild(chatText);
chatContainer.appendChild(chatBox);
return chatContainer;
}
function addBotText(text) {
const chatContainer1 = document.createElement("div");
chatContainer1.classList.add("chat-container");
chatContainer1.classList.add("darker");
const chatBox1 = document.createElement("p");
chatBox1.classList.add("voice2text");
const chatText1 = document.createTextNode(text);
chatBox1.appendChild(chatText1);
chatContainer1.appendChild(chatBox1);
return chatContainer1;
}
function botVoice(message)
{
const speech= new SpeechSynthesisUtterance();
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(position){
long=position.coords.longitude;
lat=position.coords.latitude;
var api = "https://fcc-weather-api.glitch.me/api/current?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude;
$.getJSON(api, function(data){
city=data.name;
h=data.main.humidity;
weatherType=data.weather[0].description;
ctemp=data.main.temp;
windSpeed=data.wind.speed;
con=data.sys.country;
console.log(city);
console.log(con);
})
})}
speech.text="Sorry! I didn't get that.";
if(message.includes("hello"))
{
speech.text="Hi! How are you?";
}
if(message.includes("hi"))
{
speech.text="Hello! how are you?";
}
if(message.includes('how are you')){
speech.text="I am fine, thanks. How are you?";
}
if(message.includes('fine')){
speech.text='Nice to hear that. Do you want to know your local weather report?';
}
if(message.includes('good')){
speech.text='Nice to hear that. Do you want to know your local weather report?';
}
if(message.includes('yes'))
{
speech.text="Your Curent location is "+city+" and country is India.Here's your local report: Temperature is "+ctemp +" degree celcius. Weather type is "+weatherType +". Humidity is "+h+". Wind speed is "+windSpeed+"km/hr";
}
if(message.includes('weather'))
{
speech.text="Your Curent location is "+city+" and country is "+con+" Here's your local report: Temperature is "+ctemp +" degree celcius weather type is "+weatherType +" humidity is "+h+" wind speed is "+windSpeed+" km/hr";
}
if(message.includes('love'))
{
speech.text="Nice! I am very happy to hear that!";
}
if(message.includes("madarchod"))
{
speech.text=" Unparliamentary language is not allowed!! Nikal laude Pehli fursat me Nikal!!"
}
if(message.includes("chod"))
{
speech.text=" Unparliamentary language is not allowed!! Nikal laude pehli fursat me Nikal!!"
}
if(message.includes("bhosdike"))
{
speech.text=" Unparliamentary language is not allowed!! Nikal laude Pehli fursat me Nikal!!"
}
if(message.includes("sala"))
{
speech.text=" Unparliamentary language is not allowed!! Nikal laude Pehli fursat me Nikal!!"
}
if(message.includes("gaandmarao"))
{
speech.text=" Unparliamentary language is not allowed!! Nikal laude Pehli fursat me Nikal!!"
}
if(message.includes("gand"))
{
speech.text=" Unparliamentary language is not allowed!! Nikal laude Pehli fursat me Nikal!!"
}
if(message.includes("gaand"))
{
speech.text=" Unparliamentary language is not allowed!! Nikal laude Pehli fursat me Nikal!!"
}
if(message.includes("gandmarao"))
{
speech.text=" Unparliamentary language is not allowed!! Nikal laude Pehli fursat me Nikal!!"
}
if(message.includes("marao"))
{
speech.text=" Unparliamentary language is not allowed!! Nikal laude Pehli fursat me Nikal!!"
}
if(message.includes("bhosdi"))
{
speech.text=" Unparliamentary language is not allowed!! Nikal laude Pehli fursat me Nikal!!"
}
if(message.includes("sorry"))
{
speech.text=" It's Ok!!"
}
if(message.includes("Gaurav"))
{
speech.text="He is my Master!! He created me!"
}
if(message.includes("Gaurav Singh"))
{
speech.text="He is my Master!! He created me!"
}
if(message.includes("thanks"))
{
speech.text="It's my pleasure!"
}
if(message.includes("Thank you"))
{
speech.text="It's my pleasure!"
}
if(message.includes("Thanks"))
{
speech.text="It's my pleasure!"
}
if(message.includes("thank you"))
{
speech.text="It's my pleasure!"
}
speech.volume=1;
speech.rate=1;
speech.pitch=1;
window.speechSynthesis.speak(speech);
var element=document.getElementById("container");
element.appendChild(addBotText(speech.text));
}
recorder.onstart = ()=>{
console.log('Voice is activated');
};
recorder.onresult=(event) => {
const resultIndex=event.resultIndex;
const transcript=event.results[resultIndex][0].transcript;
var element = document.getElementById("container");
element.appendChild(addHumanText(transcript));
botVoice(transcript);
};
voice.addEventListener('click', ()=>{
recorder.start();
});
External CSS
This Pen doesn't use any external CSS resources.