Using the provided HTML, CSS, and JavaScript as a starting point, emulate the user experience of the popular childrens toy, the Mattel See N Say Storymaker

2. Download the provided .zip file (includes HTML, CSS, and JS), extract the contents, then open the HTML file in a browser and click on the button. 3. Examine the JavaScript note that by setting a string value to the variable, textToSpeak and clicking the button, the built-in TextToSpeech API will read the words aloud (in every browser except MSIE but Edge is fine). 4. Edit the HTML file to include 5 buttons each one will pick a random phrase from a JavaScript array (use the image on the last page of this assignment to build each of the five arrays). 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). 5. 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. 6. Create a sixth button that will actually pass the value to textToSpeak to the speakNow() function (this part of the assignment is already built for you). 7. Once youve completed the functionality of the interface, add some CSS to make the page visually attractive (dont spend too much time on this the focus is the JS). 8. Ensure that all your HTML, CSS, and JS is well-commented, formatted, and organized.

app.js

/* 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.htlml