From b9c823b85e2bd5d1b2bffd6365711818d7774a5c Mon Sep 17 00:00:00 2001 From: Umit Ilhan Date: Sun, 22 Sep 2019 15:21:32 -0400 Subject: [PATCH 1/4] homework chatbot 2 --- index.html | 3 +- scripts/app.js | 82 ++++++++++++++ chatbot_style.css => styles/chatbot_style.css | 104 +++++++++--------- 3 files changed, 136 insertions(+), 53 deletions(-) create mode 100644 scripts/app.js rename chatbot_style.css => styles/chatbot_style.css (94%) diff --git a/index.html b/index.html index c516c16..37bb199 100755 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ My First Chatbot - + @@ -28,6 +28,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..7c27e54 --- /dev/null +++ b/scripts/app.js @@ -0,0 +1,82 @@ +console.log("he"); +// Input and output contents declared +const chatbotIO = [ + { + input : "hello", + output : ["Hello", "Hi", "Hey"] + }, + { + input : "hi", + output : ["Hello", "Hi", "Hey"] + }, + { + input : "hey", + output : ["Hello", "Hi", "Hey"] + }, + { + input : "what is your favourite color?", + output : ["I am not sure", "I like every color", "Orange"] + }, + { + input : "how are you?", + output : ["Great", "Cool", "Good"] + }] + + // just check chatbot input output content on console + const list = chatbotIO.filter(io => {return io;}); + console.log(list); + + // random fuction, every time show rondom answer + const random = (io) => { return io[0].output[Math.floor(Math.random()*3)];} + // shortest function, every time show shortest answer + const shortest = (io) =>{ return io[0].output.reduce((first, second) => first.length <= second.length ? first : second)} + // longest function, every time show longest answer + const longest = (io) =>{ return 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; + // i checked that if array input value is equal to our input value + const filterIO = chatbotIO.filter(io => { return questionValue.toLowerCase() === io.input; }) + // response minumum 1 object if input type is inside the array. After i call pushContent() function which button clicked. + 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); + console.log(undefinedContent); + } +} + +// Push and storage every content for user and chatbot. +function pushContent(questionValue, chatbotValue){ + const selectedOutput = document.querySelector("#output"); + const storageOutput = []; + storageOutput.push(`You: ${questionValue}`,`Chatbot: ${chatbotValue}`); + for(let i = 0; i < storageOutput.length; i++ ){ + selectedOutput.textContent += `${storageOutput[i]}\n`; + } +} + +// run reply function after click submit method and control which button clicked. +document.querySelector("#submit").addEventListener("click", function(){ + + if(document.getElementById("longest").checked){ + console.log("longest"); + reply("longest"); + } else if(document.getElementById("shortest").checked){ + console.log("shortest"); + reply("shortest"); + } else{ + console.log("random"); + reply("random"); + } + +}) \ No newline at end of file diff --git a/chatbot_style.css b/styles/chatbot_style.css similarity index 94% rename from chatbot_style.css rename to styles/chatbot_style.css index a915556..a98b7dc 100755 --- a/chatbot_style.css +++ b/styles/chatbot_style.css @@ -1,53 +1,53 @@ -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 { + 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 From 678f20ae43c5b7a12e14ba15c9e7d4e4d26b27f8 Mon Sep 17 00:00:00 2001 From: Umit Ilhan Date: Tue, 1 Oct 2019 17:56:53 -0400 Subject: [PATCH 2/4] chatbot3 updated --- .vscode/settings.json | 3 +++ scripts/app.js | 20 ++++++++------------ 2 files changed, 11 insertions(+), 12 deletions(-) create mode 100644 .vscode/settings.json 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/scripts/app.js b/scripts/app.js index 7c27e54..8dc44bc 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -2,23 +2,15 @@ console.log("he"); // Input and output contents declared const chatbotIO = [ { - input : "hello", + input : ['hello', 'hi', 'greetings'], output : ["Hello", "Hi", "Hey"] }, { - input : "hi", - output : ["Hello", "Hi", "Hey"] - }, - { - input : "hey", - output : ["Hello", "Hi", "Hey"] - }, - { - input : "what is your favourite color?", + 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?", + input : ['how are you?', 'how is the weather today?', 'how is canada doing in the olympics?'], output : ["Great", "Cool", "Good"] }] @@ -37,7 +29,11 @@ const chatbotIO = [ function reply(radioButton){ const questionValue = document.querySelector("#input").value; // i checked that if array input value is equal to our input value - const filterIO = chatbotIO.filter(io => { return questionValue.toLowerCase() === io.input; }) + const filterIO = chatbotIO.filter(ios => { + console.log("ios", ios.input); + return ios.input.includes(questionValue.toLowerCase()); + }) + console.log("filterIO",filterIO); // response minumum 1 object if input type is inside the array. After i call pushContent() function which button clicked. if(filterIO.length === 1){ if(radioButton === "longest"){ From b1f66fb9f77b56d9aeefbe19314cb583de60ac91 Mon Sep 17 00:00:00 2001 From: Umit Ilhan Date: Sun, 6 Oct 2019 10:07:43 -0400 Subject: [PATCH 3/4] chatbot 4 --- index.html | 15 +++++--- scripts/app.js | 75 +++++++++++++++++++++++++++------------- styles/chatbot_style.css | 9 ++++- 3 files changed, 69 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index 37bb199..c51a8b8 100755 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ My First Chatbot + @@ -13,13 +14,17 @@

