diff --git a/README.md b/README.md index 5e9e1fd..29da157 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,65 @@ -# Chatbot +# Week8 - Chatbot -Please see the instructions [here](https://docs.google.com/document/d/1BP27Tjgit66o6kLpzu8RMnPr7M5GWpC_2N05DvMMTUE/). +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' } +``` + +4. Below your variable declaration, create a function called ‘reply’. +5. In the ‘reply’ function, declare a variable called ‘question’ and assign to it the **value**of the HTML `` element. + - HINT: use the id assigned to the `` element to get access to the element. +6. Use a conditional statement to check if the value you stored in the 'question' variable matches the 'input' defined in the object you first created. + 1. If it does, assign the corresponding output to the **value** of the -
+ + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..f4911f9 --- /dev/null +++ b/js/main.js @@ -0,0 +1,110 @@ +/* +Aziz Omar +Chatbot4 +*/ +// contains all inputs and outputs +let data = [{ + input: ['hi', 'hey!', 'yo yo'], + output: ['Hello', 'Hey !', 'Whats up?'] + }, + + { + input: ['how are you?', 'how is it going?', 'how are you doing?'], + output: ['good', 'not bad', 'doing well'] + }, + + { + input: ['what is your favourite color?', 'what color do you prefer', 'tell me what color you like'], + output: ['red', 'gray', 'black'] + }, + + { + input: ['where are you', 'are you near by', 'where are you located'], + output: ['home', 'at work', 'on vacation'] + } +]; + + +/* +iterates through an array to find a question simillar to user's input +*/ + +const findSimillarQuestion = givenInput => (item) => { + // return item.input.toUpperCase().includes(givenInput.toUpperCase()); + return item.input.includes(givenInput); +} + + + +// repaly function +const replay = () => { + + let bot; + let question = document.getElementById("input").value; + question = question.toLowerCase(); + let txtArea = document.getElementById("output"); + let rndmNumber = Math.floor(Math.random() * data[0].output.length); + let detectedQuestion = data.filter(findSimillarQuestion(question))[0]; + let img = document.getElementById('img'); + // remove the src from img to hide it + img.src = ""; + // display textarea + txtArea.style.display = 'block'; + + if (detectedQuestion) { + let maxAnswer = detectedQuestion.output.sort((a, b) => a.length - b.length)[detectedQuestion.output.length - 1]; + let minAnswer = detectedQuestion.output[0]; + console.log(minAnswer) + if (document.getElementById('shortest').checked) { + bot = minAnswer; + } else if (document.getElementById('longest').checked) { + bot = maxAnswer; + } else { + bot = detectedQuestion.output[rndmNumber]; + } + + } else if (question == "show me a dog") { + // hide txt area + txtArea.style.display = 'none'; + // call function to display an image of a dog + displayAdog(); + bot = "an image of dog is displayed" + } else if (question == "set an alarm") { + bot = "ok !"; + delayedAlert(); + } else { + bot = " I do not understand the command "; + } + // assign the output to teaxtarea + txtArea.innerHTML += `You: ${question}\nbot: ${bot}\n\n`; + + +} // end of replay + + + +// show alert in 3seconds +function delayedAlert() { + setTimeout(function () { + alert("Did you forget about me? It’s your friend, the Alarm"); + }, 3000) +} + +//diplay an image of a dog +function displayAdog() { + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + let img = document.getElementById("img"); + img.src = (JSON.parse(this.responseText)).message; + } + } + + xhttp.open("GET", "https://dog.ceo/api/breeds/image/random", true); + xhttp.send(); + + +} + + +document.getElementById("submit").addEventListener('click', replay); \ No newline at end of file