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.