diff --git a/README.md b/README.md index 5e9e1fd..7ae9af6 100644 --- 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 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..caa5076 100755 --- a/index.html +++ b/index.html @@ -1,33 +1,37 @@ - - - My First Chatbot - - - - -
- -

My first chatbot!

-

Talk to your bot!

- -
- - - - Random - Shortest Answer - Longest Answer -
- -
- -

Chat history

-
- -
-
- -
- - - \ No newline at end of file + + + + My First Chatbot + + + + +
+
+ +
+ +
+
+

My first chatbot!

+

Talk to your bot!

+
+
+ + + Random + Shortest Answer + Longest Answer +
+
+
+ +

Chat history

+
+ +
+
+ +
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..9534d4b --- /dev/null +++ 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 new file mode 100644 index 0000000..25e9d67 --- /dev/null +++ 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; +}