We said that this tutorial was coming soon, but we got delayed while building some exciting new features due to be released...
Anway, here it is!
Step 1. Add the elements.
In this tutorial we have a Text Box which is used to enter the English which will be converted. Give the Text Box the #id of $w('#englishInput').
The display element that we used is a Text Element, give this the #id of $w('#morseResult').
Step 2. Add the code.
We start this step by adding a $w.onReady() handler to the page.
This will ensure that the converter will function properly.
$w.onReady( () => {
//the rest of the code will go here
});Next, we add the onKeypress() event which will record the text entered.
$w.onReady( () => {
$w('#englishInput').onKeypress( () => {
//the rest of the code will go here
});
});The next step is adding a setTimeout function, which allows us to make sure that we convert all the characters, instead of missing the last character which is what would happen otherwise.
$w.onReady( () => {
$w('#englishInput').onKeypress( () => {
setTimeout( () => {
//the rest of the code will go here
}, 100);
});
});Now we're going to add some variables to store the information. Our first of these is going to be called "english", and it will store the value to be converted. We are also going to add a variable called "res", which we will set to '' by default.
$w.onReady( () => {
$w('#englishInput').onKeypress( () => {
setTimeout( () => {
var english = $w('#englishInput').value;
var res = '';
//the rest of the code will go here
}, 100);
});
});The next part of the code is for error handling, which will return false if the input is empty.
$w.onReady( () => {
$w('#englishInput').onKeypress( () => {
setTimeout( () => {
var english = $w('#englishInput').value;
var res = '';
if (english === '') {
$w('#morseResult').text = '';
return false;
}
//the rest of the code will go here
}, 100);
});
});The next part consists of the for function, which is how we'll convert the string.
$w.onReady( () => {
$w('#englishInput').onKeypress( () => {
setTimeout( () => {
var english = $w('#englishInput').value;
var res = '';
if (english === '') {
$w('#morseResult').text = '';
return false;
}
for (var i = 0; i < english.length; i++) {
res += translate[english.charAt(i).toLowerCase()]
}
//the rest of the code will go here
}, 100);
});
});The last part of the code is used to display the result.
$w.onReady( () => {
$w('#englishInput').onKeypress( () => {
setTimeout( () => {
var english = $w('#englishInput').value;
var res = '';
if (english === '') {
$w('#morseResult').text = '';
return false;
}
for (var i = 0; i < english.length; i++) {
res += translate[english.charAt(i).toLowerCase()]
}
$w('#morseResult').text = res;
}, 100);
});
});
const translate = {
'a': '.-',
'b': '-...',
'c': '-.-.',
'd': '-..',
'e': '.',
'f': '..-.',
'g': '--.',
'h': '....',
'i': '..',
'j': '.---',
'k': '-.-',
'l': '.-..',
'm': '--',
'n': '-.',
'o': '---',
'p': '.--.',
'q': '--.-',
'r': '.-.',
's': '...',
't': '-',
'u': '..-',
'v': '...-',
'w': '.--',
'x': '-..-',
'y': '-.--',
'z': '--..',
'1': '.----',
'2': '..---',
'3': '...--',
'4': '....-',
'5': '.....',
'6': '-....',
'7': '--...',
'8': '---..',
'9': '----.',
'0': '-----',
'.': '.-.-.-',
',': '--..--',
'?': '..--..',
"'": '.----.',
'!': '-.-.--',
'/': '-..-.',
'(': '-.--.',
')': '-.--.-',
'&': '.-...',
':': '---...',
';': '-.-.-.',
'=': '-...-',
'+': '.-.-.',
'-': '-....-',
'_': '..--.-',
'"': '.-..-.',
'$': '...-..-',
'@': '.--.-.',
' ': ' '
}Step 3. Publish Your Site
Once your site is live, you'll be able to let your visitors use the convertor.