// My globals
var output = $("#output");
var extra_customizing = $("#extra-customizing");
String.prototype.cap = function() { // needed or demonstration
return this.charAt(0).toUpperCase() + this.slice(1);
}
function translate() {
var input = $("#input");
var value = input.val();
// Retriving #customizing
/*
I retrieve the values of the input boxes, in order to replace them later
*/
// needed or demonstration
var IDa = $("#a").val();
var IDb = $("#b").val();
var IDc = $("#c").val();
var IDd = $("#d").val();
// Retriving #extra-customizing
/*
Using the same logic as the other ones
*/
var ID_ax = $("#Ax").val(); // input
var ID_ay = $("#Ay").val(); // output
var ID_bx = $("#Bx").val(); // input
var ID_by = $("#By").val(); // output
var ID_cx = $("#Cx").val(); // input
var ID_cy = $("#Cy").val(); // output
/*
If the user inputs something to replace, they MUST have something to to replace it with(may change later)
*/
if(ID_ax != "" && ID_ax == "") {
alert("You have not insterted a value in #1");
}
if(ID_bx != "" && ID_bx == "") {
alert("You have not insterted a value in #2");
}
if(ID_cx != "" && ID_cx == "") {
alert("You have not insterted a value in #3");
}
// Setting
var mapObj = {
// Setting #customizing
/*
I first select what the user would write, and the what it should be replaced with
*/
a: IDa,
b: IDb,
c: IDc,
d: IDd,
A: IDa.cap(),
B: IDb.cap(),
C: IDc.cap(),
D: IDd.cap(),
// Setting #extra-customizing
/*
I'm trying to use the same logic, but it is unsuccesful
*/
ID_ay: ID_ax,
ID_by: ID_bx,
ID_cy: ID_cx
};
// Translating
/*
Below is the code used to replace letters
*/
var re = new
RegExp(Object.keys(mapObj).join("|"),"g");
value = value.replace(re, function(matched) {
return mapObj[matched];
});
output.val(value);
}
body {
background-color: #cccccc;
color: #444444;
}
hr {
width: 60%;
background-color: #999999;
border: none;
padding: 0;
margin: 0 auto 0 auto;
}
#customizing {
font-family: "courier";
width: calc(50em + 195px);
width: -moz-calc(50em + 195px);
margin: auto;
font-size: .8em;
}
#extra-customizing {
font-family: "courier";
width: calc(55em + 282px);
width: -moz-calc(55em + 282px);
margin: auto;
font-size: .8em;
margin-top: .5em;
padding-top: .5em;
padding-left: .5em;
padding-right: .5em;
border-radius: 2px;
}
#customizing input, #extra-customizing input {
font-family: "courier";
width: 3em;
margin-left: 5px;
margin-right: 10px;
font-family: "courier";
text-align: center;
font-size: .8em;
padding-bottom: .3em;
padding-top: .2em;
background-color: #111111;
color: #aaaaaa;
border: none;
border-radius: 2px;
margin-bottom: 1em;
}
#extra-customizing input {
margin-right: 15px;
}
#translator {
width: 100%;
}
#extra-customize {
width: 320px;
margin: .2em auto 1em auto;
}
#extra-customize input {
border: none;
padding: 0;
margin: 0;
width: 1em;
height: .9em;
}
#input {
width: 40%;
height: 40vh;
float: left;
padding: .43%;
margin: 0;
margin-left: 5%;
border: none;
background-color: #111111;
color: #aaaaaa;
border-radius: 2px;
font-size: 1em;
outline: none;
resize: none;
overflow: auto;
}
#inputB {
font-family: "courier";
width: 8.28%;
padding: 0;
margin: 0;
padding-top: 3px;
padding-bottom: 3px;
border: none;
background-color: #1f1f1f;
color: #aaaaaa;
border-radius: 2px;
font-size: .8em;
resize: none;
cursor: pointer;
outline: none;
}
#inputB:hover {
background-color: #aaaaaa;
color: #1f1f1f;
}
#output {
width: 40%;
height: 40vh;
float: right;
padding: .43%;
margin: 0;
margin-right: 5%;
border: none;
background-color: #111111;
color: #aaaaaa;
border-radius: 2px;
font-size: 1em;
outline: none;
resize: none;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="customizing">
a<input type="text" id="a" value="a" maxlenght="3">
b<input type="text" id="b" value="b" maxlenght="3">
c<input type="text" id="c" value="c" maxlenght="3">
d<input type="text" id="d" value="d" maxlenght="3">
</div>
<hr>
<div id="extra-customizing">
1<input type="text" id="Ax" value="" maxlength="5">:<input type="text" id="Ay" value="" maxlength="7">
2<input type="text" id="Bx" value="" maxlength="5">:<input type="text" id="By" value="" maxlength="7">
3<input type="text" id="Cx" value="" maxlength="5">:<input type="text" id="Cy" value="" maxlength="7">
</div>
<div id="translator">
<textarea id="input"></textarea>
<input type="button" value="Translate" id="inputB" onclick="translate()">
<textarea id="output" readonly></textarea>
</div>
