hackyourfuturecanada · cuilhan · Sep 22, 2019 · Oct 1, 2019
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <head>
   <title>My First Chatbot</title>
-  <link rel="stylesheet" type="text/css" href="chatbot_style.css">
+  <link rel="stylesheet" type="text/css" href="./styles/chatbot_style.css">
 </head>
 
 <body>
@@ -28,6 +28,7 @@ <h3> Chat history </h3>
       </div>  
 
   </div>
+  <script type="text/javascript" src="scripts/app.js" defer></script>
 </body>
 
 </html>
diff --git a/scripts/app.js b/scripts/app.js
@@ -0,0 +1,78 @@
+console.log("he");
+// Input and output contents declared
+const chatbotIO = [
+    {
+        input :  ['hello', 'hi', 'greetings'],
+        output : ["Hello", "Hi", "Hey"]
+    },
+    {
+        input  : ['what is your favourite colour?', 'who is your favourite HYF instructor?', 'who is your role model?'],
+        output : ["I am not sure", "I like every color", "Orange"]
+    },
+    {
+        input : ['how are you?', 'how is the weather today?', 'how is canada doing in the olympics?'],
+        output : ["Great", "Cool", "Good"]
+    }]
+
+    // just check chatbot input output content on console 
+    const list = chatbotIO.filter(io => {return io;});
+    console.log(list);
+
+    // random fuction, every time show rondom answer
+    const random = (io) => { return io[0].output[Math.floor(Math.random()*3)];}
+    // shortest function, every time show shortest answer
+    const shortest = (io) =>{ return io[0].output.reduce((first, second) => first.length <= second.length ? first : second)}
+    // longest function, every time show longest answer
+    const longest = (io) =>{ return io[0].output.reduce((first, second) => first.length >= second.length ? first : second)}
+
+    // comparison of two values(user input and our input) and call push content function
+function reply(radioButton){
+    const questionValue = document.querySelector("#input").value;
+    // i checked that if array input value is equal to our input value 
+    const filterIO = chatbotIO.filter(ios => { 
+        console.log("ios", ios.input);
+        return ios.input.includes(questionValue.toLowerCase()); 
+    })
+    console.log("filterIO",filterIO);
+    // response minumum 1 object if input type is inside the array. After i call pushContent() function which button clicked.
+    if(filterIO.length === 1){
+            if(radioButton === "longest"){
+                pushContent(questionValue,longest(filterIO)); 
+            } else if(radioButton === "shortest"){
+                pushContent(questionValue,shortest(filterIO)); 
+            } else {
+                pushContent(questionValue,random(filterIO));
+            }
+        }
+    else {
+        const undefinedContent = "I don't understand that command. Please enter another command.";
+        pushContent(questionValue, undefinedContent);
+        console.log(undefinedContent);
+    }    
+}
+
+// Push and storage every content for user and chatbot.
+function pushContent(questionValue, chatbotValue){
+    const selectedOutput =  document.querySelector("#output");
+    const storageOutput = [];
+    storageOutput.push(`You: ${questionValue}`,`Chatbot: ${chatbotValue}`);
+    for(let  i = 0; i < storageOutput.length; i++ ){
+        selectedOutput.textContent += `${storageOutput[i]}\n`;
+    }
+}
+
+// run reply function after click submit method and control which button clicked.
+document.querySelector("#submit").addEventListener("click", function(){
+
+    if(document.getElementById("longest").checked){
+        console.log("longest");
+        reply("longest");
+    } else if(document.getElementById("shortest").checked){
+        console.log("shortest");
+        reply("shortest");
+    } else{
+        console.log("random");
+        reply("random");
+    }
+
+})
diff --git a/chatbot_style.css → styles/chatbot_style.css b/chatbot_style.css → styles/chatbot_style.css
@@ -1,53 +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;
+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;
 }