Skip to content

Chatbot part4 #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
esyasar wants to merge 3 commits into
base: Elif-Sude-Yasar
Choose a base branch
from
Open

Chatbot part4 #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4cec9e0
chatbot part-2
esyasar Sep 22, 2019
31d6723
chatbot-part3
esyasar Oct 1, 2019
87e4972
Chatbot-part4
esyasar Oct 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions chatbot2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
//I declared variable for users inputs
//and, each input have three possible output.

var firstData = [
{ input: ['hello', 'hi', 'greetings'],
output : ["Hey", "Hello", "Greetings"]
},

{ input: ['what is your favourite colour?', 'who is your favourite hyf instructor?', 'who is your role model?'],
output: ['I am not sure.', 'There are too many to choose from.', 'I like everyone.']
},

{ input: ['how are you?', 'how is the weather today?', 'how is canada doing in the olympics?'],
output: ['Fine', 'Great', 'Not so good']
},

{ input: "show me a dog",
output: showMeaDog()
},

{ input: "set an alarm",
output: delayedAlert()
}
];

//console.log(firstData);
Copy link
Contributor

@saraalmouaswas saraalmouaswas Oct 13, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't forget to clean up your code. Don't leave console logs in here


function reply(){

// this variable taking the input from what user type and make it lowercase
var question = document.querySelector("#input").value.toLowerCase();

// this variable will store the answers from the chatBot
var history = document.querySelector("#output");

// this is for to choose random number from 0 to 2
var randomNumber = Math.floor((Math.random() * 3 ));

// I assigned an array with no value.
var filterType = null;

// this variable searching the input arrays for possible answers.

const filtered = firstData.filter((item) => item.input.includes(question));

let shortAnswer = output[0].output.sort((a, b) => a.length - b.length );
let longAnswer = output[0].output.sort((a, b) => b.length - a.length);

/* I declared a conditional statement to check if users input and data input are matching or not.
If they are matching, it will give the possible answer depends on which radio button that user clicked. */
if(filtered.length > 0)
{

Copy link
Contributor

@saraalmouaswas saraalmouaswas Oct 13, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fix your spacing, no need for so many empty lines

//if the user choose shortest answer
if(document.querySelector("#shortest").checked === true)
{
var computer = shortAnswer;

//if the user choose longest answer
}
else if(document.querySelector("#longest").checked === true){

var computer = longAnswer;

//if the user choose random answer
}
else {
var computer = filtered.output[randomNumber];
}

// if the user enters a input that is not in the input data
}
else {
history.textContent = "I don't understand that command. Please enter another";
}

history.innerHTML += `You: ${question}\nbot: ${computer}\n`
};

// attached a 'click' event listener to button to call function.
document.getElementById("submit").addEventListener("click", function(){
reply()
});


// function to get image with API and display it on the HTML page

function showMeaDog(){
var image = new XMLHttpRequest();
image.onreadystage = function() {
if (image.readyStage === 4){
const data = JSON.parse(image.responseText);

document.getElementById("apiImage").setAttribute('src', data.message)
}
}
image.open('GET', "https://dog.ceo/api/breeds/image/random", true);
image.send(null);
}

// function to show a message after 2 seconds
function delayedAlert(){
setTimeout( function(){
alert("Did you forget about me? It’s your friend, the Alarm!");},2000);
}
13 changes: 8 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@
<head>
<title>My First Chatbot</title>
<link rel="stylesheet" type="text/css" href="chatbot_style.css">
<script src="chatbot2.js" defer></script>
</head>

<body>
<div id="demo">

<h1> My first chatbot! </h1>
<h3> Talk to your bot!</h3>

<div id="user">
<input id="input" type="text" placeholder="Say something" />
<button id="submit">Submit</button>
Expand All @@ -18,16 +19,18 @@ <h3> Talk to your bot!</h3>
<input type="radio" name="filterType" class="filterType" id="shortest" value="Shortest Answer"> Shortest Answer
<input type="radio" name="filterType" class="filterType" id="longest" value="Longest Answer"> Longest Answer
</div>

<br />

<h3> Chat history </h3>
<div id="chatBot">
<textarea id="output" name="ChatHistory" rows="15"></textarea>
<br />
</div>
</div>

</div>
<div>
<img id="apiImage" src="" alt="">
</div>
</body>

</html>
</html>