Chatbot4 #22
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "liveServer.settings.port": 5501 | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| // 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'] | ||
| } | ||
|
|
||
| ] | ||
|
|
||
| // 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(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"); | ||
|
Contributor
There was a problem hiding this comment. clean up your console logs |
||
| 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!"); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 { | ||
| 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; | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
in the future, you want to create a gitignore folder and add this file in there so that it doesn't get pushed into your projects
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks. I will do.