From 0c2b636509553bd44c1a71b4bb29b58382e07461 Mon Sep 17 00:00:00 2001 From: farnous Date: Fri, 20 Sep 2019 01:43:35 -0400 Subject: [PATCH 1/5] chatbot part2 --- css/style.css | 53 ++++++++++++++++++++++++++++++++++++++ index.html | 23 +++++++++-------- js/script.js | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 137 insertions(+), 10 deletions(-) create mode 100644 css/style.css create mode 100644 js/script.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..5d38ef6 --- /dev/null +++ b/css/style.css @@ -0,0 +1,53 @@ +button { + font-family: Helvetica; + font-size: 10pt; + /*width: 92px;*/ +} + +textarea { + font-family: arial; + font-size: 10pt; +} + +body { + color: #333; + background-color: #efefef; + font: 13px helvetica, arial, freesans, clean, sans-serif; +} + +#demo { + width: 80%; + max-width: 1000px; + margin-left: auto; + margin-right: auto; + padding: 20px; + + background-color: #F8F8F8; + border: 1px solid #ccc; + box-shadow: 0 0 10px #999; + line-height: 1.4em; + font: 13px helvetica, arial, freesans, clean, sans-serif; + color: black; +} + +#demo #input { + padding: 8px; + font-size: 14px; + border: 1px solid #ddd; + width: 400px; +} + +#demo textarea { + padding: 8px; + font-size: 14px; + border: 1px solid #ddd; + width: 800px; +} + +input:focus { + outline: none; +} + +textarea:focus { + outline: none; +} diff --git a/index.html b/index.html index c516c16..5777cbd 100755 --- a/index.html +++ b/index.html @@ -1,7 +1,8 @@ My First Chatbot - + + @@ -9,25 +10,27 @@

My first chatbot!

Talk to your bot!

- +
- - +
+ + - Random - Shortest Answer - Longest Answer + Random + Shortest Answer + Longest Answer +
- +

Chat history


-
+ - \ No newline at end of file + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..df70f3d --- /dev/null +++ b/js/script.js @@ -0,0 +1,71 @@ +//1.In your JavaScript code, declare a variable and initialize it as an object. +//2.Add two properties to the object: ‘input’ and ‘output’. +// const chatbot = { +// input:['hello', 'how are you?', 'what is your favourite colour?'], +// output:['hi', 'great!', 'i have so many favorites it\'s hard to choose one.'] +// }; +//console.log(chatbot); +const chatbot = [ + { + input: 'hello', + output: ['Hello', 'Hi', 'Greetings'] + }, + { + input: 'how are you?', + output: ['Fine', 'Great', 'Not so good'] + }, + { + input: 'what is your favourite colour?', + output: ['I am not sure', 'i have so many favorites it\'s hard to choose one.', 'I like every one'] + }, + +]; +//get a random number between 0 and 2 + +function reply() { + + let randomNumber = Math.floor((Math.random() * 3)); + //get the input value ,, and convert it to lowercase + let question = document.getElementById('input').value.toLowerCase(); + let filterType = null; + //get the array mach the input value + const output = chatbot.filter(item => item.input === question); + + //if there is nothing inside the input then do nothing + if(question === ''){ return false; } + appendToOutput(question); + //check if question founded on the chatbot object + if(output.length > 0){ + if(document.getElementById('longest').checked){ + lOutput = output[0].output.sort((a, b) => b.length - a.length); + appendToOutput(lOutput[0], 1); + }else if(document.getElementById('shortest').checked){ + sOutput = output[0].output.sort((a, b) => a.length - b.length ); + appendToOutput(sOutput[0], 1); + }else{ + appendToOutput(output[0].output[randomNumber], 1); + } + + }else{ + //if not found appen this msg to the textarea + appendToOutput("I don't understand that command. Please enter another.",1); + } +} + +//this function to add a new message to the top of the textarea +function appendToOutput(msg, sender) { + //who send the msg ? bot or user(you) + sender = (sender) ? 'Bot':'You'; + //get the old value ot textarea and add to it the new msg + document.getElementById('output').textContent = sender + ' : ' + msg +'\n'+ document.getElementById('output').textContent; +} + + +//when the form submited do this >>> ,, i have already changed the type of button to submit , so each click of the button will submit the form +document.getElementById('chatbot-form').addEventListener('submit', function(e) { + e.preventDefault(); + reply(); + document.getElementById('chatbot-form').reset(); + +}) + From d2d8a45047bf4146e98f15aa76d2b7a4258ee9d8 Mon Sep 17 00:00:00 2001 From: farnous Date: Thu, 26 Sep 2019 10:48:11 -0400 Subject: [PATCH 2/5] chatBot 3 --- README.md | 68 +++++++++++++++++++++++++++++++++++++++++++++-- chatbot_style.css | 53 ------------------------------------ js/script.js | 21 ++++++++------- 3 files changed, 78 insertions(+), 64 deletions(-) delete mode 100755 chatbot_style.css diff --git a/README.md b/README.md index 5e9e1fd..0e3e294 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,67 @@ -# 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