Talk to your bot!

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

Chat history

diff --git a/scripts/app.js b/scripts/app.js index 8dc44bc..9591732 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -1,4 +1,3 @@ -console.log("he"); // Input and output contents declared const chatbotIO = [ { @@ -12,30 +11,46 @@ const chatbotIO = [ { 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'] + } + +] // just check chatbot input output content on console - const list = chatbotIO.filter(io => {return io;}); - console.log(list); + const list = chatbotIO.filter(io => io); // random fuction, every time show rondom answer - const random = (io) => { return io[0].output[Math.floor(Math.random()*3)];} + const random = (io) => io[0].output[Math.floor(Math.random()*3)]; // shortest function, every time show shortest answer - const shortest = (io) =>{ return io[0].output.reduce((first, second) => first.length <= second.length ? first : second)} + 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) =>{ return io[0].output.reduce((first, second) => first.length >= second.length ? first : second)} + 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 => { - console.log("ios", ios.input); - return ios.input.includes(questionValue.toLowerCase()); + if(ios.input.includes(questionValue.toLowerCase())){ + filterOutput = ios.output[0]; + return ios.input.includes(questionValue.toLowerCase()); + } + }) - console.log("filterIO",filterIO); - // response minumum 1 object if input type is inside the array. After i call pushContent() function which button clicked. - if(filterIO.length === 1){ + // 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(filterIO.length === 1){ if(radioButton === "longest"){ pushContent(questionValue,longest(filterIO)); } else if(radioButton === "shortest"){ @@ -43,36 +58,48 @@ function reply(radioButton){ } else { pushContent(questionValue,random(filterIO)); } - } - else { + } else { const undefinedContent = "I don't understand that command. Please enter another command."; pushContent(questionValue, undefinedContent); - console.log(undefinedContent); } } // Push and storage every content for user and chatbot. function pushContent(questionValue, chatbotValue){ const selectedOutput = document.querySelector("#output"); - const storageOutput = []; - storageOutput.push(`You: ${questionValue}`,`Chatbot: ${chatbotValue}`); - for(let i = 0; i < storageOutput.length; i++ ){ - selectedOutput.textContent += `${storageOutput[i]}\n`; - } + 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){ - console.log("longest"); reply("longest"); } else if(document.getElementById("shortest").checked){ - console.log("shortest"); reply("shortest"); } else{ - console.log("random"); reply("random"); } -}) \ No newline at end of file +}) + +// 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!"); +} \ No newline at end of file diff --git a/styles/chatbot_style.css b/styles/chatbot_style.css index a98b7dc..23cf529 100755 --- a/styles/chatbot_style.css +++ b/styles/chatbot_style.css @@ -38,10 +38,10 @@ body { } #demo textarea { + width: 100%; padding: 8px; font-size: 14px; border: 1px solid #ddd; - width: 800px; } input:focus { @@ -50,4 +50,11 @@ input:focus { textarea:focus { outline: none; +} + +#dog-image{ + display: none; +} +.random-dog-image{ + width: 500px; } \ No newline at end of file From 875e61741ed10b2212f0ff182e7f2d5384293470 Mon Sep 17 00:00:00 2001 From: Umit Ilhan Date: Sun, 13 Oct 2019 15:29:48 -0400 Subject: [PATCH 4/4] update with weather api --- scripts/app.js | 67 +++++++++++++++++++++++++++++++++----------------- 1 file changed, 44 insertions(+), 23 deletions(-) diff --git a/scripts/app.js b/scripts/app.js index 9591732..91c0334 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -2,15 +2,15 @@ const chatbotIO = [ { input : ['hello', 'hi', 'greetings'], - output : ["Hello", "Hi", "Hey"] + 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"] + 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"] + output : ['Great', 'Cool', 'Good'] }, { input : 'show me a dog', @@ -19,6 +19,10 @@ const chatbotIO = [ { input: 'set an alarm', output: ['alarm'] + }, + { + input: 'show me the weather', + output: ['getWeather'] } ] @@ -35,8 +39,8 @@ const chatbotIO = [ // 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 = ""; + 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())){ @@ -46,53 +50,61 @@ function reply(radioButton){ }) // 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"){ + if(filterOutput === 'dog'){ showDogRandom(); - } else if(filterOutput === "alarm"){ + } 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"){ + if(radioButton === 'longest'){ pushContent(questionValue,longest(filterIO)); - } else if(radioButton === "shortest"){ + } 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."; + 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"); + 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(){ +document.querySelector('#submit').addEventListener('click', function(){ - if(document.getElementById("longest").checked){ - reply("longest"); - } else if(document.getElementById("shortest").checked){ - reply("shortest"); + if(document.getElementById('longest').checked){ + reply('longest'); + } else if(document.getElementById('shortest').checked){ + reply('shortest'); } else{ - reply("random"); + reply('random'); } }) // Get dog images from API and set image source with url which from came API function showDogRandom(){ - console.log("show dog"); + 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"); + const imageElement = document.querySelector('#dog-image'); + const randomImageElement = document.querySelector('.random-dog-image'); + imageElement.setAttribute('style','display:inline'); randomImageElement.src = data; } } @@ -101,5 +113,14 @@ function showDogRandom(){ } // show alert after write ser an alarm function setAnAlarm(){ - alert("Did you forget about me? It’s your friend, the Alarm!"); -} \ No newline at end of file + 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; +} +