Skip to content

Week8 Homework #9

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
HomamS wants to merge 1 commit into
base: Hamam-Alsamel
Choose a base branch
from
Open

Week8 Homework #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 25 additions & 0 deletions index.Js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
//here we are going to define and declare object and inside the object I define two arrays
const object = {
input:['Hello','How are you?','What is your favourite colour?'],
output:['Hi','Great!','I have so many favorites it hard to choose one']
};
console.log(object);
//here we define function called reply and this function will let the chatpot to give me the proper anwers based on the input the we give
function reply(){
Copy link
Collaborator

@epq epq Sep 23, 2019

Choose a reason for hiding this comment

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

We haven't talked about it so much in class, but generally it helps to improve readability in 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, here's your reply function with spacing added:

  function reply() {
    //I defince variable called question and I put inside this variable the value (input from user)
    let question = document.getElementById('input').value;
    //I used if statement to check the input and give the outpot
    if (object.input.includes(question)) {
      //here we define variable called i, inside this variable i checked the index of the input based on the location in array
      let i = object.input.indexOf(question);
      //last step is to give the output location based on the input location in the array
      document.getElementById('output').textContent = object.output[i];

    } else {
      document.getElementById('output').textContent = "I don't understand that command. Please enter another";

    }
  }

//I defince variable called question and I put inside this variable the value (input from user)
let question = document.getElementById('input').value;
//I used if statement to check the input and give the outpot
if(object.input.includes(question)){
Copy link
Collaborator

@epq epq Sep 23, 2019

Choose a reason for hiding this comment

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

You've written a good check for valid input. You can also only use the indexOf 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 we define variable called i, inside this variable i checked the index of the input based on the location in array
let i= object.input.indexOf(question);
//last step is to give the output location based on the input location in the array
document.getElementById('output').textContent = object.output[i];

}
else{
document.getElementById('output').textContent = "I don't understand that command. Please enter another";

}
}
//finally i used eventlessenors to activate the click button in chatBot
document.querySelector('button').addEventListener("click", reply);
7 changes: 5 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
<head>
<title>My First Chatbot</title>
<link rel="stylesheet" href="style.css">
<script src="index.js" defer></script>

</head>

<body>
Expand All @@ -13,8 +15,9 @@ <h3>Talk to your bot!</h3>
<h3>Chat history</h3>
<div id="chatBot">
<textarea id="output" name="ChatHistory" rows="15"></textarea>
</div>
</div>
</div>

</body>

</html>
</html>