Skip to content

Chatbot3 #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
inanfatih wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Chatbot3 #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7f41af
chatbot v2
inanfatih Sep 23, 2019
0286554
chatbot3 completed
inanfatih Oct 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 0 additions & 53 deletions chatbot_style.css
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<!DOCTYPE HTML>
<head>
<title>My First Chatbot</title>
<link rel="stylesheet" type="text/css" href="chatbot_style.css">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>

<body>
Expand All @@ -13,7 +14,6 @@ <h3> Talk to your bot!</h3>
<div id="user">
<input id="input" type="text" placeholder="Say something" />
<button id="submit">Submit</button>

<input type="radio" name="filterType" class="filterType" id="random" value="Random" checked> Random
<input type="radio" name="filterType" class="filterType" id="shortest" value="Shortest Answer"> Shortest Answer
<input type="radio" name="filterType" class="filterType" id="longest" value="Longest Answer"> Longest Answer
Expand Down
88 changes: 88 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
//object containing inputs and outputs arrays
let chatInputsOutputs = [
{
inputs: ['Hello', 'Hi', 'Greetings'],
outputs: ['Hello', 'Hey', 'Greetings'],
},
{
inputs: [
'What is your favourite colour?',
'Who is your favourite HYF instructor?',
'Who is your role model?',
],
outputs: [
'I am not sure.',
'There are too many to choose from.',
'I like everyone.',
],
},
{
inputs: [
'How are you?',
'How is the weather today?',
'How is Canada doing in the Olympics?',
],
outputs: ['Fine', 'Great', 'Not so good'],
},
];

const randomNuberGenerator = () => Math.floor(Math.random() * 3);

console.log(chatInputsOutputs);

const answerRandom = item => {
return item[0].outputs[randomNuberGenerator()];
};
const answerShortest = item => {
return item[0].outputs.reduce((a, b) => (a.length < b.length ? a : b));
};
const answerLongest = item => {
return item[0].outputs.reduce((a, b) => (a.length > b.length ? a : b));
};

// reply function
const reply = selectedAnswer => {
let question = document.getElementById('input').value;

console.log(question);

document.getElementById('output').value +=
'You: ' + document.getElementById('input').value + '\n';

const filteredObject = chatInputsOutputs.filter(item => {
return item.inputs
.map(item => item.toLowerCase())
.includes(question.toLowerCase());
});

console.log('filteredobject', filteredObject);

if (filteredObject.length === 1) {
if (selectedAnswer === 1) {
document.getElementById('output').value +=
'Computer: ' + answerLongest(filteredObject) + '\n\n';
} else if (selectedAnswer === 2) {
document.getElementById('output').value +=
'Computer: ' + answerShortest(filteredObject) + '\n\n';
} else {
document.getElementById('output').value +=
'Computer: ' + answerRandom(filteredObject) + '\n\n';
}
} else {
//when the input is not recognized
document.getElementById('output').value +=
"Computer: I don't understand that command. Please enter another. \n\n";
}
};

// Event listener of submit button
document.getElementById('submit').addEventListener('click', function() {
let option = 0;
if (document.getElementById('longest').checked) {
option = 1;
} else if (document.getElementById('shortest').checked) {
option = 2;
}
console.log('submit clicked');
reply(option);
});
47 changes: 47 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
button {
font-family: Helvetica;
font-size: 10pt;
/*width: 92px;*/
}
textarea {
font-family: arial;
font-size: 10pt;
}
body {
color: #333;
background-color: #efefef;
font: 13px helvetica, arial, freesans, clean, sans-serif;
}
#demo {
width: 80%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 20px;

background-color: #f8f8f8;
border: 1px solid #ccc;
box-shadow: 0 0 10px #999;
line-height: 1.4em;
font: 13px helvetica, arial, freesans, clean, sans-serif;
color: black;
}
#demo #input {
padding: 8px;
font-size: 14px;
border: 1px solid #ddd;
width: 400px;
}
#demo textarea {
padding: 8px;
font-size: 14px;
border: 1px solid #ddd;
width: 800px;
}

input:focus {
outline: none;
}
textarea:focus {
outline: none;
}