hackyourfuturecanada · iwaseem · Sep 22, 2019 · Sep 30, 2019 · Oct 7, 2019 · Oct 7, 2019
diff --git a/README.md b/README.md
@@ -1,3 +1,25 @@
-# Chatbot
-
-Please see the instructions [here](https://docs.google.com/document/d/1BP27Tjgit66o6kLpzu8RMnPr7M5GWpC_2N05DvMMTUE/).
+Welcome to Glitch
+Click Show in the header to see your app live. Updates to your code will instantly deploy and update live.
+
+Glitch is the friendly community where you'll build the app of your dreams. Glitch lets you instantly create, remix, edit, and host an app, bot or site, and you can invite collaborators or helpers to simultaneously edit code with you.
+
+Find out more about Glitch.
+
+Your Project
+← README.md
+That's this file, where you can tell people what your cool website does and how you built it.
+
+← index.html
+Where you'll write the content of your website.
+
+← style.css
+CSS files add styling rules to your content.
+
+← script.js
+If you're feeling fancy you can add interactivity to your site with JavaScript.
+
+← assets
+Drag in assets, like images or music, to add them to your project
+
+Made by Glitch
+\ ゜o゜)ノ
diff --git a/chatbot_style.css b/chatbot_style.css
diff --git a/index.html b/index.html
@@ -1,33 +1,37 @@
-<!DOCTYPE HTML>
-<head>
-  <title>My First Chatbot</title>
-  <link rel="stylesheet" type="text/css" href="chatbot_style.css">
-</head>
-
-<body>
-  <div id="demo">
-
-      <h1> My first chatbot! </h1>
-      <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
-      </div>
-
-      <br />
-
-      <h3> Chat history </h3>
-      <div id="chatBot">
-          <textarea id="output" name="ChatHistory" rows="15"></textarea>
-          <br />
-      </div>  
-
-  </div>
-</body>
-
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>My First Chatbot</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script type="text/javascript" src="script.js" defer></script>
+  </head>
+  <body>
+    <div id="show-content" class="hide">
+      <div class="close">
+        <i class="fas fa-window-close fa-4x"></i>
+      </div>
+      <img src="https://images.dog.ceo/breeds/hound-basset/n02088238_517.jpg">
+    </div>
+    <div id="demo">
+        <h1> My first chatbot! </h1>
+        <h3> Talk to your bot!</h3>
+        <div id="user">
+          <form id="chatbot-form">
+            <input id="user-input" type="text" placeholder="Say something" />
+            <button id="submit">Submit</button>
+            <input type="radio" name="filterType" class="filter-type" id="random" value="Random" checked> Random
+            <input type="radio" name="filterType" class="filter-type" id="shortest" value="Shortest Answer"> Shortest Answer
+            <input type="radio" name="filterType" class="filter-type" id="longest" value="Longest Answer"> Longest Answer
+          </form>
+        </div>
+        <br />
+
+        <h3> Chat history </h3>
+        <div id="chat-bot">
+            <textarea id="output" name="ChatHistory" rows="15"></textarea>
+            <br />
+        </div>
+
+    </div>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,116 @@
+function showMeADog(){
+  //get a dog image from API
+  let dataRequest = new XMLHttpRequest();
+  dataRequest.onreadystatechange = function(){
+    if(dataRequest.readyState == 4){
+      //change the returned data from API to Object, and get the url from .message
+      let imageUrl = JSON.parse(dataRequest.responseText).message;
+      //change img attr -src- to the url from API
+      document.querySelector('#show-content img').setAttribute('src', imageUrl);
+      //remove the class hide from the element to show the image
+      document.getElementById('show-content').classList.remove('hide');
+    }
+  }
+  //the url for API ,, and then send the request
+  dataRequest.open('GET', 'https://dog.ceo/api/breeds/image/random', true);
+  dataRequest.send();
+}
+
+function delayedAlert(){
+  setTimeout(function(){
+    alert("Did you forget about me? it's your friend, the Alarm!")
+  }, 2000);
+}
+
+const chatbot = [
+  {
+      input: ['Hello', 'Hi', 'Greetings'],
+      output: ['Hello', 'Hi', 'Greetings']
+  },
+  {
+      input: ['how is class', 'how are you enjoying class', 'how do you like class'],
+      output: ['Fantastic', 'Amazing', 'Bad']
+  },
+  {
+      input: ['do you like to code?', 'do you like to code', 'do you like css'],
+      output: ['I am not sure', 'Not at all', 'I love it']
+  },
+  {
+      input: ['show me a dog'],
+      output: [showMeADog]
+  },
+  {
+      input: ['set an alarm'],
+      output: [delayedAlert]
+  }
+
+  {
+      input: ['Show Me The Weather'],
+      output: [ShowMeTheWeather]
+  }
+];
+
+const sendResponse = () => {
+    let randomNumber = Math.floor((Math.random() * 3));
+    let question = document.getElementById('user-input').value.toLowerCase();
+
+    if(question === ''){ return false; }
+    appendToOutput(question, false);
+
+    const output = chatbot.filter(item => item.input.map(item => item.toLowerCase()).includes(question));
+
+    if (output.length > 0){
+      if (document.getElementById('longest').checked) {
+        const longestOutput = output[0].output.sort((a, b) => b.length - a.length);
+        appendToOutput(longestOutput[0], true);
+      } else if(document.getElementById('shortest').checked) {
+        const shortestOutput = output[0].output.sort((a, b) => a.length - b.length );
+        appendToOutput(shortestOutput[0], 1);
+      } else{
+        //check if the output array has more than value,, if yes get a random one else get the first one
+        (output[0]['output'].length > 1)
+          ? appendToOutput(output[0].output[randomNumber], 1)
+          :appendToOutput(output[0].output[0], 1);
+      }
+    } else {
+      appendToOutput("I don't understand that command. Please enter another.", true);
+    }
+}
+
+const appendToOutput = (msg, sender) => {
+    if (msg instanceof Function) {
+        msg();//call the function ,, which got from the output
+
+        //add an answer on the chat history
+        appendToOutput("With pleasure", 1)
+        return false;
+    }
+    sender = (sender) ? 'Bot':'You';
+    document.getElementById('output').textContent = sender + ' : ' + msg +'\n'+ document.getElementById('output').textContent;
+}
+
+document.getElementById('chatbot-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+    sendResponse();
+    document.getElementById('chatbot-form').reset();
+
+})
+
+// async function
+async function ShowMeTheWeather() {
+  // await response of fetch call
+  let response = await fetch('http://api.openweathermap.org/data/2.5/forecast?q=TORONTO,CA&APPID={65fb059755e7e579db81a98b5956bba7
+}');
+// only proceed once promise is resolved
+let data = await response.json();
+// only proceed once second promise is resolved
+return data;
+}
+// trigger async function
+// log response or catch error of fetch promise
+
+fetchAsync()
+    .then(data => console.log(data))
+    .catch(reason => console.log(reason.message))
+
+    //
diff --git a/style.css b/style.css
@@ -0,0 +1,101 @@
+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;
+    margin: 0px;
+}
+
+#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;
+    margin-top: 80px;
+}
+
+#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;
+}
+
+#show-content{
+    position: absolute;
+    width: 80%;
+    max-width: 80%;
+    height: auto;
+    z-index: 1;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 0 10%;
+    padding-bottom: 100px;
+
+}
+
+#show-content:before {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: -1;
+    border-radius: 15px;
+    box-shadow: 0 0 10px black;
+
+}
+
+#show-content .close{
+    text-align: right;
+    cursor: pointer;
+    position: relative;
+    align-self: flex-end;
+    right: 10px;
+    top: 10px;
+
+}
+
+#show-content img{
+    max-width: 70%;
+    max-height: 70%;
+}
+.hide{
+    display: none !important;
+}