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..a6762db 100755
--- a/index.html
+++ b/index.html
@@ -1,7 +1,8 @@
My First Chatbot
-
+
+
@@ -13,7 +14,6 @@ Talk to your bot!
-
Random
Shortest Answer
Longest Answer
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e239c88
--- /dev/null
+++ b/script.js
@@ -0,0 +1,88 @@
+//object containing inputs and outputs arrays
+let chatInputsOutputs = [
+ {
+ inputs: ['Hello', 'Hi', 'Greetings'],
+ outputs: ['Hello', 'Hey', 'Greetings'],
+ },
+ {
+ 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?',
+ 'How is the weather today?',
+ 'How is Canada doing in the Olympics?',
+ ],
+ outputs: ['Fine', 'Great', 'Not so good'],
+ },
+];
+
+const randomNuberGenerator = () => Math.floor(Math.random() * 3);
+
+console.log(chatInputsOutputs);
+
+const answerRandom = item => {
+ return item[0].outputs[randomNuberGenerator()];
+};
+const answerShortest = item => {
+ return item[0].outputs.reduce((a, b) => (a.length < b.length ? a : b));
+};
+const answerLongest = item => {
+ return item[0].outputs.reduce((a, b) => (a.length > b.length ? a : b));
+};
+
+// reply function
+const reply = selectedAnswer => {
+ let question = document.getElementById('input').value;
+
+ console.log(question);
+
+ document.getElementById('output').value +=
+ 'You: ' + document.getElementById('input').value + '\n';
+
+ const filteredObject = chatInputsOutputs.filter(item => {
+ return item.inputs
+ .map(item => item.toLowerCase())
+ .includes(question.toLowerCase());
+ });
+
+ console.log('filteredobject', filteredObject);
+
+ if (filteredObject.length === 1) {
+ if (selectedAnswer === 1) {
+ document.getElementById('output').value +=
+ 'Computer: ' + answerLongest(filteredObject) + '\n\n';
+ } else if (selectedAnswer === 2) {
+ document.getElementById('output').value +=
+ 'Computer: ' + answerShortest(filteredObject) + '\n\n';
+ } else {
+ document.getElementById('output').value +=
+ 'Computer: ' + answerRandom(filteredObject) + '\n\n';
+ }
+ } else {
+ //when the input is not recognized
+ 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) {
+ 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;
+}