Edit the HTML file to include 5 buttons each one will pick a random phrase from a JavaScript array (use the image ).

Note that the first column is a list of nouns (forming the sentence subject), the second is a list of verbs, the third is a list of adjectives, the fourth, another list of nouns, and the fifth consists of a number of places (or settings).

The user will push each of the buttons, and each will concatentate the random word from its array, eventually building the text string that will be assigned to the variable textToSpeak.

Create a sixth button that will actually pass the value to textToSpeak to the speakNow() function (this part is already built).

Add another button that generates a random story with one click.

Add a reset button so that another story can be created.

app.js

// Assignment 1 | COMP1073 Client-Side JavaScript

/* Variables

-------------------------------------------------- */

// Create a new speechSynthesis object

var synth = window.speechSynthesis;

// Learn more about SpeechSynthesis.speak() at https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/speak

var textToSpeak = 'This is the text string that you will generate with your script';

var speakButton = document.querySelector('button');

/* Functions

-------------------------------------------------- */

function speakNow(string) {

// Create a new speech object, attaching the string of text to speak

var utterThis = new SpeechSynthesisUtterance(string);

// Actually speak the text

synth.speak(utterThis);

}

/* Event Listeners

-------------------------------------------------- */

// Onclick handler for the button that speaks the text contained in the above var textToSpeak

speakButton.onclick = function() {

speakNow(textToSpeak);

}

index.html