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 ) {

        // Send error message to user alerting to enter some characters
        swal.fire({
            icon: 'error',
            backdrop: false,
            text: 'Please enter a string to reverse'
        });

    } else {

        // pass the input to reverseMessage function 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);
    }
}

// reverse the string
function reverseMessage(input) { // input = 'hello'

    let output = '';

    for (let i = input.length - 1; i >= 0; i--) {
        output += input[i];
    }

    return output;
}

// display the reversed message
function displayMessage(message) {

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

}
JavaScript

TL;DR

A for loop can be used on a string directly to execute code on each character as if it's an array.

Code Explanation

Flip Flop 180 was created with the following three functions.

getValues kicks everything off. When the "Am I Lucky?" button is pressed, it grabs the value of the string from the user by accessing the DOM. It also uses an if-else statement to check if a string was entered. If no string was entered a sweetalert is displayed notifying the user to enter a string. If all is good, it continues to execute reverseMessage and displayMessage.

reverseMessage uses a for loop to reverse the string by grabbing each character from the string starting from the end of the string and adding it to a new variable. The reversed string is then returned.

displayMessage uses getElementById to display the reversed message to the user.

What I learned

  • A for loop can be used to loop through a string as if it's an array.
  • Everything retrieved from the HTML comes in as a string even if it has a type="number" on the element

Improvements

  • Add error if user enters only spaces
  • Add some kind of decoration or animation when user enters word(s) from the dictionary that are also words from the dictionary backwards