Design and implement a better Web page for translating English text into Pirate
ID: 3907097 • Letter: D
Question
Design and implement a better Web page for translating English text into Pirate talk. The JavaScript code for performing the translation is provided below. The PHRASES array contains English words/phrases and their pirate translations. The array is used by the Translate function, which takes a string as input, searches that string for substrings from PHRASES, and replaces the English phrases with their pirate translations.
The Web page should include a text area where the user can enter text, a button or clickable image to initiate the translation, and another text area where the translated text will appear. Feel free to be creative, adding images or embellishments to the page and expanding the English-Pirate vocabulary in PHRASES.
}
Explanation / Answer
Given below is the html code with inline css and javascript that together comprises the Web page that translates plain text to pirate text:
<!doctype html>
<html>
<head>
<title>Pirate Translator</title>
<style>
body{
text-align: center;
font-family: monospace;
}
.translated{
width:30%;
padding:1em;
font-size:1em;
background-color: #1a1a1a;
border-radius: 3px;
color:white;
margin-left: auto;
margin-right:auto;
}
input{
width:20%;
padding:0.5em ;
border-radius: 3px;
margin-left: auto;
margin-right:auto;
background-color: #efefef;
}
button{
width:10%;
padding:0.5em ;
border-radius: 3px;
margin-left: auto;
margin-right:auto;
}
</style>
</head>
<body>
<h1>Write your plain text below!</h1>
<br/>
<input type="text" name="translator" id="PlainText"/>
<button>Translate</button>
<br/>
<br/>
<div class="translated" id="box">-- Translated Text --</div>
<script type="text/javascript">
function Capitalize(str)
// Returns: a copy of str with the first letter capitalized
{
return str.charAt(0).toUpperCase() + str.substring(1);
}
function Translate(text)
// Returns: a copy of text with English phrases replaced by piratey equivalemts
{
for (var i = 0; i < PHRASES.length; i++) {
var toReplace = new RegExp("\b"+PHRASES[i][0]+"\b", "i");
var index = text.search(toReplace);
while (index != -1) {
if (text.charAt(index) >= "A" && text.charAt(index) <= "Z") {
text = text.replace(toReplace, Capitalize(PHRASES[i][1]));
}
else {
text = text.replace(toReplace, PHRASES[i][1]);
}
index = text.search(toReplace);
}
}
return text;
}
function Display(){
//Function to display translated text in appropriate location
var x = document.getElementById("PlainText").value;
var translation=Translate(x);
var result="Translated Text: "+translation;
document.getElementById("box").innerHTML=result;
}
PHRASES = [["hello", "ahoy"], ["hi", "yo-ho-ho"], ["pardon me", "avast"],
["excuse me", "arrr"],
["my", "me"], ["friend", "me bucko"], ["sir", "matey"],
["madam", "proud beauty"], ["miss", "comely wench"],
["stranger", "scurvy dog"], ["officer", "foul blaggart"],
["where", "whar"], ["is", "be"], ["the", "th'"], ["you", "ye"],
["tell", "be tellin'"], ["know", "be knowin'"],
["how far", "how many leagues"], ["old", "barnacle-covered"],
["attractive", "comely"], ["happy", "grog-filled"],
["nearby", "broadside"], ["restroom", "head"], ["restaurant", "galley"],
["hotel", "fleabag inn"], ["pub", "Skull & Scuppers"],
["bank", "buried trasure"]
];
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.