Pirate Translator v2, w/ dispatcher function
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;
}
// 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);
});
<!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>