From f7f41af8d3e9491ebf1a43e155b7fa38c0e3bc3f Mon Sep 17 00:00:00 2001 From: inanfatih Date: Sun, 22 Sep 2019 20:59:09 -0400 Subject: [PATCH 1/2] chatbot v2 --- chatbot_style.css | 53 ---------------------------------- index.html | 5 ++-- script.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++ style.css | 47 +++++++++++++++++++++++++++++++ 4 files changed, 122 insertions(+), 55 deletions(-) delete mode 100755 chatbot_style.css create mode 100644 script.js create mode 100644 style.css diff --git a/chatbot_style.css b/chatbot_style.css deleted file mode 100755 index a915556..0000000 --- a/chatbot_style.css +++ /dev/null @@ -1,53 +0,0 @@ -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; -} \ No newline at end of file diff --git a/index.html b/index.html index c516c16..b45549a 100755 --- a/index.html +++ b/index.html @@ -1,7 +1,8 @@ My First Chatbot - + + @@ -11,7 +12,7 @@

My first chatbot!

Talk to your bot!

- + Random diff --git a/script.js b/script.js new file mode 100644 index 0000000..7d8ca8b --- /dev/null +++ b/script.js @@ -0,0 +1,72 @@ +//object containing inputs and outputs arrays +let chatInputsOutputs = [ + { + inputs: 'Hello', + outputs: ['Hello', 'Hey', 'Greetings'], + }, + { + inputs: 'What is your favourite colour?', + outputs: ['I am not sure.', 'White', 'Blue'], + }, + { + inputs: 'How are you?', + outputs: ['Great!', 'Not bad', 'Good'], + }, +]; +let randomNumber = Math.floor(Math.random() * 3); + +console.log(chatInputsOutputs); + +const answerRandom = item => { + item[0].outputs[randomNumber]; +}; +const answerShortest = item => { + item[0].outputs.reduce((a, b) => (a.length < b.length ? a : b)); +}; +const answerLongest = item => { + item[0].outputs.reduce((a, b) => (a.length > b.length ? a : b)); +}; + +const reply = selectedAnswer => { + let question = document.getElementById('input').value.toLowerCase(); + let filterType = null; + + console.log(question); + + const filteredObject = chatInputsOutputs.filter( + item => question === item.inputs.toLowerCase(), + ); + console.log(filteredObject); + + // document.getElementById('output').value = + // chatInputsOutputs.outputs[indexOfQuestion]; + + console.log(answerShortest(filteredObject)); + console.log(answerLongest(filteredObject)); + console.log(answerRandom(filteredObject)); + + if (filteredObject.length === 1) { + if (selectedAnswer === 1) { + document.getElementById('output').value = answerShortest(filteredObject); + } else if (selectedAnswer === 2) { + document.getElementById('output').value = answerShortest(filteredObject); + } else { + document.getElementById('output').value = answerRandom(filteredObject); + } + } else { + //when the input is not recognized + document.getElementById('output').value = + "I don't understand that command. Please enter another."; + } +}; + +document.getElementById('submit').addEventListener('click', function() { + let option = 0; + if (document.getElementById('longest').checked) { + option = 1; + } else if (document.getElementById('shortest').checked) { + option = 2; + } + console.log('submit clicked'); + reply(option); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..574550b --- /dev/null +++ b/style.css @@ -0,0 +1,47 @@ +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; +} From 0286554b39c5226d2061f4875a3cf5fa74a91d7c Mon Sep 17 00:00:00 2001 From: inanfatih Date: Tue, 1 Oct 2019 21:12:22 -0400 Subject: [PATCH 2/2] chatbot3 completed --- index.html | 3 +-- script.js | 66 +++++++++++++++++++++++++++++++++--------------------- 2 files changed, 42 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index b45549a..a6762db 100755 --- a/index.html +++ b/index.html @@ -12,9 +12,8 @@

My first chatbot!

Talk to your bot!

- + - Random Shortest Answer Longest Answer diff --git a/script.js b/script.js index 7d8ca8b..e239c88 100644 --- a/script.js +++ b/script.js @@ -1,65 +1,81 @@ //object containing inputs and outputs arrays let chatInputsOutputs = [ { - inputs: 'Hello', + inputs: ['Hello', 'Hi', 'Greetings'], outputs: ['Hello', 'Hey', 'Greetings'], }, { - inputs: 'What is your favourite colour?', - outputs: ['I am not sure.', 'White', 'Blue'], + inputs: [ + 'What is your favourite colour?', + 'Who is your favourite HYF instructor?', + 'Who is your role model?', + ], + outputs: [ + 'I am not sure.', + 'There are too many to choose from.', + 'I like everyone.', + ], }, { - inputs: 'How are you?', - outputs: ['Great!', 'Not bad', 'Good'], + inputs: [ + 'How are you?', + 'How is the weather today?', + 'How is Canada doing in the Olympics?', + ], + outputs: ['Fine', 'Great', 'Not so good'], }, ]; -let randomNumber = Math.floor(Math.random() * 3); + +const randomNuberGenerator = () => Math.floor(Math.random() * 3); console.log(chatInputsOutputs); const answerRandom = item => { - item[0].outputs[randomNumber]; + return item[0].outputs[randomNuberGenerator()]; }; const answerShortest = item => { - item[0].outputs.reduce((a, b) => (a.length < b.length ? a : b)); + return item[0].outputs.reduce((a, b) => (a.length < b.length ? a : b)); }; const answerLongest = item => { - item[0].outputs.reduce((a, b) => (a.length > b.length ? a : b)); + return item[0].outputs.reduce((a, b) => (a.length > b.length ? a : b)); }; +// reply function const reply = selectedAnswer => { - let question = document.getElementById('input').value.toLowerCase(); - let filterType = null; + let question = document.getElementById('input').value; console.log(question); - const filteredObject = chatInputsOutputs.filter( - item => question === item.inputs.toLowerCase(), - ); - console.log(filteredObject); + document.getElementById('output').value += + 'You: ' + document.getElementById('input').value + '\n'; - // document.getElementById('output').value = - // chatInputsOutputs.outputs[indexOfQuestion]; + const filteredObject = chatInputsOutputs.filter(item => { + return item.inputs + .map(item => item.toLowerCase()) + .includes(question.toLowerCase()); + }); - console.log(answerShortest(filteredObject)); - console.log(answerLongest(filteredObject)); - console.log(answerRandom(filteredObject)); + console.log('filteredobject', filteredObject); if (filteredObject.length === 1) { if (selectedAnswer === 1) { - document.getElementById('output').value = answerShortest(filteredObject); + document.getElementById('output').value += + 'Computer: ' + answerLongest(filteredObject) + '\n\n'; } else if (selectedAnswer === 2) { - document.getElementById('output').value = answerShortest(filteredObject); + document.getElementById('output').value += + 'Computer: ' + answerShortest(filteredObject) + '\n\n'; } else { - document.getElementById('output').value = answerRandom(filteredObject); + document.getElementById('output').value += + 'Computer: ' + answerRandom(filteredObject) + '\n\n'; } } else { //when the input is not recognized - document.getElementById('output').value = - "I don't understand that command. Please enter another."; + document.getElementById('output').value += + "Computer: I don't understand that command. Please enter another. \n\n"; } }; +// Event listener of submit button document.getElementById('submit').addEventListener('click', function() { let option = 0; if (document.getElementById('longest').checked) {