hackyourfuturecanada · inanfatih · Sep 23, 2019 · Oct 2, 2019 · Oct 6, 2019 · Oct 13, 2019
diff --git a/chatbot_style.css b/chatbot_style.css
diff --git a/index.html b/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE HTML>
 <head>
   <title>My First Chatbot</title>
-  <link rel="stylesheet" type="text/css" href="chatbot_style.css">
+  <link rel="stylesheet" href="style.css">
+  <script src="main.js" defer></script>
 </head>
 
 <body>
@@ -13,7 +14,6 @@ <h3> Talk to your bot!</h3>
       <div id="user">
         <input id="input" type="text" placeholder="Say something" />
         <button id="submit">Submit</button>
-
         <input type="radio" name="filterType" class="filterType" id="random" value="Random" checked> Random
         <input type="radio" name="filterType" class="filterType" id="shortest" value="Shortest Answer"> Shortest Answer
         <input type="radio" name="filterType" class="filterType" id="longest" value="Longest Answer"> Longest Answer
@@ -26,6 +26,7 @@ <h3> Chat history </h3>
           <textarea id="output" name="ChatHistory" rows="15"></textarea>
           <br />
       </div>  
+      <div id="dog"></div>
 
   </div>
 </body>

diff --git a/main.js b/main.js
@@ -0,0 +1,155 @@
+let dogEndpoint = 'https://dog.ceo/api/breeds/image/random';
+let history = [];
+let h_input = document.getElementById('input');
+let h_output = document.getElementById('output');
+
+//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 randomNumberGenerator = () => Math.floor(Math.random() * 3);
+
+console.log(chatInputsOutputs);
+
+//answer based on the option selected in the radio button
+const answerRandom = item => {
+  return item[0].outputs[randomNumberGenerator()];
+};
+
+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 = h_input.value;
+  console.log(question);
+
+  history.push('You: ' + question + '\n');
+
+  console.log(history);
+
+  const filteredObject = chatInputsOutputs.filter(item => {
+    return item.inputs
+      .map(item => item.toLowerCase())
+      .includes(question.toLowerCase());
+  });
+
+  if (question.toLowerCase().includes('dog')) {
+    console.log('if dog question');
+    getPhotos();
+  } else if (question.toLowerCase().includes('alarm')) {
+    setAlarm();
+  } else if (filteredObject.length === 1) {
+    if (selectedAnswer === 1) {
+      history.push('Computer: ' + answerLongest(filteredObject) + '\n\n');
+    } else if (selectedAnswer === 2) {
+      history.push('Computer: ' + answerShortest(filteredObject) + '\n\n');
+    } else {
+      history.push('Computer: ' + answerRandom(filteredObject) + '\n\n');
+    }
+  } else {
+    //when the input is not recognized
+    history.push(
+      "Computer: I don't understand that command. Please enter another. \n\n",
+    );
+  }
+};
+
+function setAlarm() {
+  setTimeout(function() {
+    history.push(
+      'Computer: Did you forget about me? It’s your friend, the Alarm! \n\n',
+    );
+    outputPrinter(history);
+    alert('Did you forget about me? It’s your friend, the Alarm!');
+  }, 2000);
+}
+
+// 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;
+  }
+  reply(option);
+  outputPrinter(history);
+});
+
+function getPhotos() {
+  let xhr = new XMLHttpRequest();
+  let ERROR_MESSAGE = 'Something bad happened!';
+  let data = '';
+  let message = '';
+  console.log('/////////', 'getPhotos');
+
+  xhr.onreadystatechange = function() {
+    console.log('aaaaaa', 'onreadystate');
+
+    if (xhr.readyState == XMLHttpRequest.DONE) {
+      console.log('/////////', 'DONE');
+
+      data = JSON.parse(xhr.response);
+      console.log(data);
+      message = data.message;
+      console.log('history: ', history);
+      console.log('message: ', message);
+      history.push(message);
+      outputPrinter(history);
+    } else {
+      message = ERROR_MESSAGE;
+    }
+  };
+
+  xhr.open('GET', dogEndpoint, true);
+  xhr.send();
+
+  return message;
+}
+
+const outputPrinter = history => {
+  let outputToPrint = '';
+  let historyWithLink = history.map(item => {
+    console.log('item: --- ', item);
+    if (item.substring(0, 6) === 'https:') {
+      let linkA = `<img src= '${item}' width="500" height="600"> 
+        <br></br>`;
+      document.getElementById('dog').innerHTML = linkA;
+      return `Computer: How is this dog? \n\n `;
+    }
+    return item;
+  });
+  historyWithLink.forEach(item => (outputToPrint += item));
+
+  h_output.innerHTML = outputToPrint;
+};
diff --git a/style.css 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;
+}