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..39d9c0a 100755 --- a/index.html +++ b/index.html @@ -1,7 +1,8 @@ My First Chatbot - + + @@ -13,7 +14,6 @@

Talk to your bot!

- Random Shortest Answer Longest Answer @@ -26,6 +26,7 @@

Chat history


+
diff --git a/main.js b/main.js new file mode 100644 index 0000000..2072cc5 --- /dev/null +++ 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 = ` +

`; + 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 new file mode 100644 index 0000000..574550b --- /dev/null +++ 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; +}