In the Pirate Translator web app, individual button elements differ only in the value of their id attribute and the button content (the word/phrase to be translated).

By using and array, it is possible to generate the buttons dynamically, so that you do not have to manually add new button elements every time the vocabulary expands. A) Download toPirate3.js, toPirate3-table.html, and toPirate3.css from Github to your p5 folder. B) Copy your pirate image into to your p5 folder. C) Open your toPirate2.html from Project 3 in Atom and Save As.. toPirate3.html. Replace your HTML table in toPirate3.html with the table in toPirate3- table.html. Preview toPirate3.html in Chrome. Two rows of the table should populate dynamically when the page loads. If necessary, debug by opening the DevTools Console, and checking for error messages. D) Modify toPirate3.css to style the second row of buttons.

E) Add four more words/phrases to the words array in the addButtons function in toPirate3.js. F) In the addButtons function, add a for loop that adds a third row of buttons to the table. Add the necessary style classes to toPirate3.css to style the buttons. Test and debug your web app. G) Repeat steps E-F to add a fourth row of buttons to the table. Test and debug your web app. H) Repeat steps E-F to add a fifth row of buttons to the table.

toPirate3.html

 
 Greetings: 
 People: 
 Questions: 
 Articles: 
 Places: 

toPirate3.js

// jshint esversion: 6 let addButtons = function() { //array of English words/phrases for buttons let words = ["pardon me", "excuse me", "hail", "I say", "sir", "madam", "officer", "friend", "alpha", "bravo", "charley", "delta"]; let newTD, newButton, tableRows = document.querySelectorAll("tr"); //add a td containing 4 buttons to row 1 newTD = document.createElement("td"); //create buttons for (let i = 0; i < 4; ++i) { //create button newButton = document.createElement("button"); //get button content from array newButton.textContent = words[i]; //set id attribute newButton.setAttribute("id", "btn" + i); //set style class attribute newButton.setAttribute("class", "btn" + i); //append button to the td element newTD.appendChild(newButton); } //append new td element to initial row of table tableRows[0].appendChild(newTD); //add a button group to row 2 of table newTD = document.createElement("td"); for (let i = 4; i < 8; ++i) { newButton = document.createElement("button"); newButton.textContent = words[i]; newButton.setAttribute("id", "btn" + i); newButton.setAttribute("class", "btn" + i); //append button to the td element newTD.appendChild(newButton); } //append new td element to second row of table tableRows[1].appendChild(newTD); //add a button group to row 3 of table // . . . }; // define a dispatcher to handle all button clicks let dispatcher = function() { //this keyword is set to the button that fired the event console.log(this.id); //dispatch on button id if (this.id == "btn0") document.getElementById("outBox").value = document.getElementById("outBox").value + "Avast! "; else if (this.id == "btn1") document.getElementById("outBox").value += "Arr! "; else if (this.id == "btn2") document.getElementById("outBox").value += "Ahoy! "; else if (this.id == "btn3") document.getElementById("outBox").value += "Shape up! "; }; //define the onload handler let onloadHandler = function() { //add all buttons to the table addButtons(); //Register the onclick handler for all the buttons var buttons = document.querySelectorAll("button"); for (let i = 0; i < buttons.length; ++i) { buttons[i].addEventListener("click", dispatcher); } }; //register the onload handler window.addEventListener("load", onloadHandler);

toPirate3.css

body { width: 800px; } /* buttons groups */ button { float: left; font-size: 20px; } .btn0 { /* Green */ background-color: #4CAF50; color: white; } .btn1 { /* Blue */ background-color: #008CBA; color: white; } .btn2 { /* Red */ background-color: #f44336; color: white; } .btn3 { background-color: yellow; color: black; } .category { font-size: 150%; font-weight: bold; color: #DD0000; } /* style rule for the Clear button */ #clear { font-size: 18px; background-color: #4CAF50; color: white; padding: 3px; } h3 { width: 600px; } hr { width: auto; } img { width: 200px; float: right; border: thin solid; padding: .2em; margin: .2em; } textarea { font-size: 24px; }