From f06d394de959a2ce0b271eecd253c461012de982 Mon Sep 17 00:00:00 2001 From: farnous Date: Thu, 12 Sep 2019 23:36:57 -0400 Subject: [PATCH 1/4] chatbot homework --- style.css => css/style.css | 0 index.html | 19 +++++++++------- js/script.js | 45 +++++++++++++++++++++++++++++++++++++ script.js | 46 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 102 insertions(+), 8 deletions(-) rename style.css => css/style.css (100%) create mode 100644 js/script.js create mode 100644 script.js diff --git a/style.css b/css/style.css similarity index 100% rename from style.css rename to css/style.css diff --git a/index.html b/index.html index 4793879..bf06122 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,23 @@ My First Chatbot - + +

My first chatbot!

Talk to your bot!

- - -

Chat history

-
- -
+
+ + +

Chat history

+
+ +
+
- \ No newline at end of file + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..29474ad --- /dev/null +++ b/js/script.js @@ -0,0 +1,45 @@ + + +//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); + + +function reply() { + //get the input value ,, and convert it to lowercase + let question = document.getElementById('input').value.toLowerCase(); + //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(chatbot.input.includes(question)){ + //find the index of the value on an array + let index = chatbot.input.indexOf(question); + //then append the same index from output to the textarea + appendToOutput(chatbot.output[index],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('click', function(e) { + e.preventDefault(); + reply(); + document.getElementById('chatbot-form').reset(); +}) + diff --git a/script.js b/script.js new file mode 100644 index 0000000..ea56392 --- /dev/null +++ b/script.js @@ -0,0 +1,46 @@ + + +//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); + + +function reply() { + //get the input value ,, and convert it to lowercase + let question = document.getElementById('input').value.toLowerCase(); + //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(chatbot.input.includes(question)){ + //find the index of the value on an array + let index = chatbot.input.indexOf(question); + //then append the same index from output to the textarea + appendToOutput(chatbot.output[index],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(); + //delete everything on input when you click the button or click enter + document.getElementById('chatbot-form').reset(); +}) + From 6c9d9f91bbb19ddede8510028ddc3d84e6f3f3c5 Mon Sep 17 00:00:00 2001 From: farnous Date: Fri, 20 Sep 2019 01:36:45 -0400 Subject: [PATCH 2/4] homework part 2 --- css/style.css | 7 ++++--- index.html | 35 ++++++++++++++++++++++++----------- js/script.js | 50 ++++++++++++++++++++++++++++++++++++++------------ script.js | 46 ---------------------------------------------- 4 files changed, 66 insertions(+), 72 deletions(-) delete mode 100644 script.js diff --git a/css/style.css b/css/style.css index b4c8731..5d38ef6 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,7 @@ button { font-family: Helvetica; font-size: 10pt; - width: 92px; + /*width: 92px;*/ } textarea { @@ -21,6 +21,7 @@ body { margin-left: auto; margin-right: auto; padding: 20px; + background-color: #F8F8F8; border: 1px solid #ccc; box-shadow: 0 0 10px #999; @@ -29,7 +30,7 @@ body { color: black; } -#demo input { +#demo #input { padding: 8px; font-size: 14px; border: 1px solid #ddd; @@ -49,4 +50,4 @@ input:focus { textarea:focus { outline: none; -} \ No newline at end of file +} diff --git a/index.html b/index.html index bf06122..5777cbd 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,35 @@ My First Chatbot - +
-

My first chatbot!

-

Talk to your bot!

-
- - -

Chat history

-
- -
-
+ +

My first chatbot!

+

Talk to your bot!

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

Chat history

