The Code

                
                  // get the user's message to reverse
                  function getValues() {

                    // get the text input from the page
                    let message = document.getElementById('userInput').value;

                    // validate the input: make sure the input is not empty
                    if (message.length == 0) {
                      Swal.fire({
                        icon: 'error',
                        backdrop: false,
                        text: 'Please enter a string to reverse'
                      })
                    } else {
                      // pass the input to reverseMessage and assign its return value to a variable
                      let revMsg = reverseMessage(message);

                      // give the reversed message to displayMessage to show on the page
                      displayMessage(revMsg);
                    }

                  }
                
              

This function receives the user's input. It then shows an error message if the input is empty. Otherwise, it calls reverseMessage to reverse the input, then calls displayMessage to display the reversed input on the webpage.

                
                  // reverse the string
                  function reverseMessage(input) {
                    // return input.split('').reverse().join(''); // <--- Don't use this in an interview
                    let output = '';
                    
                    for (let i = input.length - 1; i >= 0; i--) {
                      output += input[i];
                    }
                    
                    return output;
                  }
                
              

This function reverses the user's input string. It does so by iterating through each character in the string, starting from the end to the start. Each character is added onto the end of a new string, in effect creating the reversed input string.

                
                  // display the reversed message
                  function displayMessage(message) {
                    document.getElementById('msg').textContent = `Your message reversed is: ${message}`;
                    document.getElementById('alert').classList.remove('invisible');
                  }
                
              

This message displays the reversed input string onto the webpage.