Skip to content

My Chatbot #11

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
esyasar wants to merge 2 commits into
base: Elif-Sude-Yasar
Choose a base branch
from
Open

My Chatbot #11

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
5550e36
My Chatbot
esyasar Sep 15, 2019
4881e1e
chatbot homework correction
esyasar Sep 21, 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
30 changes: 30 additions & 0 deletions chatbot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@

// I created a variable to hold my index and initialized it as an object.
var myObject = {
Copy link
Collaborator

@epq epq Sep 24, 2019

Choose a reason for hiding this comment

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

You can use var if you like but there are some issues with using var so generally, it's preferred to use const or let. Here's an article that explains some of the issues with using var.

input: ["hello","how are you?", "what is your favorite color?"],
output: ["Hi", "Great!", "I have so many favorites it's hard to choose one."]
};

//This is for to check that I assigned the values correctly.
console.log(myObject);


function reply(){
// I accessed object property.

var question = document.querySelector("#oranges").value.toLowerCase();
console.log(question);

// I wrote a conditional statement to check if the value matches with question(input) and answer(output).
if(myObject.input.includes(question)){
Copy link
Collaborator

@epq epq Sep 24, 2019

Choose a reason for hiding this comment

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

This is very good. You can also only use the indexOf array method instead of using both includes and indexOf. indexOf returns -1 if the value is not found in the array so you can use this to check if the input is valid and get the index of the input.

Here's an example of how to do that:

  const index = myObject.input.indexOf(question);
  if (index !== -1) {
    let replyUser = myObject.output[index];
    document.querySelector("#output").textContent = replyUser;
  } else {
    document.querySelector("#output").textContent = "I don't understand that command. Please enter another";
  }

Another thing is that you should be mindful of adding whitespace when writing JavaScript to make sure your code is easy to read. Generally it helps to improve readability of your code if you follow these rules for adding whitespace: see here. You should be able to format your code with your code editor so you don't have to add the spacing manually.

For example, line 19 without spacing:

   if(myObject.input.includes(question)){

With spacing added (note the space added between the if keyword and the ( and the ) and the {

 if (myObject.input.includes(question)) {

let i = myObject.input.indexOf(question);
let replyUser = myObject.output[i];
document.querySelector("#output").textContent = replyUser;
}else{
//If user enter a different value, it will show "I don't understand that command. Please enter another".
document.querySelector("#output").textContent = "I don't understand that command. Please enter another";
}
}
reply
Copy link
Collaborator

@epq epq Sep 24, 2019

Choose a reason for hiding this comment

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

You can remove line 28 since you aren't using this value for anything.

//I attached an event to the button. That way, my js will work.
document.getElementById("submit").addEventListener("click", function() {reply()});
9 changes: 6 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,22 @@
<head>
<title>My First Chatbot</title>
<link rel="stylesheet" href="style.css">
<script src="chatbot.js" defer></script>

</head>

<body>
<div id="demo">
<h1>My first chatbot!</h1>
<h3>Talk to your bot!</h3>
<input id="input" type="text" placeholder="Say something" />
<input id="oranges" type="text" placeholder="Say something" />
Copy link
Collaborator

@epq epq Sep 24, 2019

Choose a reason for hiding this comment

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

Was this line just for testing?
Anyway, it's a good idea to give your ids meaningful names 😄

<button id="submit">Submit</button>
<h3>Chat history</h3>
<div id="chatBot">
<textarea id="output" name="ChatHistory" rows="15"></textarea>
</div>
</div>
</div>

</body>

</html>
</html>