The Code
function getValues() {
let userMessage = document.getElementById('message').value;
if (userMessage.length < 2) {
Swal.fire({
icon: 'error',
backdrop: false,
title: 'Woops!',
text: 'Please enter at least 2 characters to reverse'
});
return;
}
let reversed = reverseString(userMessage);
let stringObject = {
input: escapeHTML(userMessage),
reversedInput: escapeHTML(reversed)
};
displayMessage(stringObject);
}
function reverseString(inputString) {
let result = '';
// loop through the string from the end towards the beginning
for (let index = inputString.length - 1; index >= 0; index--) {
result += inputString[index];
}
return result;
}
function displayMessage(stringObject) {
// put our message in the HTML
document.getElementById('result').innerHTML =
`You entered: ${stringObject.input}. Your message reversed is: ${stringObject.reversedInput}`;
document.getElementById('alert').classList.remove('invisible');
}
function escapeHTML(inputString) {
return inputString.replace(/[&<>'"]/g, function(match) {
switch (match) {
case '&': return '&';
case '<': return '<';
case '>': return '>';
case "'": return ''';
case '"': return '"';
}
});
}
The code is structured in 4 functions
getValues()
The getValues
function gets the
message from the input element and save it. If the message is less than 2 characters it shows an error.
If the input characters is 2 or more it will reverse the characters using reverseString. Then it creates
an object with reversed and displays the reversedString.
reverseString()
The reverseString
function takes an input string and initializes an empty result string.
It then iterates through the input string from the last character to the first, appending each character to the result string, effectively reversing the input string.
Finally, it returns the reversed string.
displayMessage()
The displayMessage
function takes an object containing the original and reversed strings.
It updates the HTML element with id result to display these strings, and makes the alert element with id alert
visible by removing the invisible class.
escapeHTML()
The escapeHTML
function replaces special HTML characters in the input string with
their corresponding HTML entities to prevent HTML injection. It uses a regular expression to find these characters and a switch statement to replace them appropriately.