From 4cec9e03338e50d82dc432eb3e2241889f563006 Mon Sep 17 00:00:00 2001 From: esyasar Date: Sun, 22 Sep 2019 18:20:35 -0400 Subject: [PATCH 1/3] chatbot part-2 --- chatbot1.js | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 9 ++++---- 2 files changed, 69 insertions(+), 4 deletions(-) create mode 100644 chatbot1.js diff --git a/chatbot1.js b/chatbot1.js new file mode 100644 index 0000000..e689157 --- /dev/null +++ b/chatbot1.js @@ -0,0 +1,64 @@ +//I declared variable for three user input + //and, each input have three possible output. + + var firstData = [ + {input: "hello", + output : ["Hey", "Hello", "Greetings"]}, + + {input: "how are you:?", + output:["Fine", "Great", "Not so good"]}, + + {input:"what is your favorite colour?", + output: ["I am not sure.", "I like everyone.", "There are too many to choose from."]} + + ] + +console.log(firstData); + +function reply(){ + + // this variable taking the input from what user type and make it lowercase + var question = document.querySelector("#input").value.toLowerCase(); + console.log(question); + + // this is for to choose random number from 0 to 2 + var randomNumber = Math.floor((Math.random() * 3 )) + 0 ; + console.log(randomNumber); + + // I assigned an array with no value. + var filterType = null; + + const filtered = firstData.filter(item => {return item.input === question}); + +// declared variables to assigned radio buttons with their id's + +let random = document.querySelector("#random"); +let shortest = document.querySelector("#shortest"); +let longest = document.querySelector("#longest"); + +// declared conditional statment to check user's input and data input + + + + if(filtered.length > 0){ + + //if the user choose shortest answer + if(shortest.check === true){ + document.querySelector("#output").value = filtered[0].output[0]; + + //if the user choose longest answer + }else if(longest.check === true){ + document.querySelector("#output").value = filtered[0].output[2]; + + //if the user choose random answer + }else { + document.querySelector("#output").value = filtered[0].output[randomNumber]; + } + + // if the user enters a reply that is not in my data + }else { + document.querySelector("#output").textContent = "I don't understand that command. Please enter another"; + } + +// I attached a 'click' event listener to button to call function. +document.getElementById("submit").addEventListener("click", function() {reply()}); diff --git a/index.html b/index.html index c516c16..b20ce8b 100755 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ My First Chatbot + @@ -9,7 +10,7 @@

My first chatbot!

Talk to your bot!

- +
@@ -18,16 +19,16 @@

Talk to your bot!

Shortest Answer Longest Answer
- +

Chat history


