diff --git a/index.html b/index.html index 4793879..dcfb876 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,23 @@ My First Chatbot - +

My first chatbot!

Talk to your bot!

- +

Chat history

+ + + \ No newline at end of file diff --git a/scripts/app.js b/scripts/app.js new file mode 100644 index 0000000..6bac548 --- /dev/null +++ b/scripts/app.js @@ -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(); +}) \ No newline at end of file diff --git a/style.css b/styles/style.css similarity index 95% rename from style.css rename to styles/style.css index b4c8731..7778788 100644 --- a/style.css +++ b/styles/style.css @@ -37,10 +37,10 @@ body { } #demo textarea { - padding: 8px; + padding: 4px; font-size: 14px; border: 1px solid #ddd; - width: 800px; + width: 98%; } input:focus {