diff --git a/style.css b/css/style.css similarity index 95% rename from style.css rename to css/style.css index b4c8731..5d38ef6 100644 --- a/style.css +++ b/css/style.css @@ -1,7 +1,7 @@ button { font-family: Helvetica; font-size: 10pt; - width: 92px; + /*width: 92px;*/ } textarea { @@ -21,6 +21,7 @@ body { margin-left: auto; margin-right: auto; padding: 20px; + background-color: #F8F8F8; border: 1px solid #ccc; box-shadow: 0 0 10px #999; @@ -29,7 +30,7 @@ body { color: black; } -#demo input { +#demo #input { padding: 8px; font-size: 14px; border: 1px solid #ddd; @@ -49,4 +50,4 @@ input:focus { textarea:focus { outline: none; -} \ No newline at end of file +} diff --git a/index.html b/index.html index 4793879..5777cbd 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,36 @@ My First Chatbot - + +
-

My first chatbot!

-

Talk to your bot!

- - -

Chat history

+ +

My first chatbot!

+

Talk to your bot!

+ +
+
+ + + + Random + Shortest Answer + Longest Answer +
+
+ +
+ +

Chat history

-
+
+
+ - \ No newline at end of file + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..48b925e --- /dev/null +++ b/js/script.js @@ -0,0 +1,74 @@ +//1.In your JavaScript code, declare a variable and initialize it as an object. +//2.Add two properties to the object: ‘input’ and ‘output’. +// const chatbot = { +// input:['hello', 'how are you?', 'what is your favourite colour?'], +// output:['hi', 'great!', 'i have so many favorites it\'s hard to choose one.'] +// }; +//console.log(chatbot); +const chatbot = [ + { + input: ['hello', 'hi', 'greetings'], + output: ['hello', 'hey', 'greetings'] + }, + { + input: ['how are you?', 'how is the weather today?', 'how is Canada doing in the Olympics?'], + output: ['fine', 'great', 'not so good'] + }, + { + input: ['what is your favourite colour?', 'who is your favourite HYF instructor?', 'who is your role model?'], + output: ['i am not sure', 'i have so many favorites it\'s hard to choose one.', 'i like every one'] + }, + +]; +//get a random number between 0 and 2 + +function reply() { + + let randomNumber = Math.floor((Math.random() * 3)); + //get the input value ,, and convert it to lowercase + let question = document.getElementById('input').value.toLowerCase(); + let filterType = null; + //get the array mach the input value + //const output = chatbot.filter(item => item.input === question); + const output = chatbot.filter(item => item.input.includes(question)); + //console.log(output.indexOf(question)); + + //if there is nothing inside the input then do nothing + if(question === ''){ return false; } + appendToOutput(question); + //check if question founded on the chatbot object + if(output.length > 0){ + if(document.getElementById('longest').checked){ + lOutput = output[0].output.sort((a, b) => b.length - a.length); + appendToOutput(lOutput[0], 1); + }else if(document.getElementById('shortest').checked){ + sOutput = output[0].output.sort((a, b) => a.length - b.length ); + appendToOutput(sOutput[0], 1); + }else{ + appendToOutput(output[0].output[randomNumber], 1); + } + + }else{ + //if not found appen this msg to the textarea + appendToOutput("I don't understand that command. Please enter another.",1); + } +} + +//this function to add a new message to the top of the textarea +function appendToOutput(msg, sender) { + //who send the msg ? bot or user(you) + sender = (sender) ? 'ChatBot':'You'; + let newLine = (sender === 'ChatBot')? '\n':'\n\n'; + //get the old value ot textarea and add to it the new msg + document.getElementById('output').textContent = sender + ' : ' + msg + newLine + document.getElementById('output').textContent; +} + + +//when the form submited do this >>> ,, i have already changed the type of button to submit , so each click of the button will submit the form +document.getElementById('chatbot-form').addEventListener('submit', function(e) { + e.preventDefault(); + reply(); + document.getElementById('chatbot-form').reset(); + +}) +