diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index c516c16..c51a8b8 100755 --- a/index.html +++ b/index.html @@ -1,7 +1,8 @@ My First Chatbot - + + @@ -13,13 +14,17 @@

Talk to your bot!

- - Random - Shortest Answer +
+ Shortest Answer Longest Answer + Random +
- -
+
+
+ dog image +
+

Chat history

@@ -28,6 +33,7 @@

Chat history

+ \ No newline at end of file diff --git a/scripts/app.js b/scripts/app.js new file mode 100644 index 0000000..91c0334 --- /dev/null +++ b/scripts/app.js @@ -0,0 +1,126 @@ +// Input and output contents declared +const chatbotIO = [ + { + input : ['hello', 'hi', 'greetings'], + output : ['Hello', 'Hi', 'Hey'] + }, + { + input : ['what is your favourite colour?', 'who is your favourite HYF instructor?', 'who is your role model?'], + output : ['I am not sure', 'I like every color', 'Orange'] + }, + { + input : ['how are you?', 'how is the weather today?', 'how is canada doing in the olympics?'], + output : ['Great', 'Cool', 'Good'] + }, + { + input : 'show me a dog', + output: ['dog'] + }, + { + input: 'set an alarm', + output: ['alarm'] + }, + { + input: 'show me the weather', + output: ['getWeather'] + } + +] + + // just check chatbot input output content on console + const list = chatbotIO.filter(io => io); + + // random fuction, every time show rondom answer + const random = (io) => io[0].output[Math.floor(Math.random()*3)]; + // shortest function, every time show shortest answer + const shortest = (io) => io[0].output.reduce((first, second) => first.length <= second.length ? first : second); + // longest function, every time show longest answer + const longest = (io) => io[0].output.reduce((first, second) => first.length >= second.length ? first : second); + + // comparison of two values(user input and our input) and call push content function +function reply(radioButton){ + const questionValue = document.querySelector('#input').value; + let filterOutput = ''; + // i checked that if array input value is equal to our input value + const filterIO = chatbotIO.filter(ios => { + if(ios.input.includes(questionValue.toLowerCase())){ + filterOutput = ios.output[0]; + return ios.input.includes(questionValue.toLowerCase()); + } + + }) + // first i call function if output is dog or alarm. and response minumum 1 object if input type is inside the array. After i call pushContent() function which button clicked. + if(filterOutput === 'dog'){ + showDogRandom(); + } else if(filterOutput === 'alarm'){ + setAnAlarm(); + } else if(filterOutput === 'getWeather'){ + city = 'Toronto'; + apiKey ='620ff778dc8d41a5fe7a7f168ba90d92'; + getWeather(`http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${apiKey}`) + .then(response => { + pushContent(questionValue,`Toronto weather today is ${response.weather[0].description} and Toronto's temperature is ${Math.floor(response.main.temp-273.15)}`); + }) + .catch(err=>console.log(err)); + } else if(filterIO.length === 1){ + if(radioButton === 'longest'){ + pushContent(questionValue,longest(filterIO)); + } else if(radioButton === 'shortest'){ + pushContent(questionValue,shortest(filterIO)); + } else { + pushContent(questionValue,random(filterIO)); + } + } else { + const undefinedContent = 'I don\'t understand that command. Please enter another command.'; + pushContent(questionValue, undefinedContent); + } +} + +// Push and storage every content for user and chatbot. +function pushContent(questionValue, chatbotValue){ + const selectedOutput = document.querySelector('#output'); + selectedOutput.textContent += `You: ${questionValue}\nChatbot: ${chatbotValue}\n\n`; +} + +// run reply function after click submit method and control which button clicked. +document.querySelector('#submit').addEventListener('click', function(){ + + if(document.getElementById('longest').checked){ + reply('longest'); + } else if(document.getElementById('shortest').checked){ + reply('shortest'); + } else{ + reply('random'); + } + +}) + +// Get dog images from API and set image source with url which from came API +function showDogRandom(){ + console.log('show dog'); + let getImage = new XMLHttpRequest(); + getImage.onreadystatechange = function(){ + if(getImage.readyState == XMLHttpRequest.DONE){ + const data = JSON.parse(getImage.responseText).message; + const imageElement = document.querySelector('#dog-image'); + const randomImageElement = document.querySelector('.random-dog-image'); + imageElement.setAttribute('style','display:inline'); + randomImageElement.src = data; + } + } + getImage.open('GET', 'https://dog.ceo/api/breeds/image/random', true); + getImage.send(); +} +// show alert after write ser an alarm +function setAnAlarm(){ + alert('Did you forget about me? It’s your friend, the Alarm!'); +} + +// get Weather from openweathermap api + +async function getWeather(url){ + let response = await fetch(url); + let data = await response.json(); + return data; +} + diff --git a/chatbot_style.css b/styles/chatbot_style.css similarity index 90% rename from chatbot_style.css rename to styles/chatbot_style.css index a915556..23cf529 100755 --- a/chatbot_style.css +++ b/styles/chatbot_style.css @@ -1,53 +1,60 @@ -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; +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 { + width: 100%; + padding: 8px; + font-size: 14px; + border: 1px solid #ddd; +} + +input:focus { + outline: none; +} + +textarea:focus { + outline: none; +} + +#dog-image{ + display: none; +} +.random-dog-image{ + width: 500px; } \ No newline at end of file