From f7f41af8d3e9491ebf1a43e155b7fa38c0e3bc3f Mon Sep 17 00:00:00 2001 From: inanfatih Date: Sun, 22 Sep 2019 20:59:09 -0400 Subject: [PATCH 1/5] chatbot v2 --- chatbot_style.css | 53 ---------------------------------- index.html | 5 ++-- script.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++ style.css | 47 +++++++++++++++++++++++++++++++ 4 files changed, 122 insertions(+), 55 deletions(-) delete mode 100755 chatbot_style.css create mode 100644 script.js create mode 100644 style.css diff --git a/chatbot_style.css b/chatbot_style.css deleted file mode 100755 index a915556..0000000 --- a/chatbot_style.css +++ /dev/null @@ -1,53 +0,0 @@ -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 { - padding: 8px; - font-size: 14px; - border: 1px solid #ddd; - width: 800px; -} - -input:focus { - outline: none; -} - -textarea:focus { - outline: none; -} \ No newline at end of file diff --git a/index.html b/index.html index c516c16..b45549a 100755 --- a/index.html +++ b/index.html @@ -1,7 +1,8 @@ My First Chatbot - + + @@ -11,7 +12,7 @@

My first chatbot!

Talk to your bot!

- + Random diff --git a/script.js b/script.js new file mode 100644 index 0000000..7d8ca8b --- /dev/null +++ b/script.js @@ -0,0 +1,72 @@ +//object containing inputs and outputs arrays +let chatInputsOutputs = [ + { + inputs: 'Hello', + outputs: ['Hello', 'Hey', 'Greetings'], + }, + { + inputs: 'What is your favourite colour?', + outputs: ['I am not sure.', 'White', 'Blue'], + }, + { + inputs: 'How are you?', + outputs: ['Great!', 'Not bad', 'Good'], + }, +]; +let randomNumber = Math.floor(Math.random() * 3); + +console.log(chatInputsOutputs); + +const answerRandom = item => { + item[0].outputs[randomNumber]; +}; +const answerShortest = item => { + item[0].outputs.reduce((a, b) => (a.length < b.length ? a : b)); +}; +const answerLongest = item => { + item[0].outputs.reduce((a, b) => (a.length > b.length ? a : b)); +}; + +const reply = selectedAnswer => { + let question = document.getElementById('input').value.toLowerCase(); + let filterType = null; + + console.log(question); + + const filteredObject = chatInputsOutputs.filter( + item => question === item.inputs.toLowerCase(), + ); + console.log(filteredObject); + + // document.getElementById('output').value = + // chatInputsOutputs.outputs[indexOfQuestion]; + + console.log(answerShortest(filteredObject)); + console.log(answerLongest(filteredObject)); + console.log(answerRandom(filteredObject)); + + if (filteredObject.length === 1) { + if (selectedAnswer === 1) { + document.getElementById('output').value = answerShortest(filteredObject); + } else if (selectedAnswer === 2) { + document.getElementById('output').value = answerShortest(filteredObject); + } else { + document.getElementById('output').value = answerRandom(filteredObject); + } + } else { + //when the input is not recognized + document.getElementById('output').value = + "I don't understand that command. Please enter another."; + } +}; + +document.getElementById('submit').addEventListener('click', function() { + let option = 0; + if (document.getElementById('longest').checked) { + option = 1; + } else if (document.getElementById('shortest').checked) { + option = 2; + } + console.log('submit clicked'); + reply(option); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..574550b --- /dev/null +++ b/style.css @@ -0,0 +1,47 @@ +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 { + padding: 8px; + font-size: 14px; + border: 1px solid #ddd; + width: 800px; +} + +input:focus { + outline: none; +} +textarea:focus { + outline: none; +} From 0286554b39c5226d2061f4875a3cf5fa74a91d7c Mon Sep 17 00:00:00 2001 From: inanfatih Date: Tue, 1 Oct 2019 21:12:22 -0400 Subject: [PATCH 2/5] chatbot3 completed --- index.html | 3 +-- script.js | 66 +++++++++++++++++++++++++++++++++--------------------- 2 files changed, 42 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index b45549a..a6762db 100755 --- a/index.html +++ b/index.html @@ -12,9 +12,8 @@

My first chatbot!

Talk to your bot!

- + - Random Shortest Answer Longest Answer diff --git a/script.js b/script.js index 7d8ca8b..e239c88 100644 --- a/script.js +++ b/script.js @@ -1,65 +1,81 @@ //object containing inputs and outputs arrays let chatInputsOutputs = [ { - inputs: 'Hello', + inputs: ['Hello', 'Hi', 'Greetings'], outputs: ['Hello', 'Hey', 'Greetings'], }, { - inputs: 'What is your favourite colour?', - outputs: ['I am not sure.', 'White', 'Blue'], + inputs: [ + 'What is your favourite colour?', + 'Who is your favourite HYF instructor?', + 'Who is your role model?', + ], + outputs: [ + 'I am not sure.', + 'There are too many to choose from.', + 'I like everyone.', + ], }, { - inputs: 'How are you?', - outputs: ['Great!', 'Not bad', 'Good'], + inputs: [ + 'How are you?', + 'How is the weather today?', + 'How is Canada doing in the Olympics?', + ], + outputs: ['Fine', 'Great', 'Not so good'], }, ]; -let randomNumber = Math.floor(Math.random() * 3); + +const randomNuberGenerator = () => Math.floor(Math.random() * 3); console.log(chatInputsOutputs); const answerRandom = item => { - item[0].outputs[randomNumber]; + return item[0].outputs[randomNuberGenerator()]; }; const answerShortest = item => { - item[0].outputs.reduce((a, b) => (a.length < b.length ? a : b)); + return item[0].outputs.reduce((a, b) => (a.length < b.length ? a : b)); }; const answerLongest = item => { - item[0].outputs.reduce((a, b) => (a.length > b.length ? a : b)); + return item[0].outputs.reduce((a, b) => (a.length > b.length ? a : b)); }; +// reply function const reply = selectedAnswer => { - let question = document.getElementById('input').value.toLowerCase(); - let filterType = null; + let question = document.getElementById('input').value; console.log(question); - const filteredObject = chatInputsOutputs.filter( - item => question === item.inputs.toLowerCase(), - ); - console.log(filteredObject); + document.getElementById('output').value += + 'You: ' + document.getElementById('input').value + '\n'; - // document.getElementById('output').value = - // chatInputsOutputs.outputs[indexOfQuestion]; + const filteredObject = chatInputsOutputs.filter(item => { + return item.inputs + .map(item => item.toLowerCase()) + .includes(question.toLowerCase()); + }); - console.log(answerShortest(filteredObject)); - console.log(answerLongest(filteredObject)); - console.log(answerRandom(filteredObject)); + console.log('filteredobject', filteredObject); if (filteredObject.length === 1) { if (selectedAnswer === 1) { - document.getElementById('output').value = answerShortest(filteredObject); + document.getElementById('output').value += + 'Computer: ' + answerLongest(filteredObject) + '\n\n'; } else if (selectedAnswer === 2) { - document.getElementById('output').value = answerShortest(filteredObject); + document.getElementById('output').value += + 'Computer: ' + answerShortest(filteredObject) + '\n\n'; } else { - document.getElementById('output').value = answerRandom(filteredObject); + document.getElementById('output').value += + 'Computer: ' + answerRandom(filteredObject) + '\n\n'; } } else { //when the input is not recognized - document.getElementById('output').value = - "I don't understand that command. Please enter another."; + document.getElementById('output').value += + "Computer: I don't understand that command. Please enter another. \n\n"; } }; +// Event listener of submit button document.getElementById('submit').addEventListener('click', function() { let option = 0; if (document.getElementById('longest').checked) { From b6169cc3521acafb185ceb65e339318a0e81621b Mon Sep 17 00:00:00 2001 From: inanfatih Date: Sun, 6 Oct 2019 18:06:45 -0400 Subject: [PATCH 3/5] chatbot4 --- index.html | 2 +- main.js | 174 +++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 88 --------------------------- 3 files changed, 175 insertions(+), 89 deletions(-) create mode 100644 main.js delete mode 100644 script.js diff --git a/index.html b/index.html index a6762db..151b1c7 100755 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ My First Chatbot - + diff --git a/main.js b/main.js new file mode 100644 index 0000000..2b0283d --- /dev/null +++ b/main.js @@ -0,0 +1,174 @@ +let dogEndpoint = 'https://dog.ceo/api/breeds/image/random'; +let history = []; +let h_input = document.getElementById('input'); +let h_output = document.getElementById('output'); + +//object containing inputs and outputs arrays +let chatInputsOutputs = [ + { + inputs: ['Hello', 'Hi', 'Greetings'], + outputs: ['Hello', 'Hey', 'Greetings'], + }, + { + inputs: [ + 'What is your favourite colour?', + 'Who is your favourite HYF instructor?', + 'Who is your role model?', + ], + outputs: [ + 'I am not sure.', + 'There are too many to choose from.', + 'I like everyone.', + ], + }, + { + inputs: [ + 'How are you?', + 'How is the weather today?', + 'How is Canada doing in the Olympics?', + ], + outputs: ['Fine', 'Great', 'Not so good'], + }, +]; + +const randomNuberGenerator = () => Math.floor(Math.random() * 3); + +console.log(chatInputsOutputs); + +//answer based on the option selected in the radio button +const answerRandom = item => { + return item[0].outputs[randomNuberGenerator()]; +}; + +const answerShortest = item => { + return item[0].outputs.reduce((a, b) => (a.length < b.length ? a : b)); +}; + +const answerLongest = item => { + return item[0].outputs.reduce((a, b) => (a.length > b.length ? a : b)); +}; + +// reply function +const reply = selectedAnswer => { + let question = h_input.value; + let dogLink = ''; + console.log(question); + + history.push('You: ' + question + '\n'); + + console.log(history); + + const filteredObject = chatInputsOutputs.filter(item => { + return item.inputs + .map(item => item.toLowerCase()) + .includes(question.toLowerCase()); + }); + + if (question.toLowerCase().includes('dog')) { + console.log('if dog question'); + + const assignDogLink = () => { + return getPhotos(); + }; + + function getPhoto(aa, assignDogLink) { + dogLink = assignDogLink(); + } + + getPhoto(assignDogLink, function() { + console.log('before doglink assigned'); + dogLink = assignDogLink(); + console.log('+++++++++++', dogLink); + }); + + // getPhoto('', assignDogLink); + } else if (question.toLowerCase().includes('alarm')) { + setAlarm('', delayedAlert()); + } else if (filteredObject.length === 1) { + if (selectedAnswer === 1) { + history.push('Computer: ' + answerLongest(filteredObject) + '\n\n'); + } else if (selectedAnswer === 2) { + history.push('Computer: ' + answerShortest(filteredObject) + '\n\n'); + } else { + history.push('Computer: ' + answerRandom(filteredObject) + '\n\n'); + } + } else { + //when the input is not recognized + history.push( + "Computer: I don't understand that command. Please enter another. \n\n", + ); + } +}; + +function delayedAlert() { + alert('Did you forget about me? It’s your friend, the Alarm!'); +} + +function setAlarm(query, callback) { + setTimeout(function() { + callback(); + }, 2000); +} + +// Event listener of submit button +document.getElementById('submit').addEventListener('click', function() { + let option = 0; + if (document.getElementById('longest').checked) { + option = 1; + } else if (document.getElementById('shortest').checked) { + option = 2; + } + console.log('submit clicked'); + reply(option); + outputPrinter(history); +}); + +function getPhotos() { + let xhr = new XMLHttpRequest(); + let ERROR_MESSAGE = 'Something bad happened!'; + let data = ''; + let message = ''; + console.log('/////////', 'getPhotos'); + + xhr.onreadystatechange = function() { + console.log('/////////', 'onreadystate'); + + if (xhr.readyState == XMLHttpRequest.DONE) { + console.log('/////////', 'true'); + + data = JSON.parse(xhr.response); + console.log(data); + message = data.message; + } else { + console.log('/////////', 'else'); + + message = ERROR_MESSAGE; + } + }; + + xhr.open('GET', dogEndpoint, true); + xhr.send(); + + return message; +} + +const outputPrinter = history => { + let outputToPrint = ''; + history.map(item => { + if (item.substring(0, 6) === 'https:') { + console.log( + '======== a valid url', + '

', + ); + return ( + '
Computer:


' + ); + } + }); + + history.forEach(item => (outputToPrint += item)); + + h_output.innerHTML = outputToPrint; +}; diff --git a/script.js b/script.js deleted file mode 100644 index e239c88..0000000 --- a/script.js +++ /dev/null @@ -1,88 +0,0 @@ -//object containing inputs and outputs arrays -let chatInputsOutputs = [ - { - inputs: ['Hello', 'Hi', 'Greetings'], - outputs: ['Hello', 'Hey', 'Greetings'], - }, - { - inputs: [ - 'What is your favourite colour?', - 'Who is your favourite HYF instructor?', - 'Who is your role model?', - ], - outputs: [ - 'I am not sure.', - 'There are too many to choose from.', - 'I like everyone.', - ], - }, - { - inputs: [ - 'How are you?', - 'How is the weather today?', - 'How is Canada doing in the Olympics?', - ], - outputs: ['Fine', 'Great', 'Not so good'], - }, -]; - -const randomNuberGenerator = () => Math.floor(Math.random() * 3); - -console.log(chatInputsOutputs); - -const answerRandom = item => { - return item[0].outputs[randomNuberGenerator()]; -}; -const answerShortest = item => { - return item[0].outputs.reduce((a, b) => (a.length < b.length ? a : b)); -}; -const answerLongest = item => { - return item[0].outputs.reduce((a, b) => (a.length > b.length ? a : b)); -}; - -// reply function -const reply = selectedAnswer => { - let question = document.getElementById('input').value; - - console.log(question); - - document.getElementById('output').value += - 'You: ' + document.getElementById('input').value + '\n'; - - const filteredObject = chatInputsOutputs.filter(item => { - return item.inputs - .map(item => item.toLowerCase()) - .includes(question.toLowerCase()); - }); - - console.log('filteredobject', filteredObject); - - if (filteredObject.length === 1) { - if (selectedAnswer === 1) { - document.getElementById('output').value += - 'Computer: ' + answerLongest(filteredObject) + '\n\n'; - } else if (selectedAnswer === 2) { - document.getElementById('output').value += - 'Computer: ' + answerShortest(filteredObject) + '\n\n'; - } else { - document.getElementById('output').value += - 'Computer: ' + answerRandom(filteredObject) + '\n\n'; - } - } else { - //when the input is not recognized - document.getElementById('output').value += - "Computer: I don't understand that command. Please enter another. \n\n"; - } -}; - -// Event listener of submit button -document.getElementById('submit').addEventListener('click', function() { - let option = 0; - if (document.getElementById('longest').checked) { - option = 1; - } else if (document.getElementById('shortest').checked) { - option = 2; - } - console.log('submit clicked'); - reply(option); -}); From d063cb74eb6a30aa520744d6bf7582098b50fd14 Mon Sep 17 00:00:00 2001 From: inanfatih Date: Sun, 13 Oct 2019 00:28:36 -0400 Subject: [PATCH 4/5] minor issues on chatbot4 fixed --- index.html | 1 + main.js | 68 +++++++++++++++++++++++++++--------------------------- 2 files changed, 35 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index 151b1c7..39d9c0a 100755 --- a/index.html +++ b/index.html @@ -26,6 +26,7 @@

Chat history


+
diff --git a/main.js b/main.js index 2b0283d..93eeda7 100644 --- a/main.js +++ b/main.js @@ -66,24 +66,25 @@ const reply = selectedAnswer => { if (question.toLowerCase().includes('dog')) { console.log('if dog question'); + getPhotos(); - const assignDogLink = () => { - return getPhotos(); - }; + // const assignDogLink = () => { + // return ; + // }; - function getPhoto(aa, assignDogLink) { - dogLink = assignDogLink(); - } + // function getPhoto(aa, assignDogLink) { + // dogLink = assignDogLink(); + // } - getPhoto(assignDogLink, function() { - console.log('before doglink assigned'); - dogLink = assignDogLink(); - console.log('+++++++++++', dogLink); - }); + // getPhoto(function() { + // console.log('before doglink assigned'); + // dogLink = assignDogLink(); + // console.log('+++++++++++', dogLink); + // }); // getPhoto('', assignDogLink); } else if (question.toLowerCase().includes('alarm')) { - setAlarm('', delayedAlert()); + setAlarm(); } else if (filteredObject.length === 1) { if (selectedAnswer === 1) { history.push('Computer: ' + answerLongest(filteredObject) + '\n\n'); @@ -100,13 +101,13 @@ const reply = selectedAnswer => { } }; -function delayedAlert() { - alert('Did you forget about me? It’s your friend, the Alarm!'); -} - -function setAlarm(query, callback) { +function setAlarm() { setTimeout(function() { - callback(); + history.push( + 'Computer: Did you forget about me? It’s your friend, the Alarm! \n\n', + ); + outputPrinter(history); + alert('Did you forget about me? It’s your friend, the Alarm!'); }, 2000); } @@ -131,17 +132,20 @@ function getPhotos() { console.log('/////////', 'getPhotos'); xhr.onreadystatechange = function() { - console.log('/////////', 'onreadystate'); + console.log('aaaaaa', 'onreadystate'); if (xhr.readyState == XMLHttpRequest.DONE) { - console.log('/////////', 'true'); + console.log('/////////', 'DONE'); data = JSON.parse(xhr.response); console.log(data); message = data.message; + console.log('history: ', history); + console.log('message: ', message); + history.push(message); + outputPrinter(history); } else { - console.log('/////////', 'else'); - + console.log('===========', 'else'); message = ERROR_MESSAGE; } }; @@ -154,21 +158,17 @@ function getPhotos() { const outputPrinter = history => { let outputToPrint = ''; - history.map(item => { + let historyWithLink = history.map(item => { + console.log('item: --- ', item); if (item.substring(0, 6) === 'https:') { - console.log( - '======== a valid url', - '

', - ); - return ( - '
Computer:


' - ); + let linkA = ` +

`; + document.getElementById('dog').innerHTML = linkA; + return `Computer: How is this dog? \n\n `; } + return item; }); - - history.forEach(item => (outputToPrint += item)); + historyWithLink.forEach(item => (outputToPrint += item)); h_output.innerHTML = outputToPrint; }; From 520b543610d8bc4f2cdf76b001ec5ae07cb1d1da Mon Sep 17 00:00:00 2001 From: inanfatih Date: Sun, 13 Oct 2019 16:40:50 -0400 Subject: [PATCH 5/5] chatbot5 completed --- index.html | 2 +- main.js | 65 +++++++++++++++++++++++++++++------------------------- 2 files changed, 36 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index 39d9c0a..175187a 100755 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@

My first chatbot!

Talk to your bot!

- + Random Shortest Answer diff --git a/main.js b/main.js index 93eeda7..dcd8263 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,6 @@ let dogEndpoint = 'https://dog.ceo/api/breeds/image/random'; +let WEATHER_ENDPOINT = + 'http://api.openweathermap.org/data/2.5/forecast?q=Toronto,CA&APPID=6a14d9cbcff440def9a99187b16f3a5d'; let history = []; let h_input = document.getElementById('input'); let h_output = document.getElementById('output'); @@ -31,13 +33,13 @@ let chatInputsOutputs = [ }, ]; -const randomNuberGenerator = () => Math.floor(Math.random() * 3); +const randomNumberGenerator = () => Math.floor(Math.random() * 3); console.log(chatInputsOutputs); //answer based on the option selected in the radio button const answerRandom = item => { - return item[0].outputs[randomNuberGenerator()]; + return item[0].outputs[randomNumberGenerator()]; }; const answerShortest = item => { @@ -49,9 +51,8 @@ const answerLongest = item => { }; // reply function -const reply = selectedAnswer => { +async function reply(selectedAnswer) { let question = h_input.value; - let dogLink = ''; console.log(question); history.push('You: ' + question + '\n'); @@ -67,24 +68,11 @@ const reply = selectedAnswer => { if (question.toLowerCase().includes('dog')) { console.log('if dog question'); getPhotos(); - - // const assignDogLink = () => { - // return ; - // }; - - // function getPhoto(aa, assignDogLink) { - // dogLink = assignDogLink(); - // } - - // getPhoto(function() { - // console.log('before doglink assigned'); - // dogLink = assignDogLink(); - // console.log('+++++++++++', dogLink); - // }); - - // getPhoto('', assignDogLink); } else if (question.toLowerCase().includes('alarm')) { setAlarm(); + } else if (question.toLowerCase().includes('weather')) { + console.log('weather is asked'); + getWeather(); } else if (filteredObject.length === 1) { if (selectedAnswer === 1) { history.push('Computer: ' + answerLongest(filteredObject) + '\n\n'); @@ -94,12 +82,11 @@ const reply = selectedAnswer => { history.push('Computer: ' + answerRandom(filteredObject) + '\n\n'); } } else { - //when the input is not recognized history.push( "Computer: I don't understand that command. Please enter another. \n\n", ); } -}; +} function setAlarm() { setTimeout(function() { @@ -129,14 +116,9 @@ function getPhotos() { let ERROR_MESSAGE = 'Something bad happened!'; let data = ''; let message = ''; - console.log('/////////', 'getPhotos'); xhr.onreadystatechange = function() { - console.log('aaaaaa', 'onreadystate'); - if (xhr.readyState == XMLHttpRequest.DONE) { - console.log('/////////', 'DONE'); - data = JSON.parse(xhr.response); console.log(data); message = data.message; @@ -145,7 +127,6 @@ function getPhotos() { history.push(message); outputPrinter(history); } else { - console.log('===========', 'else'); message = ERROR_MESSAGE; } }; @@ -156,6 +137,29 @@ function getPhotos() { return message; } +async function getWeather() { + let rawData = await fetch(WEATHER_ENDPOINT); + console.log('rawData', rawData); + + let jsonData = await rawData.json(); + console.log('jsonData', jsonData); + + let message = 'Computer: The weather in Toronto for the date: '; + + console.log('output data is here =====> ', jsonData); + let date = new Date(jsonData.list[0].dt_txt); + message += date.toLocaleString(); + message += ' is '; + message += Math.round(jsonData.list[0].main.temp - 273.15); + message += ' Centigrate degrees \n\n'; + + console.log('history: ', history); + console.log('message: ', message); + + history.push(message); + outputPrinter(history); +} + const outputPrinter = history => { let outputToPrint = ''; let historyWithLink = history.map(item => { @@ -164,11 +168,12 @@ const outputPrinter = history => { let linkA = `

`; document.getElementById('dog').innerHTML = linkA; - return `Computer: How is this dog? \n\n `; + return `Computer: This one is my favourite? \n\n`; + } else if (item.substring(0, 5) === 'wthr ') { + return `Computer: The Weather for ? \n\n`; } return item; }); historyWithLink.forEach(item => (outputToPrint += item)); - h_output.innerHTML = outputToPrint; };