2019-05-01+Web+Designer+UK

Builda voicecontrolled UI

Tutorials

17. Add purpose

Now as you have a working example, there needs to

be some purpose to the interface, so let’s make this so

that users can input reviews. Save the page and then

choose Save As, with the new name of ‘reviews.html’.

Add the following HTML elements just after the <div

id=”wrapper”> line.

<h1>Product Reviews</h1>

<div id=”reviews”></div>

18. Total Submission

The previous code will hold the reviews. The user

will need to submit their speech input, so add the

submit button right after the ‘clear text’ button,

which will be around line 28 in your code. Then

you can move down to the JavaScript for the

next step.

<button id=”submit” class=”button”>Submit

Review</button>

19. New interface elements

At the top of your Javascript add the new

variables to hold the references to the new interface

elements that have just been added. These will

provide you with a way to submit and display the

results on the screen within the ‘reviews’ section of

the page.

var submit = document.getElementById(‘submit’);

var review = document.getElementById(‘reviews’);

20. Submit the entry

Now the code here will handle when the user

18

clicks the submit button, place this right before the

‘clear’ button code, which should be around line

88 in your code. First, a paragraph tag is created

and the speech input is subsequently added

into this. This will then be added into the

‘review’ section.

submit.addEventListener(‘click’, function(){

let p = document.createElement(‘p’);

var textnode= document.createTextNode

(transcription.value);

p.appendChild(textnode);

review.appendChild(p);

let today= new Date();

let s = document.createElement(‘small’);

21. Final Submission

The date is added so that the review is timestamped

into the document. Finally a horizontal rule is added to

show where each review ends, then the text is cleared

ready for new input. Save the page and test this. You

will see that you can now submit your speech into the

page as reviews. For persistence you would need to

use a database to store these results.

textnode = document.createTextNode(today);

s.appendChild(textnode);

review.appendChild(s);

let hr = document.createElement(‘hr’);

review.appendChild(hr);

transcription.textContent = ‘’;

});

21

60 ttttttttttttttttttttttttttttttttttttttttttttttttttutorial