Skip to content

week8 homework submission #7

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
hamzakoc wants to merge 6 commits into
base: Hamza-Koc
Choose a base branch
from
Open

week8 homework submission #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2b9d08e
week8 homework submission
hamzakoc Sep 15, 2019
4958f72
Set theme jekyll-theme-merlot
hamzakoc Apr 26, 2021
a86bb43
Delete _config.yml
hamzakoc Apr 26, 2021
9d5748a
Set theme jekyll-theme-slate
hamzakoc Apr 26, 2021
b99c7f6
Update README.md
hamzakoc Apr 26, 2021
56fb36c
Update README.md
hamzakoc Apr 26, 2021
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
32 changes: 2 additions & 30 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
# Week8 - Chatbot
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:
Preview https://hamzakoc.github.io/CHATBOT-PART-I/

**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

Expand Down Expand Up @@ -42,26 +37,3 @@ You are provided the HTML and CSS code for this assignment in this repository. Y
Alternatively, you can modify the HTML to add a `<form>` element around the `<input>` and `<button>` and attach an event listener the form's `submit` event. This will allow you to use the enter key to enter input as well.
8. Save your JavaScript code. You now have a functional simple chatbot. Try it out by opening the 'index.html' file in your browser. REMEMBER to include your JavaScript code in the ‘index.html’ file either internally or externally.

### SUBMISSION

Before submitting your assignment, remember to organize your code according to the best practices for structuring code files. This means:

* HTML, CSS, and JS code should be in separate files
* All files should be organized into their respective folders
* [Read this article for more info](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files)

### EVALUATION

When evaluating this assignment, we will be looking for:

* Proper code formatting
* Correct structuring of code files
* Descriptive comments within code
* Functionality of the chatbot (if it’s working or not)

### BONUS

Try out different ‘input’ and ‘output’ statements with the chatbot.
HINT: you will need these in part 2.

Add your own CSS and/or restructure the HTML to your liking. Make your chatbot unique!
1 change: 1 addition & 0 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
theme: jekyll-theme-slate
2 changes: 2 additions & 0 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">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="script.js" defer></script>
</head>

<body>
Expand Down
33 changes: 33 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@

//properties added to the object: ‘input’ and ‘output’ as an array
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.

Nice job adding comments throughout this file!


var chatbot = {
input: ["hello", "how are you", "how is your day", "what do you do"],
output: [ "hi", "greaatt!", "good", "software developer" ]
};

//print variable
//console.log(chatbot);

//created a function called ‘reply’.
function reply() {
let question = document.getElementById("input").value.toLowerCase();

//conditional statement
if (chatbot.input[0] === 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.

Can you think of checking for the input in a different way without all of these if and else if statements?
For example, if I had 20 possible input/outputs, that would be a lot of if statements to write!

Click here for a suggestion

  • You could loop through the chatbot's input and compare that with the user's input to check if it's valid. If there is a match, display it. Otherwise display "enter a valid value."

  • Or you could use the array indexOf() method to see if the user's input is valid. If it is, display it. Otherwise, display "enter a valid value."

document.getElementById("output").value = chatbot.output[0]
} else if (chatbot.input[1] === question) {
document.getElementById("output").value = chatbot.output[1]
}else if (chatbot.input[2] === question) {
document.getElementById("output").value = chatbot.output[2]
}else if (chatbot.input[3] === question) {
document.getElementById("output").value = chatbot.output[3]
} else {
document.getElementById("output").value = "Enter a valid value"
}

}


//attach a 'click' event listener to the <button> element defined in the HTML file.
document.getElementById("submit").addEventListener("click", 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.

For your callback function, it's not necessary to create an anonymous function (a function with no name, i.e. function() { ... }) and call reply() inside of it. It works, but you can just pass in the name of your reply function directly. Like this:

 document.querySelector("#submit").addEventListener("click", reply);

Or your callback function can be an anonymous function like below. If you do this, you don't need to write a separate reply function because you have included it inline:

 document.querySelector("#submit").addEventListener("click", function() {
   const question = document.querySelector("#input");
   if(question.value === "hello"){
       document.querySelector("#output").textContent = "hi";
   } else{
       document.querySelector("#output").textContent = "I don't understand that command. Please enter another.";
   }
});