mh108
2/2/2018 - 8:14 PM

Pirate Translator v2

Pirate Translator v2, w/ dispatcher function

toPirate2.css
content_copyfile_download
body {
  width: 1200px;
}

/* buttons groups */
button {
  float: left;
  font-size: 20px;
}

.button1 {
  /* Green */
  background-color: #4CAF50;
  color: white;
}

.button2 {
  /* Blue */
  background-color: #008CBA;
  color: white;
}

.button3 {
  /* Red */
  background-color: #f44336;
  color: white;
}

.button4 {
  background-color: yellow;
  color: black;
}

.category {
  font-size: 150%;
  font-weight: bold;
  color: #DD0000;
}

/* style rule for the Clear button */
#clear {
  font-size: 24px;
  background-color: #0b00d6;
  color: white;
  padding: 5px;
  border-radius: 5px;
}

h1 {
  width: 850px;
  color: #336699;
}

hr {
  width: auto;
}

img {
  width: 200px;
  float: right;
  border: thin solid;
  padding: .2em;
  margin: .2em;
  background-color: #336699;
}

textarea {
  font-size: 24px;
}
toPirate2.js
content_copyfile_download
// jshint esversion: 6

//dispatcher function
let main = function() {
  //dispatch on button id

  if (this.id == "b1") {
    //append new content to textarea, using the assignment operator
    document.querySelector("textarea").value =
      document.querySelector("textarea").value + "Ahoy! ";
  } else if (this.id == "b2") {
    //append new content to textarea, using the shorthand assignment operator
    document.querySelector("textarea").value += "Ya lubber! ";
  } else if (this.id == "clear") {
    document.location.reload();
  }
};

window.addEventListener("load", function() {
  let buttons = document.querySelectorAll("button");
  for (var i = 0; i < buttons.length; ++i)
    buttons[i].addEventListener("click", main);
});
toPirate2.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Pirate Translator</title>
  <link rel="stylesheet" href="toPirate2.css" />
</head>

<body>
  <h1>
    <img src="pirate.png" alt="Blackbeard" />Land Lubber's Pirate Translator
  </h1>
  <p>
    Click the buttons to translate words and/or phrases from English to
    <em>Standard Pirate</em>.
  </p>
  <hr />

  <table>
    <tr>
      <td class="category">Greetings:</td>
      <td>
        <button class="button1" id="b1">Hello</button> <button class="button2" id="b2">Pardon me</button><button class="button3" id="b3">Hail!</button> <button class="button4" id="b4">I say!</button>
      </td>
    </tr>
    <tr>
      <td class="category">People:</td>
      <td>
        <button class="button1" id="b5">Sir</button> <button class="button2" id="b6">Madam</button><button class="button3" id="b7">Officer</button> <button class="button4" id="b8">Friend</button>
      </td>
    </tr>
  </table>
  <br /><br />
  <textarea rows="3" cols="51"></textarea>
  <p><button id="clear">Reset</button></p>
  <script src="toPirate2.js"></script>
</body>

</html>