Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
25 changes: 0 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,4 @@
# Week8 - Chatbot

See the instructions [here](https://docs.google.com/document/d/1123vh08osRkCyqsnyR0SQMC1n4l0DlDIS0OYSrPSlY0/edit?usp=sharing) for the first part of your chatbot, or read below:

**Due Date: Sunday, September 15 at 6:00 p.m.**

Complete the following assignment and create a pull request to GitHub for reviewing by the instructor.

The homework assignments for the next few lectures will be interconnected. By the end of JavaScript 2, you will have developed a fully functional chatbot. These assignments will build on the previous week's assignment, therefore, it is very important that you complete the assignment in a timely manner (i.e. by the due date).

## CHATBOT PART I

In this first assignment, you will begin by building a very simple chatbot. As you progress through the remaining JavaScript weeks, you will add more and more functionality to the chatbot.

You are provided the HTML and CSS code for this assignment in this repository. Your task will be to write the JavaScript portion to make the chatbot functional and interactive. Remember to add comments to your code, describing what it does.

1. In your JavaScript code, declare a variable and initialize it as an object.
2. Add two properties to the object: ‘input’ and ‘output’.
1. To the ‘input’ property/key assign a greeting or a question that you want the chatbot to reply to. Some examples are:
* Hello
* How are you?
* What is your favourite colour?
2. To the ‘output’ property/key assign answers to the greetings or questions you wrote in part a. Some examples to the inputs above are:
* Hi
* Great!
* I have so many favorites it's hard to choose one.
3. console.log() your variable to confirm that you have assigned the values correctly. If done correctly, you output should look similar to:
```js
{ input: 'input1', output: 'output1' }
Expand Down
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<head>
<title>My First Chatbot</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>

<body>
Expand Down
41 changes: 41 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
//object containing inputs and outputs arrays
let chatInputsOutputs = {
inputs: ['Hello', 'How are you?', 'What is your favourite colour?'],
outputs: [
'Hi',
'Great!',
"I have so many favorites it's hard to choose one.",
],
};
console.log(chatInputsOutputs);
console.log(chatInputsOutputs.inputs);
console.log(chatInputsOutputs.outputs);

function reply() {
let question = document.getElementById('input').value.toLowerCase();

console.log(question);

// statement to answer the question based on the index of the question.
if (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works just fine, but you can simplify it.
Since your question variable is converted to lowercase on line 15, you don't need to continue to call toLowerCase() on this variable.

Good job using map. You can save the result of chatInputsOutputs.inputs.map(v => v.toLowerCase() in a variable since you call this twice. It would also be easier to read.

question.toLowerCase() &&
chatInputsOutputs.inputs
.map(v => v.toLowerCase())
.includes(question.toLowerCase())
) {
let indexOfQuestion = chatInputsOutputs.inputs
.map(v => v.toLowerCase())
.indexOf(question.toLowerCase());
document.getElementById('output').value =
chatInputsOutputs.outputs[indexOfQuestion];
} else {
//when the input is not recognized
document.getElementById('output').value =
"I don't understand that command. Please enter another.";
}
}

document.getElementById('submit').addEventListener('click', function() {
console.log('submit clicked');
reply();
});