-
+ - \ No newline at end of file + From 31d6723d7a2d58430c00ea399f23f499daf313c5 Mon Sep 17 00:00:00 2001 From: esyasar Date: Tue, 1 Oct 2019 18:34:49 -0400 Subject: [PATCH 2/3] chatbot-part3 --- chatbot1.js | 64 ---------------------------------------- chatbot2.js | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 2 +- 3 files changed, 86 insertions(+), 65 deletions(-) delete mode 100644 chatbot1.js create mode 100644 chatbot2.js diff --git a/chatbot1.js b/chatbot1.js deleted file mode 100644 index e689157..0000000 --- a/chatbot1.js +++ /dev/null @@ -1,64 +0,0 @@ -//I declared variable for three user input - //and, each input have three possible output. - - var firstData = [ - {input: "hello", - output : ["Hey", "Hello", "Greetings"]}, - - {input: "how are you:?", - output:["Fine", "Great", "Not so good"]}, - - {input:"what is your favorite colour?", - output: ["I am not sure.", "I like everyone.", "There are too many to choose from."]} - - ] - -console.log(firstData); - -function reply(){ - - // this variable taking the input from what user type and make it lowercase - var question = document.querySelector("#input").value.toLowerCase(); - console.log(question); - - // this is for to choose random number from 0 to 2 - var randomNumber = Math.floor((Math.random() * 3 )) + 0 ; - console.log(randomNumber); - - // I assigned an array with no value. - var filterType = null; - - const filtered = firstData.filter(item => {return item.input === question}); - -// declared variables to assigned radio buttons with their id's - -let random = document.querySelector("#random"); -let shortest = document.querySelector("#shortest"); -let longest = document.querySelector("#longest"); - -// declared conditional statment to check user's input and data input - - - - if(filtered.length > 0){ - - //if the user choose shortest answer - if(shortest.check === true){ - document.querySelector("#output").value = filtered[0].output[0]; - - //if the user choose longest answer - }else if(longest.check === true){ - document.querySelector("#output").value = filtered[0].output[2]; - - //if the user choose random answer - }else { - document.querySelector("#output").value = filtered[0].output[randomNumber]; - } - - // if the user enters a reply that is not in my data - }else { - document.querySelector("#output").textContent = "I don't understand that command. Please enter another"; - } - -// I attached a 'click' event listener to button to call function. -document.getElementById("submit").addEventListener("click", function() {reply()}); diff --git a/chatbot2.js b/chatbot2.js new file mode 100644 index 0000000..2308e95 --- /dev/null +++ b/chatbot2.js @@ -0,0 +1,85 @@ +//I declared variable for users inputs + //and, each input have three possible output. + + var firstData = [ + {input: ['hello', 'hi', 'greetings'], + output : ["Hey", "Hello", "Greetings"]}, + + {input: ['what is your favourite colour?', 'who is your favourite hyf instructor?', 'who is your role model?'], + output: ['I am not sure.', 'There are too many to choose from.', 'I like everyone.']}, + + {input: ['how are you?', 'how is the weather today?', 'how is canada doing in the olympics?'], + output: ['Fine', 'Great', 'Not so good']} + + ] + +//console.log(firstData); + +function reply(){ + + // this variable taking the input from what user type and make it lowercase + var question = document.querySelector("#input").value.toLowerCase(); + console.log(question); + + // this variable will store the answers from the chatBot + var history = document.querySelector("#output"); + + // this is for to choose random number from 0 to 2 + var randomNumber = Math.floor((Math.random() * 3 )); + console.log(randomNumber); + + // I assigned an array with no value. + var filterType = null; + +// this variable searching the input arrays for possible answers. + +const filtered = firstData.filter((item) => item.input.includes(question)); + +console.log(filtered); + +/* second way +function objFromfirstData(item){ + if(item.input === question){ + return item.output ; + } +}; + +const filtered = firstData.filter(objFromfirstData); */ + +let shortAnswer = output[0].output.sort((a, b) => a.length - b.length ); +let longAnswer = output[0].output.sort((a, b) => b.length - a.length); +/* I declared a conditional statement to check if users input and data input are matching or not. +If they are matching, it will give the possible answer depends on which radio button that user clicked. */ + + if(filtered.length > 0) + { + + //if the user choose shortest answer + if(document.querySelector("#shortest").checked === true) + { + computer = shortAnswer; + + //if the user choose longest answer + } + else if(document.querySelector("#longest").checked === true){ + + computer = longAnswer; + + //if the user choose random answer + } + else { + computer = filtered.output[randomNumber]; + } + + // if the user enters a input that is not in the input data + } + else { + history.textContent = "I don't understand that command. Please enter another"; + } + + history.innerHTML += `You: ${question}\nbot: ${computer}\n` +} + + +// I attached a 'click' event listener to button to call function. +document.getElementById("submit").addEventListener("click", function() {reply()}); diff --git a/index.html b/index.html index b20ce8b..33cdea3 100755 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ My First Chatbot - + From 87e4972807f73de093454074b8164383db228ace Mon Sep 17 00:00:00 2001 From: esyasar Date: Sun, 6 Oct 2019 18:00:39 -0400 Subject: [PATCH 3/3] Chatbot-part4 --- chatbot2.js | 74 ++++++++++++++++++++++++++++++++++------------------- index.html | 4 ++- 2 files changed, 50 insertions(+), 28 deletions(-) diff --git a/chatbot2.js b/chatbot2.js index 2308e95..f786789 100644 --- a/chatbot2.js +++ b/chatbot2.js @@ -2,16 +2,26 @@ //and, each input have three possible output. var firstData = [ - {input: ['hello', 'hi', 'greetings'], - output : ["Hey", "Hello", "Greetings"]}, + { input: ['hello', 'hi', 'greetings'], + output : ["Hey", "Hello", "Greetings"] + }, - {input: ['what is your favourite colour?', 'who is your favourite hyf instructor?', 'who is your role model?'], - output: ['I am not sure.', 'There are too many to choose from.', 'I like everyone.']}, + { input: ['what is your favourite colour?', 'who is your favourite hyf instructor?', 'who is your role model?'], + output: ['I am not sure.', 'There are too many to choose from.', 'I like everyone.'] + }, - {input: ['how are you?', 'how is the weather today?', 'how is canada doing in the olympics?'], - 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: "show me a dog", + output: showMeaDog() + }, + + { input: "set an alarm", + output: delayedAlert() + } + ]; //console.log(firstData); @@ -19,14 +29,12 @@ function reply(){ // this variable taking the input from what user type and make it lowercase var question = document.querySelector("#input").value.toLowerCase(); - console.log(question); // this variable will store the answers from the chatBot var history = document.querySelector("#output"); // this is for to choose random number from 0 to 2 var randomNumber = Math.floor((Math.random() * 3 )); - console.log(randomNumber); // I assigned an array with no value. var filterType = null; @@ -35,40 +43,29 @@ function reply(){ const filtered = firstData.filter((item) => item.input.includes(question)); -console.log(filtered); - -/* second way -function objFromfirstData(item){ - if(item.input === question){ - return item.output ; - } -}; - -const filtered = firstData.filter(objFromfirstData); */ - let shortAnswer = output[0].output.sort((a, b) => a.length - b.length ); let longAnswer = output[0].output.sort((a, b) => b.length - a.length); + /* I declared a conditional statement to check if users input and data input are matching or not. If they are matching, it will give the possible answer depends on which radio button that user clicked. */ - if(filtered.length > 0) { //if the user choose shortest answer if(document.querySelector("#shortest").checked === true) { - computer = shortAnswer; + var computer = shortAnswer; //if the user choose longest answer } else if(document.querySelector("#longest").checked === true){ - computer = longAnswer; + var computer = longAnswer; //if the user choose random answer } else { - computer = filtered.output[randomNumber]; + var computer = filtered.output[randomNumber]; } // if the user enters a input that is not in the input data @@ -78,8 +75,31 @@ If they are matching, it will give the possible answer depends on which radio bu } history.innerHTML += `You: ${question}\nbot: ${computer}\n` -} +}; + +// attached a 'click' event listener to button to call function. +document.getElementById("submit").addEventListener("click", function(){ + reply() +}); + +// function to get image with API and display it on the HTML page -// I attached a 'click' event listener to button to call function. -document.getElementById("submit").addEventListener("click", function() {reply()}); +function showMeaDog(){ + var image = new XMLHttpRequest(); + image.onreadystage = function() { + if (image.readyStage === 4){ + const data = JSON.parse(image.responseText); + + document.getElementById("apiImage").setAttribute('src', data.message) + } + } + image.open('GET', "https://dog.ceo/api/breeds/image/random", true); + image.send(null); +} + +// function to show a message after 2 seconds +function delayedAlert(){ + setTimeout( function(){ + alert("Did you forget about me? It’s your friend, the Alarm!");},2000); +} diff --git a/index.html b/index.html index 33cdea3..a080cb2 100755 --- a/index.html +++ b/index.html @@ -28,7 +28,9 @@

Chat history


- +
+ +