diff --git a/chatbot.js b/chatbot.js
new file mode 100644
index 0000000..5539357
--- /dev/null
+++ b/chatbot.js
@@ -0,0 +1,89 @@
+let chatbot1 = [
+  {
+    input: ['Hello'],
+    output: ['Hi', 'Salam', 'Hey']
+  },
+  {
+    input: ['How are you?'],
+    output: ['Great!', 'It is been going great.', 'I am awesome.']
+  },
+  {
+    input: ['How many languages can you speak?'],
+    output: ['I can only speak one.', 'I can speak 2.', 'I am bilingual.']
+  }
+];
+
+console.log(chatbot1);
+
+function reply() {
+  let question = document.querySelector('#input').value.toLowerCase();
+  let randomNumber = Math.floor((Math.random() * 3));
+  let filterType = null;
+  let textarea = document.getElementById("output");
+  const output = chatbot1.filter(item => item.input.includes(question));
+  if (question === chatbot1.input) {
+  textarea.innerHTML = chatbot1.output;
+  }
+  if (output.length > 0) {
+      if (document.getElementById('longest').checked) {
+          longOp = output[0].output.sort((a, b) => b.length - a.length);
+          appendToOutput(longOp[0], 1);
+      }else if (document.getElementById('shortest').checked){
+          shortOp = output[0].output.sort((a, b) => a.length - b.length);
+          appendToOutput(shortOp[0], 1);
+      } else {
+          appendToOutput(output[0].output[randomNumber], 1);
+      }
+      }
+      else {
+      appendToOutput('I do not understand that command. Please enter another.');
+  }
+ }
+reply();
+
+var listener = document.querySelector('#submit');
+listener.addEventListener('click', function(e) {
+    e.preventDefault();
+    reply();
+    document.querySelector('#submit').reset();
+}) // assigning to it AN addEventListener.
+//==============================================================================
+//CHATBOT FOUR
+function showDog() {
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+        if (xmlHttp.readyState == 4) {
+            let url = JSON.parse(xmlHttp.responseText).message;
+            document.querySelector('#show-content  img').setAttribute('src', url)
+            document.getElementById('show-content').classList.remove('hide');
+        }
+    }
+    xmlHttp.open('GET', 'https://dog.ceo/api/breeds/image/random', true);
+    xmlHttp.send();
+}
+
+function delayedAlert() {
+    setTimeout(function() {
+        alert("Did you forget about me? it's your friend, the Alarm!")
+        }, 2000);
+}
+//=============================================================================
+//CHATBOT 5
+// Use async/await to write a function to call the Weather API
+//and parse the API upon a request for the weather if the user inputs “Show me the weather”
+async function callWeather() {
+  const executeFirst = await requestWeather();
+}
+
+var requestWeather = new XMLHttpRequest()
+  requestWeather.open('GET', 'https://openweathermap.org/api', 'api.openweathermap.org/data/2.5/forecast?id=524901&APPID=ded48b63426832eb7e0f825530b65a61',   true)
+    requestWeather.onload = function() {
+      var = promise = new Promise(function(resolve, reject) {
+        setTimeout(function() {
+          if (chatbot1.input[] = 'Show me the weather') {resolve(requestWeather); return
+          }
+          reject('Error')
+        })
+      }, 200)
+}
+requestWeather.send();
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..d64fc92 100755
--- a/index.html
+++ b/index.html
@@ -1,15 +1,22 @@
 <!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="chatbot1-2-3-4" defer></script>
 </head>
 
 <body>
+  <div id="show-content" class="hide">
+    <div class="close">
+      <i class="close4"></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">
         <input id="input" type="text" placeholder="Say something" />
         <button id="submit">Submit</button>
@@ -18,16 +25,16 @@ <h3> Talk to your bot!</h3>
         <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>
 
   </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e4c4646
--- /dev/null
+++ b/style.css
@@ -0,0 +1,49 @@
+<style>
+    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;
+    }
+</style>