Skip to content

homework Chatbot #8

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
cuilhan wants to merge 1 commit into
base: Umit-Ilhan
Choose a base branch
from
Open

homework Chatbot #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 5 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
<!DOCTYPE HTML>
<head>
<title>My First Chatbot</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="styles/style.css">
</head>

<body>
<div id="demo">
<h1>My first chatbot!</h1>
<h3>Talk to your bot!</h3>
<input id="input" type="text" placeholder="Say something" />
<input id="input" type="text" placeholder="You can ask me 'How are you?'" />
<button id="submit">Submit</button>
<h3>Chat history</h3>
<div id="chatBot">
<textarea id="output" name="ChatHistory" rows="15"></textarea>
</div>
</div>


<script type="text/javascript" src="scripts/app.js" defer></script>
</body>

</html>
33 changes: 33 additions & 0 deletions scripts/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
// Input and Output content declared
const chatbotIO = {
input : "HOW ARE YOU?",
output : "GREAT"
};
// show chatbot input and output element in console
console.log(chatbotIO);

// comparison of two values(user input and our input) and call push content function
function reply(){
const questionValue = document.querySelector("#input").value;
if(questionValue.toUpperCase() === chatbotIO.input){
pushContent(questionValue, chatbotIO.output);
} 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");
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
document.querySelector("#submit").addEventListener("click", function(){
reply();
})
4 changes: 2 additions & 2 deletions style.css → styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@ body {
}

#demo textarea {
padding: 8px;
padding: 4px;
font-size: 14px;
border: 1px solid #ddd;
width: 800px;
width: 98%;
}

input:focus {
Expand Down