+
+ +
+
+
diff --git a/js/script.js b/js/script.js index 29474ad..153965c 100644 --- a/js/script.js +++ b/js/script.js @@ -1,26 +1,51 @@ - - //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.'] -}; +// 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(chatbot.input.includes(question)){ - //find the index of the value on an array - let index = chatbot.input.indexOf(question); - //then append the same index from output to the textarea - appendToOutput(chatbot.output[index],1); + if(output.length > 0){ + if(document.getElementById('longest').checked){ + lOutput = output[0].output.sort((a, b) => b.length - a.length); + appendToOutput(lOutput[0]); + }else if(document.getElementById('shortest').checked){ + sOutput = output[0].output.sort((a, b) => a.length - b.length ); + appendToOutput(sOutput[0]); + }else{ + appendToOutput(output[0].output[randomNumber]); + } + }else{ //if not found appen this msg to the textarea appendToOutput("I don't understand that command. Please enter another.",1); @@ -37,9 +62,10 @@ function appendToOutput(msg, sender) { //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('click', function(e) { +document.getElementById('chatbot-form').addEventListener('submit', function(e) { e.preventDefault(); reply(); document.getElementById('chatbot-form').reset(); + }) diff --git a/script.js b/script.js deleted file mode 100644 index ea56392..0000000 --- a/script.js +++ /dev/null @@ -1,46 +0,0 @@ - - -//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); - - -function reply() { - //get the input value ,, and convert it to lowercase - let question = document.getElementById('input').value.toLowerCase(); - //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(chatbot.input.includes(question)){ - //find the index of the value on an array - let index = chatbot.input.indexOf(question); - //then append the same index from output to the textarea - appendToOutput(chatbot.output[index],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(); - //delete everything on input when you click the button or click enter - document.getElementById('chatbot-form').reset(); -}) - From 622cd46c5528c1afc2b5ec9cea1240b3d69a4052 Mon Sep 17 00:00:00 2001 From: farnous Date: Fri, 20 Sep 2019 01:39:41 -0400 Subject: [PATCH 3/4] chatbot part 2 --- js/script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/script.js b/js/script.js index 153965c..df70f3d 100644 --- a/js/script.js +++ b/js/script.js @@ -38,12 +38,12 @@ function reply() { if(output.length > 0){ if(document.getElementById('longest').checked){ lOutput = output[0].output.sort((a, b) => b.length - a.length); - appendToOutput(lOutput[0]); + appendToOutput(lOutput[0], 1); }else if(document.getElementById('shortest').checked){ sOutput = output[0].output.sort((a, b) => a.length - b.length ); - appendToOutput(sOutput[0]); + appendToOutput(sOutput[0], 1); }else{ - appendToOutput(output[0].output[randomNumber]); + appendToOutput(output[0].output[randomNumber], 1); } }else{ From f05d8d94b0a56511d2787e85e407eb07eb3720f5 Mon Sep 17 00:00:00 2001 From: farnous Date: Tue, 24 Sep 2019 17:35:10 -0400 Subject: [PATCH 4/4] chatBot week10 --- js/script.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/js/script.js b/js/script.js index df70f3d..48b925e 100644 --- a/js/script.js +++ b/js/script.js @@ -7,16 +7,16 @@ //console.log(chatbot); const chatbot = [ { - input: 'hello', - output: ['Hello', 'Hi', 'Greetings'] + input: ['hello', 'hi', 'greetings'], + output: ['hello', 'hey', 'greetings'] }, { - input: 'how are you?', - output: ['Fine', 'Great', 'Not so good'] + input: ['how are you?', 'how is the weather today?', 'how is Canada doing in the Olympics?'], + 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'] + input: ['what is your favourite colour?', 'who is your favourite HYF instructor?', 'who is your role model?'], + output: ['i am not sure', 'i have so many favorites it\'s hard to choose one.', 'i like every one'] }, ]; @@ -29,7 +29,9 @@ function reply() { 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); + //const output = chatbot.filter(item => item.input === question); + const output = chatbot.filter(item => item.input.includes(question)); + //console.log(output.indexOf(question)); //if there is nothing inside the input then do nothing if(question === ''){ return false; } @@ -55,9 +57,10 @@ function reply() { //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'; + sender = (sender) ? 'ChatBot':'You'; + let newLine = (sender === 'ChatBot')? '\n':'\n\n'; //get the old value ot textarea and add to it the new msg - document.getElementById('output').textContent = sender + ' : ' + msg +'\n'+ document.getElementById('output').textContent; + document.getElementById('output').textContent = sender + ' : ' + msg + newLine + document.getElementById('output').textContent; }